tor-browser

Search.jsx (6952B)

---

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */

/* globals ContentSearchHandoffUIController */

/**
* @backward-compat { version 148 }
*
* Temporary dual implementation to support train hopping. The old handoff UI
* is kept alongside the new contentSearchHandoffUI.mjs custom element until
* the module lands on all channels. Controlled by the pref
* browser.newtabpage.activity-stream.search.useHandoffComponent.
* Remove the old implementation and the pref once this ships to Release.
*/

import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
import { connect } from "react-redux";
import { Logo } from "content-src/components/Logo/Logo";
import React from "react";
import { ExternalComponentWrapper } from "content-src/components/ExternalComponentWrapper/ExternalComponentWrapper";

export class _Search extends React.PureComponent {
 constructor(props) {
   super(props);
   this.onSearchHandoffClick = this.onSearchHandoffClick.bind(this);
   this.onSearchHandoffPaste = this.onSearchHandoffPaste.bind(this);
   this.onSearchHandoffDrop = this.onSearchHandoffDrop.bind(this);
   this.onInputMountHandoff = this.onInputMountHandoff.bind(this);
   this.onSearchHandoffButtonMount =
     this.onSearchHandoffButtonMount.bind(this);
 }

 handleEvent(event) {
   // Also track search events with our own telemetry
   if (event.detail.type === "Search") {
     this.props.dispatch(ac.UserEvent({ event: "SEARCH" }));
   }
 }

 doSearchHandoff(text) {
   this.props.dispatch(
     ac.OnlyToMain({ type: at.HANDOFF_SEARCH_TO_AWESOMEBAR, data: { text } })
   );
   this.props.dispatch({ type: at.FAKE_FOCUS_SEARCH });
   this.props.dispatch(ac.UserEvent({ event: "SEARCH_HANDOFF" }));
   if (text) {
     this.props.dispatch({ type: at.DISABLE_SEARCH });
   }
 }

 onSearchHandoffClick(event) {
   // When search hand-off is enabled, we render a big button that is styled to
   // look like a search textbox. If the button is clicked, we style
   // the button as if it was a focused search box and show a fake cursor but
   // really focus the awesomebar without the focus styles ("hidden focus").
   event.preventDefault();
   this.doSearchHandoff();
 }

 onSearchHandoffPaste(event) {
   event.preventDefault();
   this.doSearchHandoff(event.clipboardData.getData("Text"));
 }

 onSearchHandoffDrop(event) {
   event.preventDefault();
   let text = event.dataTransfer.getData("text");
   if (text) {
     this.doSearchHandoff(text);
   }
 }

 componentDidMount() {
   const {
     caretBlinkCount,
     caretBlinkTime,
     "search.useHandoffComponent": useHandoffComponent,
     "externalComponents.enabled": useExternalComponents,
   } = this.props.Prefs.values;

   if (useExternalComponents) {
     // Nothing to do - the external component will have set the caret
     // values itself.
     return;
   }

   if (useHandoffComponent) {
     const { handoffUI } = this;
     if (handoffUI) {
       // If caret blink count isn't defined, use the default infinite behavior for animation
       handoffUI.style.setProperty(
         "--caret-blink-count",
         caretBlinkCount > -1 ? caretBlinkCount : "infinite"
       );

       // Apply custom blink rate if set, else fallback to default (567ms on/off --> 1134ms total)
       handoffUI.style.setProperty(
         "--caret-blink-time",
         caretBlinkTime > 0 ? `${caretBlinkTime * 2}ms` : `${1134}ms`
       );
     }
   } else {
     const caret = this.fakeCaret;
     if (caret) {
       // If caret blink count isn't defined, use the default infinite behavior for animation
       caret.style.setProperty(
         "--caret-blink-count",
         caretBlinkCount > -1 ? caretBlinkCount : "infinite"
       );

       // Apply custom blink rate if set, else fallback to default (567ms on/off --> 1134ms total)
       caret.style.setProperty(
         "--caret-blink-time",
         caretBlinkTime > 0 ? `${caretBlinkTime * 2}ms` : `${1134}ms`
       );
     }
   }
 }

 onInputMountHandoff(input) {
   if (input) {
     // The handoff UI controller helps us set the search icon and reacts to
     // changes to default engine to keep everything in sync.
     this._handoffSearchController = new ContentSearchHandoffUIController();
   }
 }

 onSearchHandoffButtonMount(button) {
   // Keep a reference to the button for use during "paste" event handling.
   this._searchHandoffButton = button;
 }

 /*
  * Do not change the ID on the input field, as legacy newtab code
  * specifically looks for the id 'newtab-search-text' on input fields
  * in order to execute searches in various tests
  */
 render() {
   const useHandoffComponent =
     this.props.Prefs.values["search.useHandoffComponent"];
   const useExternalComponents =
     this.props.Prefs.values["externalComponents.enabled"];

   if (useHandoffComponent) {
     if (useExternalComponents) {
       return (
         <div className="search-wrapper">
           {this.props.showLogo && <Logo />}
           <ExternalComponentWrapper
             type="SEARCH"
             className="search-inner-wrapper"
           ></ExternalComponentWrapper>
         </div>
       );
     }
     return (
       <div className="search-wrapper">
         {this.props.showLogo && <Logo />}
         <div className="search-inner-wrapper">
           <content-search-handoff-ui
             ref={el => {
               this.handoffUI = el;
             }}
           ></content-search-handoff-ui>
         </div>
       </div>
     );
   }

   const wrapperClassName = [
     "search-wrapper",
     this.props.disable && "search-disabled",
     this.props.fakeFocus && "fake-focus",
   ]
     .filter(v => v)
     .join(" ");

   return (
     <div className={wrapperClassName}>
       {this.props.showLogo && <Logo />}
       <div className="search-inner-wrapper">
         <button
           className="search-handoff-button"
           ref={this.onSearchHandoffButtonMount}
           onClick={this.onSearchHandoffClick}
           tabIndex="-1"
         >
           <div className="fake-textbox" />
           <input
             type="search"
             className="fake-editable"
             tabIndex="-1"
             aria-hidden="true"
             onDrop={this.onSearchHandoffDrop}
             onPaste={this.onSearchHandoffPaste}
             ref={this.onInputMountHandoff}
           />
           <div
             className="fake-caret"
             ref={el => {
               this.fakeCaret = el;
             }}
           />
         </button>
       </div>
     </div>
   );
 }
}

export const Search = connect(state => ({
 Prefs: state.Prefs,
}))(_Search);