summaryrefslogtreecommitdiffstats
path: root/application/palemoon/base/content/newtab
diff options
context:
space:
mode:
authorwolfbeast <mcwerewolf@gmail.com>2018-06-20 16:27:18 +0200
committerwolfbeast <mcwerewolf@gmail.com>2018-06-20 16:27:18 +0200
commit56ddb90de1000c4ed8e95019805fa93d38b94231 (patch)
treed9110248a2c1c83506108309d528f47d7c07e476 /application/palemoon/base/content/newtab
parent856d0c991c097eff35ed098a1e30992c0f57165a (diff)
downloadUXP-56ddb90de1000c4ed8e95019805fa93d38b94231.tar
UXP-56ddb90de1000c4ed8e95019805fa93d38b94231.tar.gz
UXP-56ddb90de1000c4ed8e95019805fa93d38b94231.tar.lz
UXP-56ddb90de1000c4ed8e95019805fa93d38b94231.tar.xz
UXP-56ddb90de1000c4ed8e95019805fa93d38b94231.zip
Issue #517 Part 1: Fix newtab Search
Diffstat (limited to 'application/palemoon/base/content/newtab')
-rw-r--r--application/palemoon/base/content/newtab/grid.js2
-rw-r--r--application/palemoon/base/content/newtab/newTab.css88
-rw-r--r--application/palemoon/base/content/newtab/newTab.xhtml16
-rw-r--r--application/palemoon/base/content/newtab/page.js7
-rw-r--r--application/palemoon/base/content/newtab/search.js142
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;
+ }
+
+}