Bug 1101147 - Update about:newtab search styling. r=Mossop

browser/base/content/newtab/newTab.css

@@ -345,6 +345,19 @@ input[type=button] {
   background-size: 26px 26px;
 }
 
+#newtab-search-logo.magnifier {
+  width: 38px; /* 26 image width + 6 left "padding" + 6 right "padding" */
+  -moz-margin-end: 5px;
+  background-size: 26px;
+  background-image: url("chrome://browser/skin/magnifier.png");
+}
+
+@media not all and (max-resolution: 1dppx) {
+  #newtab-search-icon.magnifier {
+    background-image: url("chrome://browser/skin/magnifier@2x.png");
+  }
+}
+
 #newtab-search-logo[type="logo"] {
   background-size: 65px 26px;
   width: 77px; /* 65 image width + 6 left "padding" + 6 right "padding" */
@@ -366,7 +379,7 @@ input[type=button] {
 }
 
 #newtab-search-text {
-  height: 38px;
+  height: 38px; /* same height as #newtab-search-logo */
   -moz-box-flex: 1;
 
   padding: 0 8px;
@@ -390,7 +403,7 @@ input[type=button] {
 }
 
 #newtab-search-submit {
-  height: 38px;
+  height: 38px; /* same height as #newtab-search-logo */
   font-size: 13px !important;
 
   -moz-margin-start: -1px;

browser/base/content/newtab/newTab.xul

@@ -14,6 +14,8 @@
   %newTabDTD;
   <!ENTITY % searchBarDTD SYSTEM "chrome://browser/locale/searchbar.dtd">
   %searchBarDTD;
+  <!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd">
+  %browserDTD;
 ]>
 
 <xul:window id="newtab-window" xmlns="http://www.w3.org/1999/xhtml"
@@ -28,7 +30,7 @@
   <xul:panel id="newtab-search-panel" orient="vertical" type="arrow"
              noautohide="true" hidden="true">
     <xul:hbox id="newtab-search-manage" class="newtab-search-panel-engine">
-      <xul:label>&cmd_engineManager.label;</xul:label>
+      <xul:label>&changeSearchSettings.button;</xul:label>
     </xul:hbox>
   </xul:panel>
 

browser/base/content/newtab/search.js

