mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-12-01 17:23:59 +00:00
Bug 1037091 - Add gear button with doorhanger configuration of newtab page [r=adw]
Add new newtab control file for the customize functionality. Reuse existing panel styling of the search engine panel. --HG-- extra : rebase_source : 77e84fad6997504040831872d80069d024b1d570
This commit is contained in:
Ed Lee
parent
f1e86c1b55
commit
a1ba17e074
62
browser/base/content/newtab/customize.js
Normal file
62
browser/base/content/newtab/customize.js
Normal file
@ -0,0 +1,62 @@
|
||||
#ifdef 0
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
#endif
|
||||
|
||||
let gCustomize = {
|
||||
_nodeIDSuffixes: [
|
||||
"blank",
|
||||
"button",
|
||||
"classic",
|
||||
"enhanced",
|
||||
"panel",
|
||||
],
|
||||
|
||||
_nodes: {},
|
||||
|
||||
init: function() {
|
||||
for (let idSuffix of this._nodeIDSuffixes) {
|
||||
this._nodes[idSuffix] = document.getElementById("newtab-customize-" + idSuffix);
|
||||
}
|
||||
|
||||
this._nodes.button.addEventListener("click", e => this.showPanel());
|
||||
this._nodes.blank.addEventListener("click", e => {
|
||||
gAllPages.enabled = false;
|
||||
});
|
||||
this._nodes.classic.addEventListener("click", e => {
|
||||
gAllPages.enabled = true;
|
||||
gAllPages.enhanced = false;
|
||||
});
|
||||
this._nodes.enhanced.addEventListener("click", e => {
|
||||
gAllPages.enabled = true;
|
||||
gAllPages.enhanced = true;
|
||||
});
|
||||
|
||||
this.updateSelected();
|
||||
},
|
||||
|
||||
showPanel: function() {
|
||||
let {button, panel} = this._nodes;
|
||||
panel.openPopup(button);
|
||||
button.setAttribute("active", true);
|
||||
panel.addEventListener("popuphidden", function onHidden() {
|
||||
panel.removeEventListener("popuphidden", onHidden);
|
||||
button.removeAttribute("active");
|
||||
});
|
||||
},
|
||||
|
||||
updateSelected: function() {
|
||||
let {enabled, enhanced} = gAllPages;
|
||||
let selected = enabled ? enhanced ? "enhanced" : "classic" : "blank";
|
||||
["enhanced", "classic", "blank"].forEach(id => {
|
||||
let node = this._nodes[id];
|
||||
if (id == selected) {
|
||||
node.setAttribute("selected", true);
|
||||
}
|
||||
else {
|
||||
node.removeAttribute("selected");
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
@ -38,15 +38,15 @@ input[type=button] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* TOGGLE */
|
||||
#newtab-toggle {
|
||||
/* CUSTOMIZE */
|
||||
#newtab-customize-button {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
#newtab-toggle:-moz-locale-dir(rtl) {
|
||||
left: 12px;
|
||||
#newtab-customize-button:-moz-locale-dir(rtl) {
|
||||
left: 6px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
@ -351,6 +351,7 @@ input[type=button] {
|
||||
transition-duration: 0ms;
|
||||
}
|
||||
|
||||
#newtab-customize-panel .panel-arrowcontent,
|
||||
#newtab-search-panel .panel-arrowcontent {
|
||||
-moz-padding-start: 0;
|
||||
-moz-padding-end: 0;
|
||||
@ -359,6 +360,7 @@ input[type=button] {
|
||||
background: rgb(248, 250, 251);
|
||||
}
|
||||
|
||||
.newtab-customize-panel-item,
|
||||
.newtab-search-panel-engine {
|
||||
-moz-box-align: center;
|
||||
padding-top: 4px;
|
||||
@ -367,6 +369,7 @@ input[type=button] {
|
||||
-moz-padding-end: 24px;
|
||||
}
|
||||
|
||||
.newtab-customize-panel-item:not(:last-child),
|
||||
.newtab-search-panel-engine:not(:last-child) {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
@ -378,12 +381,14 @@ input[type=button] {
|
||||
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
|
||||
}
|
||||
|
||||
.newtab-customize-panel-item > label,
|
||||
.newtab-search-panel-engine > label {
|
||||
-moz-padding-start: 0;
|
||||
-moz-margin-start: 0;
|
||||
color: rgb(130, 132, 133);
|
||||
}
|
||||
|
||||
.newtab-customize-panel-item[selected],
|
||||
.newtab-search-panel-engine[selected] {
|
||||
background: url("chrome://global/skin/menu/shared-menu-check.png") center left 4px no-repeat transparent;
|
||||
}
|
||||
|
||||
@ -57,6 +57,7 @@ const XUL_NAMESPACE = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only
|
||||
#include updater.js
|
||||
#include undo.js
|
||||
#include search.js
|
||||
#include customize.js
|
||||
|
||||
// Everything is loaded. Initialize the New Tab Page.
|
||||
gPage.init();
|
||||
|
||||
@ -34,6 +34,19 @@
|
||||
</xul:hbox>
|
||||
</xul:panel>
|
||||
|
||||
<xul:panel id="newtab-customize-panel" orient="vertical" type="arrow"
|
||||
noautohide="true">
|
||||
<xul:hbox id="newtab-customize-enhanced" class="newtab-customize-panel-item">
|
||||
<xul:label>&newtab.customize.enhanced;</xul:label>
|
||||
</xul:hbox>
|
||||
<xul:hbox id="newtab-customize-classic" class="newtab-customize-panel-item">
|
||||
<xul:label>&newtab.customize.classic;</xul:label>
|
||||
</xul:hbox>
|
||||
<xul:hbox id="newtab-customize-blank" class="newtab-customize-panel-item">
|
||||
<xul:label>&newtab.customize.blank;</xul:label>
|
||||
</xul:hbox>
|
||||
</xul:panel>
|
||||
|
||||
<div id="newtab-scrollbox">
|
||||
|
||||
<div id="newtab-vertical-margin">
|
||||
@ -78,7 +91,8 @@
|
||||
<div id="newtab-margin-bottom"/>
|
||||
|
||||
</div>
|
||||
<input id="newtab-toggle" type="button"/>
|
||||
|
||||
<input id="newtab-customize-button" type="button" title="&newtab.customize.title;"/>
|
||||
</div>
|
||||
|
||||
<xul:script type="text/javascript;version=1.8"
|
||||
|
||||
@ -41,6 +41,9 @@ let gPage = {
|
||||
this._init();
|
||||
|
||||
this._updateAttributes(enabled);
|
||||
|
||||
// Initialize customize controls.
|
||||
gCustomize.init();
|
||||
},
|
||||
|
||||
/**
|
||||
@ -48,6 +51,8 @@ let gPage = {
|
||||
*/
|
||||
observe: function Page_observe(aSubject, aTopic, aData) {
|
||||
if (aTopic == "nsPref:changed") {
|
||||
gCustomize.updateSelected();
|
||||
|
||||
let enabled = gAllPages.enabled;
|
||||
this._updateAttributes(enabled);
|
||||
|
||||
@ -137,7 +142,7 @@ let gPage = {
|
||||
*/
|
||||
_updateAttributes: function Page_updateAttributes(aValue) {
|
||||
// Set the nodes' states.
|
||||
let nodeSelector = "#newtab-scrollbox, #newtab-toggle, #newtab-grid, #newtab-search-container";
|
||||
let nodeSelector = "#newtab-scrollbox, #newtab-grid, #newtab-search-container";
|
||||
for (let node of document.querySelectorAll(nodeSelector)) {
|
||||
if (aValue)
|
||||
node.removeAttribute("page-disabled");
|
||||
@ -153,10 +158,6 @@ let gPage = {
|
||||
else
|
||||
input.setAttribute("tabindex", "-1");
|
||||
}
|
||||
|
||||
// Update the toggle button's title.
|
||||
let toggle = document.getElementById("newtab-toggle");
|
||||
toggle.setAttribute("title", newTabString(aValue ? "hide" : "show"));
|
||||
},
|
||||
|
||||
/**
|
||||
@ -169,13 +170,6 @@ let gPage = {
|
||||
break;
|
||||
case "click":
|
||||
let {button, target} = aEvent;
|
||||
if (target.id == "newtab-toggle") {
|
||||
if (button == 0) {
|
||||
gAllPages.enabled = !gAllPages.enabled;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Go up ancestors until we find a Site or not
|
||||
while (target) {
|
||||
if (target.hasOwnProperty("_newtabSite")) {
|
||||
|
||||
@ -4,6 +4,10 @@
|
||||
|
||||
<!-- These strings are used in the about:newtab page -->
|
||||
<!ENTITY newtab.pageTitle "New Tab">
|
||||
<!ENTITY newtab.customize.title "Customize your New Tab page">
|
||||
<!ENTITY newtab.customize.enhanced "Enhanced">
|
||||
<!ENTITY newtab.customize.classic "Classic">
|
||||
<!ENTITY newtab.customize.blank "Blank">
|
||||
<!ENTITY newtab.undo.removedLabel "Thumbnail removed.">
|
||||
<!ENTITY newtab.undo.undoButton "Undo.">
|
||||
<!ENTITY newtab.undo.restoreButton "Restore All.">
|
||||
|
||||
@ -5,6 +5,4 @@
|
||||
newtab.pin=Pin this site at its current position
|
||||
newtab.unpin=Unpin this site
|
||||
newtab.block=Remove this site
|
||||
newtab.show=Show the new tab page
|
||||
newtab.hide=Hide the new tab page
|
||||
newtab.sponsored=Show information on sponsored tiles
|
||||
|
||||
@ -58,24 +58,17 @@
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
||||
/* TOGGLE */
|
||||
#newtab-toggle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
/* CUSTOMIZE */
|
||||
#newtab-customize-button {
|
||||
background-color: transparent;
|
||||
background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 32, 32, 0);
|
||||
border: none;
|
||||
background: -216px 0 transparent url(chrome://browser/skin/newtab/controls.png);
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
#newtab-toggle[page-disabled] {
|
||||
background-position: -232px 0;
|
||||
}
|
||||
|
||||
@media (min-resolution: 2dppx) {
|
||||
#newtab-toggle {
|
||||
background-image: url(chrome://browser/skin/newtab/controls@2x.png);
|
||||
background-size: 296px;
|
||||
}
|
||||
#newtab-customize-button:-moz-any(:hover, :active, [active]) {
|
||||
background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32);
|
||||
}
|
||||
|
||||
/* CELLS */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user