Add onboarding UI and current engine telemetry

README.md

@@ -0,0 +1,2 @@
+# Search Shield Study
+A shield Study add-on testing the search experience.

chrome.manifest

@@ -0,0 +1 @@
+content unified-urlbar chrome/content/

code/content/Panel.jsm → chrome/content/Panel.jsm

@@ -1,17 +1,25 @@
+"use strict";
+
 this.EXPORTED_SYMBOLS = [
-  "Panel",
+  "Panel"
 ];
 
 const EXISTING_FOOTER_ID = "urlbar-search-footer";
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("chrome://unified-urlbar/content/Telemetry.jsm");
+Cu.import("resource://gre/modules/Preferences.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "UnifiedUrlbar",
+                                  "chrome://unified-urlbar/content/UnifiedUrlbar.jsm");
 
 this.Panel = function (panelElt) {
   this.panelElement = panelElt;
   this._initPanelElement();
+  this.panelElement.addEventListener("popupshowing", this);
+  this.panelElement.addEventListener("popuphiding", this);
   this._initKeyHandler();
   this.urlbar.addEventListener("input", this);
 };
@@ -39,11 +47,105 @@ this.Panel.prototype = {
     this.urlbar.removeEventListener("input", this);
 
     this.panelElement.removeEventListener("popupshowing", this);
+    this.panelElement.removeEventListener("popuphiding", this);
 
     this.footer.remove();
     if (this._existingFooter) {
       this._existingFooterParent.appendChild(this._existingFooter);
     }
+
+    this._uninitTipElement();
+  },
+
+  _shouldShowHint() {
+    const SHOW_TIP_DEFAULT_COUNT = 5;
+    let tipShownCount = SHOW_TIP_DEFAULT_COUNT;
+    if (Preferences.has("browser.urlbar.experiment.unified-urlbar.tipShownCount")) {
+      tipShownCount = Preferences.get("browser.urlbar.experiment.unified-urlbar.tipShownCount",
+                                      SHOW_TIP_DEFAULT_COUNT);
+    }
+
+    if (tipShownCount > 0) {
+      Preferences.set("browser.urlbar.experiment.unified-urlbar.tipShownCount",
+                      --tipShownCount);
+    }
+
+    return tipShownCount > 0 &&
+           Preferences.get("browser.urlbar.suggest.searches", false);
+  },
+
+  _ensureTipElement() {
+    if (this.tipContainer)
+      return;
+
+    let tipContainer = this.document.createElementNS(XUL_NS, "hbox");
+    tipContainer.id = "urlbar-tip-container";
+    tipContainer.setAttribute("flex", "1");
+    tipContainer.setAttribute("align", "center");
+    this.tipContainer = tipContainer;
+
+    let icon = this.document.createElementNS(XUL_NS, "image");
+    icon.className = "ac-site-icon";
+    tipContainer.appendChild(icon);
+    this.tipIcon = icon;
+
+    let titleBox = this.document.createElementNS(XUL_NS, "hbox");
+    titleBox.id = "urlbar-tip-title";
+    tipContainer.appendChild(titleBox);
+
+    let title = this.document.createElementNS(XUL_NS, "description");
+    title.className = "ac-title-text";
+    title.textContent = "Firefox";
+    titleBox.appendChild(title);
+
+    let tipBox = this.document.createElementNS(XUL_NS, "hbox");
+    tipBox.id = "urlbar-tip-box";
+    tipContainer.setAttribute("align", "center");
+    tipContainer.appendChild(tipBox);
+
+    let tip = this.document.createElementNS(XUL_NS, "description");
+    tip.innerHTML = `<span class="emoji">&#x1f4a1;</span><span class="bold">Tip:</span> Results with a magnifying glass are search suggestions. They might be what you're looking for!<span class="emoji">&#x1F604;</span>`;
+    tipBox.appendChild(tip);
+
+    let notification = this.panelElement.searchSuggestionsNotification;
+    for (let child of notification.childNodes) {
+      child.collapsed = true;
+    }
+    notification.setAttribute("tip", "true");
+    notification.appendChild(tipContainer);
+  },
+
+  _uninitTipElement() {
+    if (this.tipContainer) {
+      this.tipContainer.remove();
+      delete this.tipContainer;
+    }
+    let notification = this.panelElement.searchSuggestionsNotification;
+    notification.removeAttribute("tip");
+    for (let child of notification.childNodes) {
+      child.collapsed = false;
+    }
+    this.document.getAnonymousElementByAttribute(this.panelElement, "anonid", "search-suggestions-notification")
+                 .style.visibility = "collapse";
+  },
+
+  _updateTip() {
+    if (!this._shouldShowHint()) {
+      if (this.tipContainer) {
+        this._uninitTipElement();
+      }
+      return;
+    }
+
+    this._ensureTipElement();
+
+    let iconStart = this.panelElement.siteIconStart;
+    if (iconStart) {
+      this.tipIcon.style.marginInlineStart = iconStart + "px";
+    }
+    this.document.getAnonymousElementByAttribute(this.panelElement, "anonid", "search-suggestions-notification")
+                 .style.visibility = "visible";
+    this.tipContainer.setAttribute("animate", "true");
   },
 
   _initPanelElement() {
@@ -71,8 +173,6 @@ this.Panel.prototype = {
     hbox.appendChild(this.settingsButton);
 
     this.panelElement.appendChild(footer);
-
-    this.panelElement.addEventListener("popupshowing", this);
   },
 
   _makeFooter() {
@@ -260,9 +360,6 @@ this.Panel.prototype = {
         return;
     }
 
-    if (this.selectedButton != this.settingsButton) {
-      Telemetry.incrementValue("oneOffButtonSelectedByKeypress");
-    }
     event.preventDefault();
   },
 
@@ -279,7 +376,7 @@ this.Panel.prototype = {
       return;
     }
     if (this.selectedButton == this.settingsButton) {
-      Telemetry.incrementValue("searchSettingsClicked");
+      UnifiedUrlbar.reportTelemetryValue("searchSettingsClicked");
       this.window.openPreferences("paneSearch");
     } else {
       this._doSearchFromButton(this.selectedButton, event);
@@ -300,6 +397,13 @@ this.Panel.prototype = {
     this.selectedButton = null;
     this._buildButtonList();
     this._updateHeader();
+    this._updateTip();
+  },
+
+  _onPopuphiding(event) {
+    if (this.tipContainer) {
+      this.tipContainer.removeAttribute("animate");
+    }
   },
 
   _onMouseover(event) {
@@ -312,7 +416,6 @@ this.Panel.prototype = {
          !target.classList.contains("dummy")) ||
         target.classList.contains("addengine-item") ||
         target.classList.contains("search-setting-button")) {
-      Telemetry.incrementValue("oneOffButtonSelectedByMouseover");
       this.selectedButton = target;
     }
   },
@@ -344,9 +447,9 @@ this.Panel.prototype = {
 
     let win = button.ownerDocument.defaultView;
     if (event instanceof win.KeyboardEvent) {
-      Telemetry.incrementValue("searchByReturnKeyOnOneOffButton", { engine } );
+      UnifiedUrlbar.reportTelemetryValue("searchByReturnKeyOnOneOffButton", { engine } );
     } else if (event instanceof win.MouseEvent) {
-      Telemetry.incrementValue("searchByClickOnOneOffButton", { engine });
+      UnifiedUrlbar.reportTelemetryValue("searchByClickOnOneOffButton", { engine });
     }
 
     let query = this.urlbar.controller.searchString;
@@ -367,8 +470,6 @@ this.Panel.prototype = {
       this.buttonList.firstChild.remove();
     }
 
-    let Preferences =
-      Cu.import("resource://gre/modules/Preferences.jsm", {}).Preferences;
     let pref = Preferences.get("browser.search.hiddenOneOffs");
     let hiddenList = pref ? pref.split(",") : [];
 
@@ -448,14 +549,6 @@ this.Panel.prototype = {
 
       this.buttonList.appendChild(button);
     }
-
-    // Add a data point for the engine count if it's changed (or this is the
-    // first time reaching here).
-    this._engineCount = this._engineCount || 0;
-    if (engines.length != this._engineCount) {
-      this._engineCount = engines.length;
-      Telemetry.setValue("engineCount", engines.length);
-    }
   },
 
   get numButtons() {