@@ -8,12 +8,23 @@ let gSearch = {
 
   currentEngineName: null,
 
+  get useNewUI() {
+    let newUI = Services.prefs.getBoolPref("browser.search.showOneOffButtons");
+    delete this.useNewUI;
+    this.useNewUI = newUI;
+    return newUI;
+  },
+
   init: function () {
     for (let idSuffix of this._nodeIDSuffixes) {
       this._nodes[idSuffix] =
         document.getElementById("newtab-search-" + idSuffix);
     }
 
+    if (this.useNewUI) {
+      this._nodes.logo.classList.add("magnifier");
+    }
+
     window.addEventListener("ContentSearchService", this);
     this._send("GetState");
   },
@@ -122,6 +133,11 @@ let gSearch = {
   },
 
   _setUpPanel: function () {
+    // The new search UI only contains the "manage" engine entry in the panel
+    if (this.useNewUI) {
+      return;
+    }
+
     // Build the panel if necessary.
     if (this._newEngines) {
       this._buildPanel(this._newEngines);
@@ -198,28 +214,30 @@ let gSearch = {
   _setCurrentEngine: function (engine) {
     this.currentEngineName = engine.name;
 
-    let type = "";
-    let uri;
-    let logoBuf = window.devicePixelRatio >= 2 ?
-                  engine.logo2xBuffer || engine.logoBuffer :
-                  engine.logoBuffer || engine.logo2xBuffer;
-    if (logoBuf) {
-      uri = URL.createObjectURL(new Blob([logoBuf]));
-      type = "logo";
-    }
-    else if (engine.iconBuffer) {
-      uri = this._getFaviconURIFromBuffer(engine.iconBuffer);
-      type = "favicon";
-    }
-    this._nodes.logo.setAttribute("type", type);
+    if (!this.useNewUI) {
+      let type = "";
+      let uri;
+      let logoBuf = window.devicePixelRatio >= 2 ?
+                    engine.logo2xBuffer || engine.logoBuffer :
+                    engine.logoBuffer || engine.logo2xBuffer;
+      if (logoBuf) {
+        uri = URL.createObjectURL(new Blob([logoBuf]));
+        type = "logo";
+      }
+      else if (engine.iconBuffer) {
+        uri = this._getFaviconURIFromBuffer(engine.iconBuffer);
+        type = "favicon";
+      }
+      this._nodes.logo.setAttribute("type", type);
 
-    if (uri) {
-      this._nodes.logo.style.backgroundImage = "url(" + uri + ")";
+      if (uri) {
+        this._nodes.logo.style.backgroundImage = "url(" + uri + ")";
+      }
+      else {
+        this._nodes.logo.style.backgroundImage = "";
+      }
+      this._nodes.text.placeholder = engine.placeholder;
     }
-    else {
-      this._nodes.logo.style.backgroundImage = "";
-    }
-    this._nodes.text.placeholder = engine.placeholder;
 
     // Set up the suggestion controller.
     if (!this._suggestionController) {

browser/base/content/test/newtab/browser_newtab_search.js

@@ -119,41 +119,12 @@ let runTaskifiedTests = Task.async(function* () {
     promiseClick(logoImg()),
   ]);
 
-  // In the search panel, click the no-logo engine.  It should become the
-  // current engine.
-  let noLogoBox = null;
-  for (let box of panel.childNodes) {
-    if (box.getAttribute("engine") == noLogoEngine.name) {
-      noLogoBox = box;
-      break;
-    }
-  }
-  ok(noLogoBox, "Search panel should contain the no-logo engine");
-  yield Promise.all([
-    promiseSearchEvents(["CurrentEngine"]),
-    promiseClick(noLogoBox),
-  ]);
-
-  yield checkCurrentEngine(ENGINE_NO_LOGO);
-
-  // Switch back to the 1x-and-2x logo engine.
-  Services.search.currentEngine = logo1x2xEngine;
-  yield promiseSearchEvents(["CurrentEngine"]);
-  yield checkCurrentEngine(ENGINE_1X_2X_LOGO);
-
-  // Open the panel again.
-  yield Promise.all([
-    promisePanelShown(panel),
-    promiseClick(logoImg()),
-  ]);
-
-  // In the search panel, click the Manage Engines box.
   let manageBox = $("manage");
   ok(!!manageBox, "The Manage Engines box should be present in the document");
-  yield Promise.all([
-    promiseManagerOpen(),
-    promiseClick(manageBox),
-  ]);
+  is(panel.childNodes.length, 1, "Search panel should only contain the Manage Engines entry");
+  is(panel.childNodes[0], manageBox, "Search panel should contain the Manage Engines entry");
+
+  panel.hidePopup();
 
   // Add the engine that provides search suggestions and switch to it.
   let suggestionEngine = yield promiseNewSearchEngine(ENGINE_SUGGESTIONS);
@@ -340,42 +311,6 @@ let checkCurrentEngine = Task.async(function* ({name: basename, logoPrefix1x, lo
   // gSearch.currentEngineName
   is(gSearch().currentEngineName, engine.name,
      "currentEngineName: " + engine.name);
-
-  let expectedLogoPrefix = window.devicePixelRatio >= 2 ? logoPrefix2x : logoPrefix1x;
-
-  // Check that the right logo is set.
-  let logo = logoImg();
-  if (expectedLogoPrefix) {
-    let objectURL = logo.style.backgroundImage.match(/^url\("([^"]*)"\)$/)[1];
-    ok(objectURL, "ObjectURL should be there.");
-
-    let blob = yield objectURLToBlob(objectURL);
-    let base64 = yield blobToBase64(blob);
-
-    ok(base64.startsWith(expectedLogoPrefix), "Checking image prefix.");
-
-    logo.click();
-    let panel = searchPanel();
-    yield promisePanelShown(panel);
-
-    panel.hidePopup();
-    for (let engineBox of panel.childNodes) {
-      let engineName = engineBox.getAttribute("engine");
-      if (engineName == engine.name) {
-        is(engineBox.getAttribute("selected"), "true",
-           "Engine box's selected attribute should be true for " +
-           "selected engine: " + engineName);
-      }
-      else {
-        ok(!engineBox.hasAttribute("selected"),
-           "Engine box's selected attribute should be absent for " +
-           "non-selected engine: " + engineName);
-      }
-    }
-  }
-  else {
-    is(logo.style.backgroundImage, "", "backgroundImage should be empty");
-  }
 });
 
 function promisePanelShown(panel) {
@@ -399,31 +334,6 @@ function promiseClick(node) {
   return deferred.promise;
 }
 
-function promiseManagerOpen() {
-  info("Waiting for the search manager window to open...");
-  let deferred = Promise.defer();
-  let winWatcher = Cc["@mozilla.org/embedcomp/window-watcher;1"].
-                   getService(Ci.nsIWindowWatcher);
-  winWatcher.registerNotification(function onWin(subj, topic, data) {
-    if (topic == "domwindowopened" && subj instanceof Ci.nsIDOMWindow) {
-      subj.addEventListener("load", function onLoad() {
-        subj.removeEventListener("load", onLoad);
-        if (subj.document.documentURI ==
-            "chrome://browser/content/search/engineManager.xul") {
-          winWatcher.unregisterNotification(onWin);
-          ok(true, "Observed search manager window opened");
-          is(subj.opener, gWindow,
-             "Search engine manager opener should be the chrome browser " +
-             "window containing the newtab page");
-          subj.close();
-          deferred.resolve();
-        }
-      });
-    }
-  });
-  return deferred.promise;
-}
-
 function searchPanel() {
   return $("panel");
 }

browser/modules/ContentSearch.jsm

@@ -220,6 +220,12 @@ this.ContentSearch = {
 
   _onMessageManageEngines: function (msg, data) {
     let browserWin = msg.target.ownerDocument.defaultView;
+
+    if (Services.prefs.getBoolPref("browser.search.showOneOffButtons")) {
+      browserWin.openPreferences("paneSearch");
+      return Promise.resolve();
+    }
+
     let wm = Components.classes["@mozilla.org/appshell/window-mediator;1"].
              getService(Components.interfaces.nsIWindowMediator);
     let window = wm.getMostRecentWindow("Browser:SearchManager");

browser/modules/test/browser_ContentSearch.js

@@ -70,34 +70,6 @@ add_task(function* SetCurrentEngine() {
   });
 });
 
-add_task(function* ManageEngines() {
-  yield addTab();
-  gMsgMan.sendAsyncMessage(TEST_MSG, {
-    type: "ManageEngines",
-  });
-  let deferred = Promise.defer();
-  let winWatcher = Cc["@mozilla.org/embedcomp/window-watcher;1"].
-                   getService(Ci.nsIWindowWatcher);
-  winWatcher.registerNotification(function onOpen(subj, topic, data) {
-    if (topic == "domwindowopened" && subj instanceof Ci.nsIDOMWindow) {
-      subj.addEventListener("load", function onLoad() {
-        subj.removeEventListener("load", onLoad);
-        if (subj.document.documentURI ==
-            "chrome://browser/content/search/engineManager.xul") {
-          winWatcher.unregisterNotification(onOpen);
-          ok(true, "Observed search manager window open");
-          is(subj.opener, window,
-             "Search engine manager opener should be this chrome window");
-          subj.close();
-          deferred.resolve();
-        }
-      });
-    }
-  });
-  info("Waiting for search engine manager window to open...");
-  yield deferred.promise;
-});
-
 add_task(function* modifyEngine() {
   yield addTab();
   let engine = Services.search.currentEngine;