From 56ddb90de1000c4ed8e95019805fa93d38b94231 Mon Sep 17 00:00:00 2001 From: wolfbeast Date: Wed, 20 Jun 2018 16:27:18 +0200 Subject: Issue #517 Part 1: Fix newtab Search --- application/palemoon/base/content/browser.js | 29 +++++ application/palemoon/base/content/newtab/grid.js | 2 +- .../palemoon/base/content/newtab/newTab.css | 88 ++++++------- .../palemoon/base/content/newtab/newTab.xhtml | 16 +-- application/palemoon/base/content/newtab/page.js | 7 +- application/palemoon/base/content/newtab/search.js | 142 ++++++++++++++++++++- .../locales/en-US/chrome/browser/newTab.dtd | 1 + 7 files changed, 217 insertions(+), 68 deletions(-) (limited to 'application') diff --git a/application/palemoon/base/content/browser.js b/application/palemoon/base/content/browser.js index 6df6488b1..386bd418b 100644 --- a/application/palemoon/base/content/browser.js +++ b/application/palemoon/base/content/browser.js @@ -2400,6 +2400,9 @@ function PageProxyClickHandler(aEvent) * to the DOM for unprivileged pages. */ function BrowserOnAboutPageLoad(doc) { + + /* === about:home === */ + if (doc.documentURI.toLowerCase() == "about:home") { let ss = Components.classes["@mozilla.org/browser/sessionstore;1"]. getService(Components.interfaces.nsISessionStore); @@ -2438,6 +2441,32 @@ function BrowserOnAboutPageLoad(doc) { Services.obs.removeObserver(updateSearchEngine, "browser-search-engine-modified"); }, false); } + + /* === about:newtab === */ + + if (doc.documentURI.toLowerCase() == "about:newtab") { + + let docElt = doc.documentElement; + + function updateSearchEngine() { + let engine = AboutHomeUtils.defaultSearchEngine; + docElt.setAttribute("searchEngineName", engine.name); + docElt.setAttribute("searchEnginePostData", engine.postDataString || ""); + docElt.setAttribute("searchEngineURL", engine.searchURL); + } + updateSearchEngine(); + + // Listen for the event that's triggered when the user changes search engine. + // At this point we simply reload about:newtab to reflect the change. + Services.obs.addObserver(updateSearchEngine, "browser-search-engine-modified", false); + + // Remove the observer when the page is reloaded or closed. + doc.defaultView.addEventListener("pagehide", function removeObserver() { + doc.defaultView.removeEventListener("pagehide", removeObserver); + Services.obs.removeObserver(updateSearchEngine, "browser-search-engine-modified"); + }, false); + } + } /** 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 @@ -
-
-
- - -
+
+
+
+ + +
@@ -84,6 +83,5 @@ value="⚙" title="&newtab.customize.title;"/> -