Issue #517 Part 1: Fix newtab Search

5 files changed, 187 insertions, 68 deletions

diff --git a/application/palemoon/base/content/newtab/grid.js b/application/palemoon/base/content/newtab/grid.js
index b6f98fa17..88c2666fa 100644
--- a/application/palemoon/base/content/newtab/grid.js
+++ b/application/palemoon/base/content/newtab/grid.js
@@ -230,7 +230,7 @@ var gGrid = {
         parseFloat(style.marginLeft) + parseFloat(style.marginRight);
     }
 
-    let searchContainer = document.querySelector("#newtab-search-container");
+    let searchContainer = document.querySelector("#searchContainer");
     // Save search-container margin height
     if (this._searchContainerMargin === undefined) {
       let style = getComputedStyle(searchContainer);
diff --git a/application/palemoon/base/content/newtab/newTab.css b/application/palemoon/base/content/newtab/newTab.css
index 658ad2ed3..37864f21e 100644
--- a/application/palemoon/base/content/newtab/newTab.css
+++ b/application/palemoon/base/content/newtab/newTab.css
@@ -326,24 +326,24 @@ body.compact .newtab-cell {
 }
 
 /* SEARCH */
-#newtab-search-container {
+#searchContainer {
   display: -moz-box;
   position: relative;
   -moz-box-pack: center;
   margin: 40px 0 15px;
 }
 
-body.compact #newtab-search-container {
+body.compact #searchContainer {
   margin-top: 0;
   margin-bottom: 80px;
 }
 
-#newtab-search-container[page-disabled] {
+#searchContainer[page-disabled] {
   opacity: 0;
   pointer-events: none;
 }
 
-#newtab-search-form {
+#searchForm {
   display: -moz-box;
   position: relative;
   height: 36px;
@@ -351,21 +351,20 @@ body.compact #newtab-search-container {
   max-width: 600px; /* 2 * (290 cell width + 10 cell margin) */
 }
 
-#newtab-search-icon {
+#searchEngineLogo {
   border: 1px transparent;
-  padding: 0;
+  padding: 2px 4px;
   margin: 0;
-  width: 36px;
-  height: 36px;
-  background: url("chrome://browser/skin/search-indicator-magnifying-glass.svg") center center no-repeat;
+  width: 32px;
+  height: 32px;
   position: absolute;
 }
 
-#newtab-search-text {
+#searchText {
   -moz-box-flex: 1;
   padding-top: 6px;
   padding-bottom: 6px;
-  padding-inline-start: 34px;
+  padding-inline-start: 42px;
   padding-inline-end: 8px;
   background: hsla(0,0%,100%,.9) padding-box;
   border: 1px solid;
@@ -379,31 +378,31 @@ body.compact #newtab-search-container {
   unicode-bidi: plaintext;
 }
 
-#newtab-search-text:dir(rtl) {
+#searchText:dir(rtl) {
   border-radius: 0 2px 2px 0;
 }
 
-#newtab-search-text[aria-expanded="true"] {
+#searchText[aria-expanded="true"] {
   border-radius: 2px 0 0 0;
 }
 
-#newtab-search-text[aria-expanded="true"]:dir(rtl) {
+#searchText[aria-expanded="true"]:dir(rtl) {
   border-radius: 0 2px 0 0;
 }
 
-#newtab-search-text[keepfocus],
-#newtab-search-text:focus,
-#newtab-search-text[autofocus] {
-  border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6);
+#searchText[keepfocus],
+#searchText:focus,
+#searchText[autofocus] {
+  border-color: hsla(216,100%,60%,.6) hsla(216,76%,52%,.6) hsla(214,100%,40%,.6);
 }
 
-#newtab-search-submit {
+#searchSubmit {
   margin-inline-start: -1px;
-  color: transparent;
-  background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") center center no-repeat, linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box;
   padding: 0;
   border: 1px solid;
-  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
+  background color: #e0e0e0;
+  color: black;
+  border-color: hsla(220,54%,20%,.15) hsla(220,54%,20%,.17) hsla(220,54%,20%,.2);
   border-radius: 0 2px 2px 0;
   border-inline-start: 1px solid transparent;
   box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
