diff options
Diffstat (limited to 'application')
7 files changed, 217 insertions, 68 deletions
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 @@ </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="⚙" 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; + } + +} diff --git a/application/palemoon/locales/en-US/chrome/browser/newTab.dtd b/application/palemoon/locales/en-US/chrome/browser/newTab.dtd index bea0ef937..3487aa2fc 100644 --- a/application/palemoon/locales/en-US/chrome/browser/newTab.dtd +++ b/application/palemoon/locales/en-US/chrome/browser/newTab.dtd @@ -16,6 +16,7 @@ <!ENTITY newtab.undo.undoButton "Undo."> <!ENTITY newtab.undo.restoreButton "Restore All."> <!ENTITY newtab.undo.closeTooltip "Hide"> +<!ENTITY newtab.searchEngineButton.label "Search"> <!-- LOCALIZATION NOTE (contentSearchInput.label): This is set as the aria-label attribute for the search input box in the |