Issue #517 Part 1: Fix newtab Search

This commit is contained in:
wolfbeast 2018-06-20 16:27:18 +02:00 committed by Roy Tam
commit 1f2fcc868f
7 changed files with 217 additions and 68 deletions

View file

@ -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);
}
}
/**

View file

@ -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);

View file

@ -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;

View file

@ -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>

View file

@ -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");

View file

@ -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;
}
}

View file

@ -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