@@ -414,47 +413,42 @@ body.compact #newtab-search-container {
   width: 50px;
 }
 
-#newtab-search-submit:dir(rtl) {
+#searchSubmit:dir(rtl) {
   border-radius: 2px 0 0 2px;
-  background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl"), linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1));
 }
 
-#newtab-search-text:focus + #newtab-search-submit,
-#newtab-search-text + #newtab-search-submit:hover,
-#newtab-search-text[autofocus] + #newtab-search-submit {
-  border-color: #59b5fc #45a3e7 #3294d5;
+#searchSubmit:hover {
+  background-color: hsl(220,54%,20%);
+  color: white;
 }
 
-#newtab-search-text:focus + #newtab-search-submit,
-#newtab-search-text[keepfocus] + #newtab-search-submit,
-#newtab-search-text[autofocus] + #newtab-search-submit {
-  background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted"), linear-gradient(#4cb1ff, #1793e5);
+#searchText:focus + #searchSubmit,
+#searchText + #searchSubmit:hover,
+#searchText[autofocus] + #searchSubmit {
+  border-color: #5985fc #4573e7 #3264d5;
+}
+
+#searchText:focus + #searchSubmit,
+#searchText[keepfocus] + #searchSubmit,
+#searchText[autofocus] + #searchSubmit {
   box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
               0 0 0 1px hsla(0,0%,100%,.1) inset,
-              0 1px 0 hsla(210,54%,20%,.03);
+              0 1px 0 hsla(220,54%,20%,.03);
 }
 
-#newtab-search-text + #newtab-search-submit:hover {
-  background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted"), linear-gradient(#4cb1ff, #1793e5);
+#searchText + #searchSubmit:hover {
   box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
               0 0 0 1px hsla(0,0%,100%,.1) inset,
-              0 1px 0 hsla(210,54%,20%,.03),
-              0 0 4px hsla(206,100%,20%,.2);
+              0 1px 0 hsla(220,54%,20%,.03),
+              0 0 4px hsla(216,100%,20%,.2);
 }
 
-#newtab-search-text + #newtab-search-submit:hover:active {
-  box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset,
-              0 0 1px hsla(211,79%,6%,.2) inset;
+#searchText + #searchSubmit:hover:active {
+  box-shadow: 0 1px 1px hsla(221,79%,6%,.1) inset,
+              0 0 1px hsla(221,79%,6%,.2) inset;
   transition-duration: 0ms;
 }
 
-#newtab-search-text:focus + #newtab-search-submit:dir(rtl),
-#newtab-search-text[keepfocus] + #newtab-search-submit:dir(rtl),
-#newtab-search-text[autofocus] + #newtab-search-submit:dir(rtl),
-#newtab-search-text + #newtab-search-submit:dir(rtl):hover {
-  background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl-inverted"), linear-gradient(#4cb1ff, #1793e5);
-}
-
 /* CUSTOMIZE */
 #newtab-customize-overlay {
   opacity: 0;
diff --git a/application/palemoon/base/content/newtab/newTab.xhtml b/application/palemoon/base/content/newtab/newTab.xhtml
index eef51b4b2..3017c02cb 100644
--- a/application/palemoon/base/content/newtab/newTab.xhtml
+++ b/application/palemoon/base/content/newtab/newTab.xhtml
@@ -60,14 +60,13 @@
       </div>
     </div>
 
-    <div id="newtab-search-container">
-      <div id="newtab-search-form">
-        <div id="newtab-search-icon"/>
-        <input type="text" name="q" value="" id="newtab-search-text"
-             aria-label="&contentSearchInput.label;" maxlength="256"/>
-        <input id="newtab-search-submit" type="button"
-             title="&contentSearchSubmit.tooltip;"/>
-      </div>
+    <div id="searchContainer">
+      <form name="searchForm" id="searchForm" onsubmit="onSearchSubmit(event)">
+        <div id="searchLogoContainer"><img id="searchEngineLogo"/></div>
+        <input type="text" name="q" value="" id="searchText" maxlength="256"
+               autofocus="autofocus"/>
+        <input id="searchSubmit" type="submit" value="&newtab.searchEngineButton.label;"/>
+      </form>
     </div>
 
     <div id="newtab-horizontal-margin">
