mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1101122 - Update about:home search styling. r=felipe
This commit is contained in:
parent
1512574df6
commit
179e3da560
@ -76,6 +76,36 @@ a {
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
#searchIcon {
|
||||
border: 1px solid transparent;
|
||||
-moz-margin-end: 5px;
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
background-image: url("chrome://browser/skin/magnifier.png");
|
||||
background-size: 26px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#searchIcon[active],
|
||||
#searchIcon:hover {
|
||||
background-color: #e9e9e9;
|
||||
border: 1px solid rgb(226, 227, 229);
|
||||
border-radius: 2.5px;
|
||||
}
|
||||
|
||||
html[searchUIConfiguration="oldsearchui"] #searchIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html:not([searchUIConfiguration="oldsearchui"]) #searchText::-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
html:not([searchUIConfiguration="oldsearchui"]) #searchLogoContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#searchText {
|
||||
-moz-box-flex: 1;
|
||||
padding: 6px 8px;
|
||||
@ -368,6 +398,10 @@ body[narrow] #restorePreviousSession::before {
|
||||
background-image: url("chrome://branding/content/about-logo@2x.png");
|
||||
}
|
||||
|
||||
#searchIcon {
|
||||
background-image: url("chrome://browser/skin/magnifier@2x.png");
|
||||
}
|
||||
|
||||
#defaultSnippet1,
|
||||
#defaultSnippet2,
|
||||
#rightsSnippet {
|
||||
|
@ -41,7 +41,8 @@
|
||||
|
||||
<div id="searchContainer">
|
||||
<form name="searchForm" id="searchForm" onsubmit="onSearchSubmit(event)">
|
||||
<div id="searchLogoContainer"><img id="searchEngineLogo"/></div>
|
||||
<div id="searchLogoContainer" hidden="true"><img id="searchEngineLogo"/></div>
|
||||
<button id="searchIcon" type="button" />
|
||||
<input type="text" name="q" value="" id="searchText" maxlength="256"
|
||||
autofocus="autofocus" dir="auto"/>
|
||||
<input id="searchSubmit" type="submit" value="&abouthome.searchEngineButton.label;"/>
|
||||
|
@ -1221,6 +1221,29 @@ toolbarpaletteitem[place="palette"][hidden] {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
#abouthome-search-panel .panel-arrowcontent {
|
||||
-moz-padding-start: 0;
|
||||
-moz-padding-end: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background: rgb(248, 250, 251);
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
.abouthome-search-panel-item {
|
||||
-moz-box-align: center;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
-moz-padding-start: 24px;
|
||||
-moz-padding-end: 24px;
|
||||
}
|
||||
|
||||
.abouthome-search-panel-item > label {
|
||||
-moz-padding-start: 0;
|
||||
-moz-margin-start: 0;
|
||||
color: rgb(130, 132, 133);
|
||||
}
|
||||
|
||||
/* Combined context-menu items */
|
||||
#context-navigation > .menuitem-iconic > .menu-iconic-text,
|
||||
#context-navigation > .menuitem-iconic > .menu-accel-container {
|
||||
|
@ -276,6 +276,14 @@
|
||||
</hbox>
|
||||
</panel>
|
||||
|
||||
<panel id="abouthome-search-panel" orient="vertical" type="arrow" hidden="true"
|
||||
onclick="this.hidePopup()">
|
||||
<hbox id="abouthome-search-panel-manage" class="abouthome-search-panel-item"
|
||||
onclick="openPreferences('paneSearch')">
|
||||
<label>&changeSearchSettings.button;</label>
|
||||
</hbox>
|
||||
</panel>
|
||||
|
||||
<panel id="social-share-panel"
|
||||
class="social-panel"
|
||||
type="arrow"
|
||||
|
@ -269,6 +269,9 @@ let AboutHomeListener = {
|
||||
case "AboutHomeSearchEvent":
|
||||
this.onSearch(aEvent);
|
||||
break;
|
||||
case "AboutHomeSearchPanel":
|
||||
this.onOpenSearchPanel(aEvent);
|
||||
break;
|
||||
case "click":
|
||||
this.onClick(aEvent);
|
||||
break;
|
||||
@ -320,6 +323,10 @@ let AboutHomeListener = {
|
||||
addEventListener("click", this, true);
|
||||
addEventListener("pagehide", this, true);
|
||||
|
||||
if (!Services.prefs.getBoolPref("browser.search.showOneOffButtons")) {
|
||||
doc.documentElement.setAttribute("searchUIConfiguration", "oldsearchui");
|
||||
}
|
||||
|
||||
// XXX bug 738646 - when Marketplace is launched, remove this statement and
|
||||
// the hidden attribute set on the apps button in aboutHome.xhtml
|
||||
if (Services.prefs.getPrefType("browser.aboutHome.apps") == Services.prefs.PREF_BOOL &&
|
||||
@ -328,6 +335,7 @@ let AboutHomeListener = {
|
||||
|
||||
sendAsyncMessage("AboutHome:RequestUpdate");
|
||||
doc.addEventListener("AboutHomeSearchEvent", this, true, true);
|
||||
doc.addEventListener("AboutHomeSearchPanel", this, true, true);
|
||||
},
|
||||
|
||||
onClick: function(aEvent) {
|
||||
@ -378,6 +386,10 @@ let AboutHomeListener = {
|
||||
case "settings":
|
||||
sendAsyncMessage("AboutHome:Settings");
|
||||
break;
|
||||
|
||||
case "searchIcon":
|
||||
sendAsyncMessage("AboutHome:OpenSearchPanel", null, { anchor: originalTarget });
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
@ -397,6 +409,10 @@ let AboutHomeListener = {
|
||||
sendAsyncMessage("AboutHome:Search", { searchData: aEvent.detail });
|
||||
},
|
||||
|
||||
onOpenSearchPanel: function(aEvent) {
|
||||
sendAsyncMessage("AboutHome:OpenSearchPanel");
|
||||
},
|
||||
|
||||
onFocusInput: function () {
|
||||
let searchInput = content.document.getElementById("searchText");
|
||||
if (searchInput) {
|
||||
|
@ -78,25 +78,6 @@ let gTests = [
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
desc: "Check that search engine logo has alt text",
|
||||
setup: function () { },
|
||||
run: function ()
|
||||
{
|
||||
let doc = gBrowser.selectedTab.linkedBrowser.contentDocument;
|
||||
|
||||
let searchEngineLogoElt = doc.getElementById("searchEngineLogo");
|
||||
ok(searchEngineLogoElt, "Found search engine logo");
|
||||
|
||||
let altText = searchEngineLogoElt.alt;
|
||||
ok(typeof altText == "string" && altText.length > 0,
|
||||
"Search engine logo's alt text is a nonempty string");
|
||||
|
||||
isnot(altText, "undefined",
|
||||
"Search engine logo's alt text shouldn't be the string 'undefined'");
|
||||
}
|
||||
},
|
||||
|
||||
// Disabled on Linux for intermittent issues with FHR, see Bug 945667.
|
||||
{
|
||||
desc: "Check that performing a search fires a search event and records to " +
|
||||
@ -252,52 +233,6 @@ let gTests = [
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
desc: "Check that the search UI/ action is updated when the search engine is changed",
|
||||
setup: function() {},
|
||||
run: function()
|
||||
{
|
||||
let currEngine = Services.search.currentEngine;
|
||||
let unusedEngines = [].concat(Services.search.getVisibleEngines()).filter(x => x != currEngine);
|
||||
let searchbar = document.getElementById("searchbar");
|
||||
|
||||
function checkSearchUI(engine) {
|
||||
let doc = gBrowser.selectedTab.linkedBrowser.contentDocument;
|
||||
let searchText = doc.getElementById("searchText");
|
||||
let logoElt = doc.getElementById("searchEngineLogo");
|
||||
let engineName = doc.documentElement.getAttribute("searchEngineName");
|
||||
|
||||
is(engineName, engine.name, "Engine name should've been updated");
|
||||
|
||||
if (!logoElt.parentNode.hidden) {
|
||||
is(logoElt.alt, engineName, "Alt text of logo image should match search engine name")
|
||||
} else {
|
||||
is(searchText.placeholder, engineName, "Placeholder text should match search engine name");
|
||||
}
|
||||
}
|
||||
// Do a sanity check that all attributes are correctly set to begin with
|
||||
checkSearchUI(currEngine);
|
||||
|
||||
let deferred = Promise.defer();
|
||||
promiseBrowserAttributes(gBrowser.selectedTab).then(function() {
|
||||
// Test if the update propagated
|
||||
checkSearchUI(unusedEngines[0]);
|
||||
searchbar.currentEngine = currEngine;
|
||||
deferred.resolve();
|
||||
});
|
||||
|
||||
// The following cleanup function will set currentEngine back to the previous
|
||||
// engine if we fail to do so above.
|
||||
registerCleanupFunction(function() {
|
||||
searchbar.currentEngine = currEngine;
|
||||
});
|
||||
// Set the current search engine to an unused one
|
||||
searchbar.currentEngine = unusedEngines[0];
|
||||
searchbar.select();
|
||||
return deferred.promise;
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
desc: "Check POST search engine support",
|
||||
setup: function() {},
|
||||
@ -492,6 +427,26 @@ let gTests = [
|
||||
is(gBrowser.currentURI.spec, "about:accounts?entrypoint=abouthome",
|
||||
"Entry point should be `abouthome`.");
|
||||
})
|
||||
},
|
||||
{
|
||||
desc: "Clicking the icon should open the popup",
|
||||
setup: function () {},
|
||||
run: Task.async(function* () {
|
||||
let doc = gBrowser.selectedBrowser.contentDocument;
|
||||
let searchIcon = doc.getElementById("searchIcon");
|
||||
let panel = window.document.getElementById("abouthome-search-panel");
|
||||
|
||||
info("Waiting for popup to open");
|
||||
EventUtils.synthesizeMouseAtCenter(searchIcon, {}, gBrowser.selectedBrowser.contentWindow);
|
||||
yield promiseWaitForEvent(panel, "popupshown");
|
||||
ok("Saw popup open");
|
||||
|
||||
let promise = promisePrefsOpen();
|
||||
let item = window.document.getElementById("abouthome-search-panel-manage");
|
||||
EventUtils.synthesizeMouseAtCenter(item, {});
|
||||
|
||||
yield promise;
|
||||
})
|
||||
}
|
||||
|
||||
];
|
||||
@ -667,6 +622,24 @@ function waitForLoad(cb) {
|
||||
}, true);
|
||||
}
|
||||
|
||||
function promiseWaitForEvent(node, type, capturing) {
|
||||
return new Promise((resolve) => {
|
||||
node.addEventListener(type, function listener(event) {
|
||||
node.removeEventListener(type, listener, capturing);
|
||||
resolve(event);
|
||||
}, capturing);
|
||||
});
|
||||
}
|
||||
|
||||
let promisePrefsOpen = Task.async(function*() {
|
||||
info("Waiting for the preferences tab to open...");
|
||||
let event = yield promiseWaitForEvent(gBrowser.tabContainer, "TabOpen", true);
|
||||
let tab = event.target;
|
||||
yield promiseTabLoadEvent(tab);
|
||||
is(tab.linkedBrowser.currentURI.spec, "about:preferences#search", "Should have seen the prefs tab");
|
||||
gBrowser.removeTab(tab);
|
||||
});
|
||||
|
||||
function promiseNewEngine(basename) {
|
||||
info("Waiting for engine to be added: " + basename);
|
||||
let addDeferred = Promise.defer();
|
||||
|
@ -97,6 +97,7 @@ let AboutHome = {
|
||||
"AboutHome:Settings",
|
||||
"AboutHome:RequestUpdate",
|
||||
"AboutHome:Search",
|
||||
"AboutHome:OpenSearchPanel",
|
||||
],
|
||||
|
||||
init: function() {
|
||||
@ -203,6 +204,18 @@ let AboutHome = {
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case "AboutHome:OpenSearchPanel":
|
||||
let panel = window.document.getElementById("abouthome-search-panel");
|
||||
let anchor = aMessage.objects.anchor;
|
||||
panel.hidden = false;
|
||||
panel.openPopup(anchor);
|
||||
anchor.setAttribute("active", "true");
|
||||
panel.addEventListener("popuphidden", function onHidden() {
|
||||
panel.removeEventListener("popuphidden", onHidden);
|
||||
anchor.removeAttribute("active");
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -40,6 +40,8 @@ browser.jar:
|
||||
skin/classic/browser/identity-icons-https-mixed-active.png
|
||||
skin/classic/browser/identity-icons-https-mixed-display.png
|
||||
skin/classic/browser/Info.png
|
||||
skin/classic/browser/magnifier.png (../shared/magnifier.png)
|
||||
skin/classic/browser/magnifier@2x.png (../shared/magnifier@2x.png)
|
||||
skin/classic/browser/mask.png (../shared/mask.png)
|
||||
skin/classic/browser/mask@2x.png (../shared/mask@2x.png)
|
||||
skin/classic/browser/menuPanel.png
|
||||
|
@ -58,6 +58,8 @@ browser.jar:
|
||||
skin/classic/browser/notification-16@2x.png
|
||||
skin/classic/browser/notification-64.png
|
||||
skin/classic/browser/notification-64@2x.png
|
||||
skin/classic/browser/magnifier.png (../shared/magnifier.png)
|
||||
skin/classic/browser/magnifier@2x.png (../shared/magnifier@2x.png)
|
||||
skin/classic/browser/mask.png (../shared/mask.png)
|
||||
skin/classic/browser/mask@2x.png (../shared/mask@2x.png)
|
||||
skin/classic/browser/menuPanel.png
|
||||
|
BIN
browser/themes/shared/magnifier.png
Normal file
BIN
browser/themes/shared/magnifier.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 371 B |
BIN
browser/themes/shared/magnifier@2x.png
Normal file
BIN
browser/themes/shared/magnifier@2x.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 689 B |
@ -45,6 +45,8 @@ browser.jar:
|
||||
skin/classic/browser/keyhole-forward-mask.svg
|
||||
skin/classic/browser/KUI-background.png
|
||||
skin/classic/browser/livemark-folder.png
|
||||
skin/classic/browser/magnifier.png (../shared/magnifier.png)
|
||||
skin/classic/browser/magnifier@2x.png (../shared/magnifier@2x.png)
|
||||
skin/classic/browser/mask.png (../shared/mask.png)
|
||||
skin/classic/browser/mask@2x.png (../shared/mask@2x.png)
|
||||
skin/classic/browser/menu-back.png
|
||||
@ -483,6 +485,8 @@ browser.jar:
|
||||
skin/classic/aero/browser/keyhole-forward-mask.svg
|
||||
skin/classic/aero/browser/KUI-background.png
|
||||
skin/classic/aero/browser/livemark-folder.png (livemark-folder-aero.png)
|
||||
skin/classic/aero/browser/magnifier.png (../shared/magnifier.png)
|
||||
skin/classic/aero/browser/magnifier@2x.png (../shared/magnifier@2x.png)
|
||||
skin/classic/aero/browser/mask.png (../shared/mask.png)
|
||||
skin/classic/aero/browser/mask@2x.png (../shared/mask@2x.png)
|
||||
skin/classic/aero/browser/menu-back.png (menu-back-aero.png)
|
||||
|
Loading…
Reference in New Issue
Block a user