Bug 1101122 - Update about:home search styling. r=felipe

This commit is contained in:
Dave Townsend 2014-11-24 08:40:22 -02:00
parent 1512574df6
commit 179e3da560
12 changed files with 142 additions and 66 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 689 B

View File

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