Bug 1294680 - remove the engine drop down, r=past. a=lizzard
authorFlorian Quèze <florian@queze.net>
Fri, 12 Aug 2016 15:39:15 +0200
changeset 347656 a6c0964964bee6506122bfb8e97734d866ae8aa0
parent 347655 f23573c8eff0733acbb918309fa469abe2b2f3c9
child 347657 0d2e9c07cc9aa30ea762348152efc7c168f3c69e
push id6389
push userraliiev@mozilla.com
push dateMon, 19 Sep 2016 13:38:22 +0000
treeherdermozilla-beta@01d67bfe6c81 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspast, lizzard
bugs1294680
milestone50.0a2
Bug 1294680 - remove the engine drop down, r=past. a=lizzard
browser/components/search/content/searchReset.js
browser/components/search/content/searchReset.xhtml
browser/components/search/test/browser_aboutSearchReset.js
browser/themes/shared/searchReset.css
--- a/browser/components/search/content/searchReset.js
+++ b/browser/components/search/content/searchReset.js
@@ -11,44 +11,21 @@ Cu.import("resource://gre/modules/Servic
 const TELEMETRY_RESULT_ENUM = {
   RESTORED_DEFAULT: 0,
   KEPT_CURRENT: 1,
   CHANGED_ENGINE: 2,
   CLOSED_PAGE: 3
 };
 
 window.onload = function() {
-  let list = document.getElementById("defaultEngine");
-  let originalDefault = Services.search.originalDefaultEngine.name;
-  Services.search.getDefaultEngines().forEach(e => {
-    let opt = document.createElement("option");
-    opt.setAttribute("value", e.name);
-    opt.engine = e;
-    opt.textContent = e.name;
-    if (e.iconURI)
-      opt.style.backgroundImage = 'url("' + e.iconURI.spec + '")';
-    if (e.name == originalDefault)
-      opt.setAttribute("selected", "true");
-    list.appendChild(opt);
-  });
-
-  let updateIcon = () => {
-    list.style.setProperty("--engine-icon-url",
-                           list.selectedOptions[0].style.backgroundImage);
-  };
-
-  list.addEventListener("change", updateIcon);
-  // When selecting using the keyboard, the 'change' event is only fired after
-  // the user presses <enter> or moves the focus elsewhere.
-  // keypress/keyup fire too late and cause flicker when updating the icon.
-  // keydown fires too early and the selected option isn't changed yet.
-  list.addEventListener("keydown", () => {
-    Services.tm.mainThread.dispatch(updateIcon, Ci.nsIThread.DISPATCH_NORMAL);
-  });
-  updateIcon();
+  let defaultEngine = document.getElementById("defaultEngine");
+  let originalDefault = Services.search.originalDefaultEngine;
+  defaultEngine.textContent = originalDefault.name;
+  defaultEngine.style.backgroundImage =
+    'url("' + originalDefault.iconURI.spec + '")';
 
   document.getElementById("searchResetChangeEngine").focus();
   window.addEventListener("unload", recordPageClosed);
 };
 
 function doSearch() {
   let queryString = "";
   let purpose = "";
@@ -85,27 +62,21 @@ function keepCurrentEngine() {
   // Calling the currentEngine setter will force a correct loadPathHash to be
   // written for this engine, so that we don't prompt the user again.
   Services.search.currentEngine = Services.search.currentEngine;
   record(TELEMETRY_RESULT_ENUM.KEPT_CURRENT);
   doSearch();
 }
 
 function changeSearchEngine() {
-  let list = document.getElementById("defaultEngine");
-  let engine = list.selectedOptions[0].engine;
+  let engine = Services.search.originalDefaultEngine;
   if (engine.hidden)
     engine.hidden = false;
   Services.search.currentEngine = engine;
 
-  // Record if we restored the original default or changed to another engine.
-  let originalDefault = Services.search.originalDefaultEngine.name;
-  let code = TELEMETRY_RESULT_ENUM.CHANGED_ENGINE;
-  if (Services.search.originalDefaultEngine.name == engine.name)
-    code = TELEMETRY_RESULT_ENUM.RESTORED_DEFAULT;
-  record(code);
+  record(TELEMETRY_RESULT_ENUM.RESTORED_DEFAULT);
 
   doSearch();
 }
 
 function recordPageClosed() {
   record(TELEMETRY_RESULT_ENUM.CLOSED_PAGE);
 }
--- a/browser/components/search/content/searchReset.xhtml
+++ b/browser/components/search/content/searchReset.xhtml
@@ -34,19 +34,17 @@
 
     <div class="container">
       <div class="title">
         <h1 class="title-text">&searchreset.pageTitle;</h1>
       </div>
 
       <div class="description">
         <p>&searchreset.pageInfo1;</p>
-        <p>&searchreset.selector.label;
-          <select id="defaultEngine"></select>
-        </p>
+        <p>&searchreset.selector.label;<span id="defaultEngine"/></p>
 
         <p>&searchreset.beforelink.pageInfo2;<a id="linkSettingsPage" href="about:preferences#search">&searchreset.link.pageInfo2;</a>&searchreset.afterlink.pageInfo2;</p>
       </div>
 
       <div class="button-container">
         <xul:button id="searchResetKeepCurrent"
                     label="&searchreset.noChangeButton;"
                     accesskey="&searchreset.noChangeButton.access;"
--- a/browser/components/search/test/browser_aboutSearchReset.js
+++ b/browser/components/search/test/browser_aboutSearchReset.js
@@ -72,76 +72,40 @@ var gTests = [
   }
 },
 
 {
   desc: "Test the 'Restore Search Defaults' button.",
   run: function* () {
     let currentEngine = Services.search.currentEngine;
     let originalEngine = Services.search.originalDefaultEngine;
+    let doc = gBrowser.contentDocument;
+    let defaultEngineSpan = doc.getElementById("defaultEngine");
+    is(defaultEngineSpan.textContent, originalEngine.name,
+       "the name of the original default engine is displayed");
+
     let expectedURL = originalEngine.
                       getSubmission(kSearchStr, null, kSearchPurpose).
                       uri.spec;
-
     let loadPromise = promiseStoppedLoad(expectedURL);
-    let doc = gBrowser.contentDocument;
     let button = doc.getElementById("searchResetChangeEngine");
     is(doc.activeElement, button,
        "the 'Change Search Engine' button is focused");
     button.click();
     yield loadPromise;
 
     is(originalEngine, Services.search.currentEngine,
        "the default engine is back to the original one");
 
     checkTelemetryRecords(TELEMETRY_RESULT_ENUM.RESTORED_DEFAULT);
     Services.search.currentEngine = currentEngine;
   }
 },
 
 {
-  desc: "Test the engine selector drop down.",
-  run: function* () {
-    let originalEngineName = Services.search.originalDefaultEngine.name;
-
-    let doc = gBrowser.contentDocument;
-    let list = doc.getElementById("defaultEngine");
-    is(list.value, originalEngineName,
-       "the default selection of the dropdown is the original default engine");
-
-    let defaultEngines = Services.search.getDefaultEngines();
-    is(list.childNodes.length, defaultEngines.length,
-       "the dropdown has the correct count of engines");
-
-    // Select an engine that isn't the original default one.
-    let engine;
-    for (let i = 0; i < defaultEngines.length; ++i) {
-      if (defaultEngines[i].name != originalEngineName) {
-        engine = defaultEngines[i];
-        engine.hidden = true;
-        break;
-      }
-    }
-    list.value = engine.name;
-
-    let expectedURL = engine.getSubmission(kSearchStr, null, kSearchPurpose)
-                            .uri.spec;
-    let loadPromise = promiseStoppedLoad(expectedURL);
-    doc.getElementById("searchResetChangeEngine").click();
-    yield loadPromise;
-
-    ok(!engine.hidden, "the selected engine has been unhidden");
-    is(engine, Services.search.currentEngine,
-       "the current engine is what was selected in the drop down");
-
-    checkTelemetryRecords(TELEMETRY_RESULT_ENUM.CHANGED_ENGINE);
-  }
-},
-
-{
   desc: "Load another page without clicking any of the buttons.",
   run: function* () {
     yield promiseTabLoadEvent(gBrowser.selectedTab, "about:mozilla");
 
     checkTelemetryRecords(TELEMETRY_RESULT_ENUM.CLOSED_PAGE);
   }
 },
 
--- a/browser/themes/shared/searchReset.css
+++ b/browser/themes/shared/searchReset.css
@@ -5,40 +5,18 @@
 body {
   align-items: center;
 }
 
 .title {
   background-image: url("chrome://browser/skin/icon-search-64.svg");
 }
 
-select {
-  font: inherit;
-  padding-inline-end: 24px;
+#defaultEngine {
   padding-inline-start: 26px;
-  background-image: var(--engine-icon-url),
-                    url("chrome://global/skin/in-content/dropdown.svg#dropdown");
   background-repeat: no-repeat;
-  background-position: 8px center, calc(100% - 4px) center;
+  background-position: 5px center;
   background-size: 16px, 16px;
 }
 
-select:-moz-dir(rtl) {
-  background-position: calc(100% - 8px) center, 4px center;
-}
-
-select:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 var(--in-content-text-color);
+#defaultEngine:-moz-dir(rtl) {
+  background-position: calc(100% - 5px) center;
 }
-
-option {
-  padding: 4px;
-  padding-inline-start: 30px;
-  background-repeat: no-repeat;
-  background-position: 8px center;
-  background-size: 16px;
-  background-color: var(--in-content-page-background);
-}
-
-option:-moz-dir(rtl) {
-  background-position: calc(100% - 8px) center;
-}