@@ -84,6 +83,5 @@
          value="&#x2699;"
          title="&newtab.customize.title;"/>
 </body>
-<script type="text/javascript;version=1.8" src="chrome://browser/content/contentSearchUI.js"/>
 <script type="text/javascript;version=1.8" src="chrome://browser/content/newtab/newTab.js"/>
 </html>
diff --git a/application/palemoon/base/content/newtab/page.js b/application/palemoon/base/content/newtab/page.js
index 66a92dc5d..4b7bc1b1c 100644
--- a/application/palemoon/base/content/newtab/page.js
+++ b/application/palemoon/base/content/newtab/page.js
@@ -116,16 +116,13 @@ var gPage = {
 
     // Set submit button label for when CSS background are disabled (e.g.
     // high contrast mode).
-    document.getElementById("newtab-search-submit").value =
+    document.getElementById("searchSubmit").value =
       document.body.getAttribute("dir") == "ltr" ? "\u25B6" : "\u25C0";
 
     if (Services.prefs.getBoolPref("browser.newtabpage.compact")) {
       document.body.classList.add("compact");
     }
 
-    // Initialize search.
-    gSearch.init();
-
     if (document.hidden) {
       addEventListener("visibilitychange", this);
     } else {
@@ -151,7 +148,7 @@ var gPage = {
    */
   _updateAttributes: function Page_updateAttributes(aValue) {
     // Set the nodes' states.
-    let nodeSelector = "#newtab-grid, #newtab-search-container";
+    let nodeSelector = "#newtab-grid, #searchContainer";
     for (let node of document.querySelectorAll(nodeSelector)) {
       if (aValue)
         node.removeAttribute("page-disabled");
diff --git a/application/palemoon/base/content/newtab/search.js b/application/palemoon/base/content/newtab/search.js
index c5454a993..cafc772bc 100644
--- a/application/palemoon/base/content/newtab/search.js
+++ b/application/palemoon/base/content/newtab/search.js
@@ -4,10 +4,140 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 #endif
 
-var gSearch = {
-  init: function () {
-    document.getElementById("newtab-search-submit")
-            .addEventListener("click", e => this._contentSearchController.search(e));
-    let textbox = document.getElementById("newtab-search-text");
-  },
+const SEARCH_ENGINES = {
+  "DuckDuckGo": {
+  	 image: "data:image/png;base64," +
+            "iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAACT1BMVEXvISn/////9/fvUlr3ra3/" +
+            "zs7/7+/va2v/5+f/xsbvMTn/tbX/3t7/vb3vOUL3WmPvQkr/zgDvKTHvSlL3hIT3paX/1tbnISn3" +
+            "c3v3e3v3a3P3jIz3nJz/tb33c3PvKSn3lJT39/cAc73vSkr3e4Tv7+/3Yxj3pa3/tQj3jJT3nKX3" +
+            "Y2P/xs73hIzvQkL/vQjvQiHn5+f3hBD/ztbvMTH/vcb/3ucIc733lJz/pQilzufe7/fvMSHOzs73" +
+            "//cQrUpKvVprxmP3Y2vvShiUzmvWlJRzzmMYtUrvOTnn7/davVrWra3v9//nY2PvISGUxudztd7e" +
+            "3t7/76XvKSHea2v/xgDnOUK93vfW5/f/1t73Uhj/52ut3q2l3rXO784pjMZrrdb/rQjera3/5+/e" +
+            "paWMxufO79aEazkYrUr/nAj3jBD3axj3lBD///fehIRKpd7/1hCEYzk5vVL3//8ptVLW77UxtVLn" +
+            "SlLW1tZCvVp7vef/1gj/3invSkL//+fWtbXvpaX/3kr/97XvnJznWmMxjM5zvefOxsbWnKXWjIzG" +
+            "3u/ea3Pn997O5/fnQkqExuf3Whit1u/nUlrnxs7v5+d7zmuU1pT3exDOSjFjrVL/987/pUoQe8b/" +
+            "75T/3jFKxnO158bWKSl7zoRSxmtajEK1e0pzxlqcUjH/1iHOMSnOvb33cxDWnJx7td6EzmP/74xz" +
+            "azlrcznec3Pe771jxlpzczne78YpvVqEvWPn99YxvWOtSjHee3vG787OOTE5lEK1QjHv9+drzmve" +
+            "tbXO772q+r8wAAAFbUlEQVR4Xo2X84PzTBDHN3Zqu2fbemzbNl7atm3btvGHvTNJ2myuyd3NL2mT" +
+            "zmdnvjM76RImyGQlH5dCHBeSmscNmQkyfwBrZMLEY2aRF5cMSDYPEx+LZpUlAYRQbVEpnuc1je/M" +
+            "SbVwYoVFAbpE0IaLmiwqiVymmE3H84YuGs2mheCEhQH5qPUrje2ONxHKVIkXR2x2MxsMkDnLvftk" +
+            "2fSTQNCzSAgngwCCipkXxHiU+BsnCDFE8f6AQgnwaTGhkmDLymW8jPsBeIsth8iCpha618El1wgo" +
+            "4FOhWyWLWY+O8pbnAwTI29S1ElncJBmF4L0AGeJSdR4dUpt5w+DL0nAgoUuGGKKCBxDCOxrykaDb" +
+            "+yFQjhUylLlXpAB5jGnIqV6uvvWUcAAhLmDBXIAMrkXRdHQ+cerUiWefq1hRrAgg8LikUgdkQUAx" +
+            "6+2Ze0WLEO/1BQzrHCFNrAPAeDSD4q/Ln6R3p68MSYzDAUiwIEutJM0bHXE/gpEhJMxaAB3T6aT8" +
+            "mfkm+QBiMlwKFqAHvrHu9tvTOLrEdX4hFAkJWQB42qbVyam75ruv3zvF+wBCKJ0MAAV6SAy5+raA" +
+            "y+lb9tYBUw9sffKRJh+CDl2SAEAPquaC76swU1c+zlxbA9if/EIY78AcCBODDKjnVzDM0+sb57zq" +
+            "N14gdpbg4nraBaxm3NWpIDKNgJIIDTxEAKMyVM9/VrFcpijK52PbNhmk0RQORCA8dhGhIkDA+qPV" +
+            "Y/U8No2NHZsUfQCdzYTECSiRSRJKgxYAnK6+tnVrPYL7q2P7GNNnT0L3SQSS61AowK4BAExWq9XJ" +
+            "OmDT5D4GtUab7p92W1aD6AFBOjUKcONNKMG2o9vmScmhd+v5SCTS91StDLBwmHR5q0iiM4yv3X5g" +
+            "sD1i24tUHc0GQOrOihdw+ZV7drx+8I1IzfpaCQ1oSIGsbqEBdxy8KkLb8dYt7m7AFBpEJI8OUIAd" +
+            "Hve+wX509IqYgzLqxKMi5X+r6737wgHfMrZBKGwpQMWP0PN8/8qLn15cSRosEQeI3coxGrzRVfE2" +
+            "BEyTAMNpmbA3k2erPOyq+CUCPGvv3OmGykYBQhiYFbynDLu2uyW826qb7bSlv/VCe2R3vQqhIYQQ" +
+            "nLmSGKUAT1AqXn7V6p72iUsTThsNuhKUAeKMNFaiW2nG08H90IF1m6DywVdsHgA4bPgRGgAqUgBr" +
+            "DwxOtPcdv9RK6yklnaGKOXBMmN7RVCtJJMiUdG2s78dv9HbY7KrI9AQBOHwjaxaA6cKhRLXCHkpF" +
+            "PrAJYBz1su7LtSBQIjzozgI5AJDWsQ7gTJxETTHuEh5yW8kR5+1fvQBT5PDdWgPokE6GSuK3Aaby" +
+            "2KwNyGFIZ8/NfexVMAGXEfe8MA5QTVdrgGe2M9evev6FMwiAYr308nVzcx/SgHwSlswyLgDLHU0K" +
+            "tX5UZwCwZsM1b7516J1333v/g2UAuJoCNMsmZkEDZBXujCoOIfVJxQKsvXnDshvWfrEcAV9RAoqY" +
+            "rfdvHjY06R3tVmtjzQYsQ8ByC/C1O0dEzqkAGqELbiZ1W/RvBr51Ad9ZgO8dQCkh4/q5xvMC6hot" +
+            "sBl7rP1QT+HHQz9RGoSHhkyMgqEBdNPFWSWMY+1nBPxy+MjvZ2aZxB9n/zz3FwKiOTZfotb3AhhF" +
+            "xSUUNmGSjX+vWvPPYacVWJOkUilUT05ymEVb0JFHj9l/AVn+35b/jsx6YzNz8mja+iAEH7rYDntY" +
+            "Gaz3dizW080KWaeICx77kiG7lTKG6EEoPb0Wu0lZ9OA5whFH8GxHQjOMQls5HSs5t/glHX2FYtT/" +
+            "mGAs/fCtFU0vQJUSQYfvIBvVyukuLhbjuood/H6WCbD/AQSFvIO3JDxgAAAAAElFTkSuQmCC"
+  }
 };
+
+// This global tracks if the page has been set up before, to prevent double inits
+var gInitialized = false;
+var gObserver = new MutationObserver(function (mutations) {
+  for (let mutation of mutations) {
+    if (mutation.attributeName == "searchEngineURL") {
+      setupSearchEngine();
+      if (!gInitialized) {
+        gInitialized = true;
+      }
+      return;
+    }
+  }
+});
+
+window.addEventListener("pageshow", function () {
+  window.gObserver.observe(document.documentElement, { attributes: true });
+});
+
+window.addEventListener("pagehide", function() {
+  window.gObserver.disconnect();
+});
+
+function onSearchSubmit(aEvent) {
+  let searchTerms = document.getElementById("searchText").value;
+  let searchURL = document.documentElement.getAttribute("searchEngineURL");
+
+  if (searchURL && searchTerms.length > 0) {
+    const SEARCH_TOKEN = "_searchTerms_";
+    let searchPostData = document.documentElement.getAttribute("searchEnginePostData");
+    if (searchPostData) {
+      // Check if a post form already exists. If so, remove it.
+      const POST_FORM_NAME = "searchFormPost";
+      let form = document.forms[POST_FORM_NAME];
+      if (form) {
+        form.parentNode.removeChild(form);
+      }
+
+      // Create a new post form.
+      form = document.body.appendChild(document.createElement("form"));
+      form.setAttribute("name", POST_FORM_NAME);
+      // Set the URL to submit the form to.
+      form.setAttribute("action", searchURL.replace(SEARCH_TOKEN, searchTerms));
+      form.setAttribute("method", "post");
+
+      // Create new <input type=hidden> elements for search param.
+      searchPostData = searchPostData.split("&");
+      for (let postVar of searchPostData) {
+        let [name, value] = postVar.split("=");
+        if (value == SEARCH_TOKEN) {
+          value = searchTerms;
+        }
+        let input = document.createElement("input");
+        input.setAttribute("type", "hidden");
+        input.setAttribute("name", name);
+        input.setAttribute("value", value);
+        form.appendChild(input);
+      }
+      // Submit the form.
+      form.submit();
+    } else {
+      searchURL = searchURL.replace(SEARCH_TOKEN, encodeURIComponent(searchTerms));
+      window.location.href = searchURL;
+    }
+  }
+
+  aEvent.preventDefault();
+}
+
+
+function setupSearchEngine() {
+  // The "autofocus" attribute doesn't focus the form element
+  // immediately when the element is first drawn, so the
+  // attribute is also used for styling when the page first loads.
+  let searchText = document.getElementById("searchText");
+  searchText.addEventListener("blur", function searchText_onBlur() {
+    searchText.removeEventListener("blur", searchText_onBlur);
+    searchText.removeAttribute("autofocus");
+  });
+ 
+  let searchEngineName = document.documentElement.getAttribute("searchEngineName");
+  let searchEngineInfo = SEARCH_ENGINES[searchEngineName];
+  let logoElt = document.getElementById("searchEngineLogo");
+
+  // Add search engine logo.
+  if (searchEngineInfo && searchEngineInfo.image) {
+    logoElt.parentNode.hidden = false;
+    logoElt.src = searchEngineInfo.image;
+    logoElt.alt = searchEngineName;
+    searchText.placeholder = "";
+  } else {
+    logoElt.parentNode.hidden = true;
+    searchText.placeholder = searchEngineName;
+  }
+
+}