Bug 1490508 - Apply mask correctly to CFR recommendation on urlbar focus r=Mardak,ursula a=pascalc
authorahillier <ahillier@mozilla.com>
Thu, 13 Sep 2018 23:21:06 +0000
changeset 490201 b80fb23f66ea441b92d925bc878e07b56fba33cf
parent 490200 241c336e1fd0a5932b5f23efaf0d99c10802ffb0
child 490202 503d94e63a248b88c412bc596247c8999a8aaaba
push id9944
push useredilee@gmail.com
push dateFri, 05 Oct 2018 22:06:24 +0000
treeherdermozilla-beta@b80fb23f66ea [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMardak, ursula, pascalc
bugs1490508
milestone63.0
Bug 1490508 - Apply mask correctly to CFR recommendation on urlbar focus r=Mardak,ursula a=pascalc Other part of this patch landed as https://hg.mozilla.org/releases/mozilla-beta/rev/cd305e92721b Differential Revision: https://phabricator.services.mozilla.com/D7320
browser/components/newtab/lib/CFRPageActions.jsm
--- a/browser/components/newtab/lib/CFRPageActions.jsm
+++ b/browser/components/newtab/lib/CFRPageActions.jsm
@@ -53,18 +53,16 @@ class PageAction {
     this.dispatchUserAction = this.dispatchUserAction.bind(this);
 
     this._l10n = new Localization([
       "browser/newtab/asrouter.ftl"
     ]);
 
     // Saved timeout IDs for scheduled state changes, so they can be cancelled
     this.stateTransitionTimeoutIDs = [];
-
-    this.container.onclick = this._handleClick;
   }
 
   _dispatchImpression(message) {
     this._dispatchToASRouter({type: "IMPRESSION", data: message});
   }
 
   _sendTelemetry(ping) {
     // Note `useClientID` is set to true to tell TelemetryFeed to use client_id
@@ -84,16 +82,21 @@ class PageAction {
 
     // Wait for layout to flush to avoid a synchronous reflow then calculate the
     // label width. We can safely get the width even though the recommendation is
     // collapsed; the label itself remains full width (with its overflow hidden)
     await this.window.promiseDocumentFlushed;
     const [{width}] = this.label.getClientRects();
     this.urlbar.style.setProperty("--cfr-label-width", `${width}px`);
 
+    this.container.addEventListener("click", this._handleClick);
+    // Collapse the recommendation on url bar focus in order to free up more
+    // space to display and edit the url
+    this.urlbar.addEventListener("focus", this._collapse);
+
     if (shouldExpand) {
       this._clearScheduledStateChanges();
 
       // After one second, expand
       this._expand(DELAY_BEFORE_EXPAND_MS);
 
       this._dispatchImpression(recommendation);
       // Only send an impression ping upon the first expansion.
@@ -105,54 +108,56 @@ class PageAction {
       }
     }
   }
 
   hide() {
     this.container.hidden = true;
     this._clearScheduledStateChanges();
     this.urlbar.removeAttribute("cfr-recommendation-state");
+    this.container.removeEventListener("click", this._handleClick);
+    this.urlbar.removeEventListener("focus", this._collapse);
     if (this.currentNotification) {
       this.window.PopupNotifications.remove(this.currentNotification);
       this.currentNotification = null;
     }
   }
 
   dispatchUserAction(action) {
     this._dispatchToASRouter(
       {type: "USER_ACTION", data: action},
       {browser: this.window.gBrowser.selectedBrowser}
     );
   }
 
-  _expand(delay = 0) {
-    if (!delay) {
+  _expand(delay) {
+    if (delay > 0) {
+      this.stateTransitionTimeoutIDs.push(this.window.setTimeout(() => {
+        this.urlbar.setAttribute("cfr-recommendation-state", "expanded");
+      }, delay));
+    } else {
       // Non-delayed state change overrides any scheduled state changes
       this._clearScheduledStateChanges();
       this.urlbar.setAttribute("cfr-recommendation-state", "expanded");
-    } else {
-      this.stateTransitionTimeoutIDs.push(this.window.setTimeout(() => {
-        this.urlbar.setAttribute("cfr-recommendation-state", "expanded");
-      }, delay));
     }
   }
 
-  _collapse(delay = 0) {
-    if (!delay) {
+  _collapse(delay) {
+    if (delay > 0) {
+      this.stateTransitionTimeoutIDs.push(this.window.setTimeout(() => {
+        if (this.urlbar.getAttribute("cfr-recommendation-state") === "expanded") {
+          this.urlbar.setAttribute("cfr-recommendation-state", "collapsed");
+        }
+      }, delay));
+    } else {
       // Non-delayed state change overrides any scheduled state changes
       this._clearScheduledStateChanges();
       if (this.urlbar.getAttribute("cfr-recommendation-state") === "expanded") {
         this.urlbar.setAttribute("cfr-recommendation-state", "collapsed");
       }
-    } else {
-      this.stateTransitionTimeoutIDs.push(this.window.setTimeout(() => {
-        if (this.urlbar.getAttribute("cfr-recommendation-state") === "expanded") {
-          this.urlbar.setAttribute("cfr-recommendation-state", "collapsed");
-        }
-      }, delay));
     }
   }
 
   _clearScheduledStateChanges() {
     while (this.stateTransitionTimeoutIDs.length > 0) {
       // clearTimeout is safe even with invalid/expired IDs
       this.window.clearTimeout(this.stateTransitionTimeoutIDs.pop());
     }