mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1158859 - Update newtab cog menu styling. r=adw

This commit is contained in:
Marina Samuel 2015-05-08 11:54:23 -07:00
Родитель 4c4b9c180c
Коммит f8957ee331
13 изменённых файлов: 206 добавлений и 35 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

48
browser/base/content/newtab/customize.js
Просмотреть файл

@ -11,6 +11,8 @@ let gCustomize = {
"classic",
"enhanced",
"panel",
"overlay",
"learn"
],
_nodes: {},
@ -26,17 +28,47 @@ let gCustomize = {
});
this._nodes.classic.addEventListener("click", e => {
gAllPages.enabled = true;
gAllPages.enhanced = false;
if (this._nodes.enhanced.getAttribute("selected")) {
gAllPages.enhanced = true;
} else {
gAllPages.enhanced = false;
}
});
this._nodes.enhanced.addEventListener("click", e => {
gAllPages.enabled = true;
gAllPages.enhanced = true;
if (!gAllPages.enabled) {
gAllPages.enabled = true;
return;
}
gAllPages.enhanced = !gAllPages.enhanced;
});
this._nodes.learn.addEventListener("click", e => {
window.open(TILES_INTRO_LINK,'new_window');
this._onHidden();
});
this.updateSelected();
},
_onHidden: function() {
let nodes = gCustomize._nodes;
nodes.overlay.addEventListener("transitionend", function onTransitionEnd() {
nodes.overlay.removeEventListener("transitionend", onTransitionEnd);
nodes.overlay.style.display = "none";
});
nodes.overlay.style.opacity = 0;
nodes.panel.removeEventListener("popuphidden", gCustomize._onHidden);
nodes.panel.hidden = true;
nodes.button.removeAttribute("active");
},
showPanel: function() {
this._nodes.overlay.style.display = "block";
setTimeout(() => {
// Wait for display update to take place, then animate.
this._nodes.overlay.style.opacity = 0.8;
}, 0);
let nodes = this._nodes;
let {button, panel} = nodes;
if (button.hasAttribute("active")) {
@ -46,11 +78,7 @@ let gCustomize = {
panel.hidden = false;
panel.openPopup(button);
button.setAttribute("active", true);
panel.addEventListener("popuphidden", function onHidden() {
panel.removeEventListener("popuphidden", onHidden);
panel.hidden = true;
button.removeAttribute("active");
});
panel.addEventListener("popuphidden", this._onHidden);
return new Promise(resolve => {
panel.addEventListener("popupshown", function onShown() {
@ -72,5 +100,9 @@ let gCustomize = {
node.removeAttribute("selected");
}
});
if (selected == "enhanced") {
// If enhanced is selected, so is classic (since enhanced is a subitem of classic)
this._nodes.classic.setAttribute("selected", true);
}
},
};

118
browser/base/content/newtab/newTab.css
Просмотреть файл

@ -40,24 +40,25 @@ input[type=button] {
/* CUSTOMIZE */
#newtab-customize-button {
position: absolute;
top: 6px;
right: 6px;
top: 10px;
right: 20px;
z-index: 101;
}
#newtab-customize-button:-moz-locale-dir(rtl) {
left: 6px;
left: 20px;
right: auto;
}
#newtab-intro-what {
cursor: pointer;
position: absolute;
right: 55px;
top: 15px;
right: 70px;
top: 20px;
}
#newtab-intro-what:-moz-locale-dir(rtl) {
left: 55px;
left: 70px;
right: auto;
}
@ -487,6 +488,40 @@ input[type=button] {
transition-duration: 0ms;
}
#newtab-customize-overlay {
opacity: 0;
display: none;
width: 100%;
height: 100%;
background: #F9F9F9;
z-index: 100;
position: fixed;
transition: opacity .07s linear;
}
#newtab-customize-panel {
z-index: 101;
margin-top: -5px;
min-width: 270px;
}
#newtab-customize-title {
color: #7A7A7A;
font-size: 14px;
background-color: #FFFFFF;
height: 52px;
line-height: 52px;
padding-left: 15px;
font-weight: 600;
text-transform: uppercase;
cursor: default;
border-radius: 5px 5px 0px 0px;
}
#newtab-customize-title > label {
cursor: default;
}
#newtab-customize-panel > .panel-arrowcontainer > .panel-arrowcontent,
#newtab-search-panel > .panel-arrowcontainer > .panel-arrowcontent {
padding: 0;
@ -495,7 +530,10 @@ input[type=button] {
.newtab-customize-panel-item,
.newtab-search-panel-engine,
#newtab-search-manage {
padding: 10px 10px 10px 25px;
line-height: 54px;
padding-left: 40px;
font-size: 14px;
cursor: pointer;
}
.newtab-customize-panel-item:not(:last-child),
@ -510,28 +548,76 @@ input[type=button] {
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
}
.newtab-customize-panel-subitem > label,
.newtab-customize-panel-item > label,
.newtab-search-panel-engine > label,
#newtab-search-manage > label {
#newtab-search-manage > label,
.newtab-customize-complex-option {
padding: 0;
margin: 0;
cursor: pointer;
}
.newtab-customize-panel-item:not([selected]) {
color: #919191;
.newtab-customize-panel-item:not([selected]),
.newtab-customize-panel-subitem:not([selected]){
color: #7A7A7A;
}
.newtab-customize-panel-item:not([selected]):hover {
color: #FFFFFF;
background-color: #4A90E2
}
.newtab-customize-complex-option:hover > .selectable:not([selected]),
.selectable:not([selected]):hover {
background: url("chrome://global/skin/menu/shared-menu-check-hover.svg") no-repeat #FFFFFF;
background-size: 16px 16px;
background-position: 15px 20px;
color: #171F26;
}
.newtab-customize-complex-option:hover > .selectable:not([selected]) + .newtab-customize-panel-subitem {
background-color: #FFFFFF;
}
.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;
background: url("chrome://global/skin/menu/shared-menu-check-active.svg") no-repeat transparent;
background-size: 16px 16px;
background-position: 15px 20px;
color: black;
font-weight: 600;
}
@media (min-resolution: 2dppx) {
.newtab-customize-panel-item[selected],
.newtab-search-panel-engine[selected] {
background-image: url("chrome://global/skin/menu/shared-menu-check@2x.png");
}
.newtab-customize-panel-subitem > .checkbox {
width: 18px;
height: 18px;
background-color: #FFFFFF;
border: solid 1px threedshadow;
}
.newtab-customize-panel-subitem[selected] > .checkbox {
background: url("chrome://global/skin/menu/shared-menu-check-black.svg") no-repeat #FFFFFF;
background-size: 9px 9px;
background-position: center;
color: #333333;
}
.newtab-customize-panel-subitem {
font-size: 12px;
padding-left: 40px;
padding-bottom: 20px;
border-bottom: 1px solid threedshadow;
}
.newtab-customize-panel-subitem > label {
padding-left: 10px;
}
.newtab-customize-panel-superitem {
line-height: 14px;
border-bottom: medium none !important;
padding: 20px 0px 10px 40px;
}
.searchSuggestionTable {

23
browser/base/content/newtab/newTab.xul
Просмотреть файл

@ -22,6 +22,8 @@
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="&newtab.pageTitle;">
<div id="newtab-customize-overlay"></div>
<xul:panel id="newtab-intro-panel" orient="vertical" type="arrow"
noautohide="true" hidden="true">
<h1>&newtab.intro.header;</h1>
@ -36,15 +38,24 @@
<xul:panel id="newtab-customize-panel" orient="vertical" type="arrow"
noautohide="true" hidden="true">
<xul:hbox id="newtab-customize-enhanced" class="newtab-customize-panel-item">
<xul:label>&newtab.customize.suggested;</xul:label>
<xul:hbox id="newtab-customize-title" class="newtab-customize-panel-item">
<xul:label>&newtab.customize.cog.title;</xul:label>
</xul:hbox>
<xul:hbox id="newtab-customize-classic" class="newtab-customize-panel-item">
<xul:label>&newtab.customize.topsites;</xul:label>
</xul:hbox>
<xul:hbox id="newtab-customize-blank" class="newtab-customize-panel-item">
<xul:vbox class="newtab-customize-complex-option">
<xul:hbox id="newtab-customize-classic" class="newtab-customize-panel-superitem newtab-customize-panel-item selectable">
<xul:label>&newtab.customize.classic;</xul:label>
</xul:hbox>
<xul:hbox id="newtab-customize-enhanced" class="newtab-customize-panel-subitem">
<xul:label class="checkbox"></xul:label>
<xul:label>&newtab.customize.cog.enhanced;</xul:label>
</xul:hbox>
</xul:vbox>
<xul:hbox id="newtab-customize-blank" class="newtab-customize-panel-item selectable">
<xul:label>&newtab.customize.blank2;</xul:label>
</xul:hbox>
<xul:hbox id="newtab-customize-learn" class="newtab-customize-panel-item">
<xul:label>&newtab.customize.cog.learn;</xul:label>
</xul:hbox>
</xul:panel>
<div id="newtab-scrollbox">

3
browser/base/content/test/newtab/browser_newtab_block.js
Просмотреть файл

@ -29,6 +29,7 @@ function runTests() {
setPinnedLinks("");
yield addNewTabPageTab();
yield customizeNewTabPage("enhanced"); // Toggle enhanced off
checkGrid("0,1,2,3,4,5,6,7,8");
yield blockCell(4);
@ -79,8 +80,8 @@ function runTests() {
NewTabUtils.isTopPlacesSite = origIsTopPlacesSite;
yield restore();
yield setLinks("0,1,2,3,4,5,6,7,8,9");
yield customizeNewTabPage("enhanced"); // Toggle enhanced on
yield addNewTabPageTab();
yield customizeNewTabPage("enhanced");
checkGrid("http://suggested.com/,0,1,2,3,4,5,6,7,8,9");
yield blockCell(1);

6
browser/base/content/test/newtab/browser_newtab_enhanced.js
Просмотреть файл

@ -55,6 +55,7 @@ function runTests() {
// Test with enhanced = false
yield addNewTabPageTab();
yield customizeNewTabPage("classic");
yield customizeNewTabPage("enhanced"); // Toggle enhanced off
let {type, enhanced, title} = getData(0);
isnot(type, "enhanced", "history link is not enhanced");
is(enhanced, "", "history link has no enhanced image");
@ -64,7 +65,7 @@ function runTests() {
// Test with enhanced = true
yield addNewTabPageTab();
yield customizeNewTabPage("enhanced");
yield customizeNewTabPage("enhanced"); // Toggle enhanced on
({type, enhanced, title} = getData(0));
is(type, "organic", "directory link is organic");
isnot(enhanced, "", "directory link has enhanced image");
@ -94,7 +95,7 @@ function runTests() {
// Test pinned link with enhanced = false
yield addNewTabPageTab();
yield customizeNewTabPage("classic");
yield customizeNewTabPage("enhanced"); // Toggle enhanced off
({type, enhanced, title} = getData(0));
isnot(type, "enhanced", "history link is not enhanced");
is(enhanced, "", "history link has no enhanced image");
@ -116,7 +117,6 @@ function runTests() {
// Test with enhanced = false
yield addNewTabPageTab();
yield customizeNewTabPage("classic");
({type, enhanced, title} = getData(0));
isnot(type, "enhanced", "history link is not enhanced");
is(enhanced, "", "history link has no enhanced image");

4
browser/locales/en-US/chrome/browser/newTab.dtd
Просмотреть файл

@ -4,6 +4,10 @@
<!-- These strings are used in the about:newtab page -->
<!ENTITY newtab.pageTitle "New Tab">
<!ENTITY newtab.customize.classic "Show your top sites">
<!ENTITY newtab.customize.cog.enhanced "Include suggested sites">
<!ENTITY newtab.customize.cog.title "New Tab Controls">
<!ENTITY newtab.customize.cog.learn "Learn about New Tab">
<!ENTITY newtab.customize.title "Customize your New Tab page">
<!ENTITY newtab.customize.suggested "Show suggested and your top sites">
<!ENTITY newtab.customize.topsites "Show your top sites">

12
browser/themes/shared/newtab/newTab.inc.css
Просмотреть файл

@ -64,16 +64,26 @@
/* CUSTOMIZE */
#newtab-customize-button,
.newtab-customize {
background-color: transparent;
background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 32, 32, 0);
background-size: 28px;
height: 38px;
width: 38px;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
border: none;
}
.newtab-customize {
height: 28px;
width: 28px;
}
#newtab-customize-button:-moz-any(:hover, :active, [active]) {
background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32);
background-color: #FFFFFF;
border: solid 1px #CCCCCC;
border-radius: 2px;
}
/* CELLS */

3
toolkit/themes/linux/global/jar.mn
Просмотреть файл

@ -55,6 +55,9 @@ toolkit.jar:
+ skin/classic/global/icons/webapps-16.png (icons/webapps-16.png)
+ skin/classic/global/icons/webapps-64.png (icons/webapps-64.png)
skin/classic/global/menu/shared-menu-check.png (../../shared/menu-check.png)
skin/classic/global/menu/shared-menu-check-active.svg (../../shared/menu-check-active.svg)
skin/classic/global/menu/shared-menu-check-black.svg (../../shared/menu-check-black.svg)
skin/classic/global/menu/shared-menu-check-hover.svg (../../shared/menu-check-hover.svg)
* skin/classic/global/in-content/common.css (in-content/common.css)
* skin/classic/global/in-content/info-pages.css (in-content/info-pages.css)
skin/classic/global/in-content/check.svg (../../shared/in-content/check.svg)

3
toolkit/themes/osx/global/jar.mn
Просмотреть файл

@ -185,6 +185,9 @@ toolkit.jar:
skin/classic/global/media/videoClickToPlayButton.svg (media/videoClickToPlayButton.svg)
skin/classic/global/menu/shared-menu-check.png (../../shared/menu-check.png)
skin/classic/global/menu/shared-menu-check@2x.png (../../shared/menu-check@2x.png)
skin/classic/global/menu/shared-menu-check-active.svg (../../shared/menu-check-active.svg)
skin/classic/global/menu/shared-menu-check-black.svg (../../shared/menu-check-black.svg)
skin/classic/global/menu/shared-menu-check-hover.svg (../../shared/menu-check-hover.svg)
* skin/classic/global/in-content/common.css (in-content/common.css)
* skin/classic/global/in-content/info-pages.css (in-content/info-pages.css)
skin/classic/global/in-content/check.svg (../../shared/in-content/check.svg)

6
toolkit/themes/shared/menu-check-active.svg Normal file
Просмотреть файл

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<polygon fill="#4A90E2" points="7.1,15.5 0.5,10.8 2.2,8.3 6.3,11.2 13,0.5 15.5,2.2 "/>
</svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 438 B

6
toolkit/themes/shared/menu-check-black.svg Normal file
Просмотреть файл

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 9 9" enable-background="new 0 0 9 9" xml:space="preserve">
<polygon points="4,9 0,6.2 1,4.7 3.5,6.4 7.5,0 9,1 "/>
</svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 402 B

6
toolkit/themes/shared/menu-check-hover.svg Normal file
Просмотреть файл

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 9 9" enable-background="new 0 0 9 9" xml:space="preserve">
<polygon fill="#CCCCCC" points="4,9 0,6.2 1,4.7 3.5,6.4 7.5,0 9,1 "/>
</svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 417 B

3
toolkit/themes/windows/global/jar.mn
Просмотреть файл

@ -160,6 +160,9 @@ toolkit.jar:
skin/classic/global/media/clicktoplay-bgtexture.png (media/clicktoplay-bgtexture.png)
skin/classic/global/media/videoClickToPlayButton.svg (media/videoClickToPlayButton.svg)
skin/classic/global/menu/shared-menu-check.png (../../shared/menu-check.png)
skin/classic/global/menu/shared-menu-check-active.svg (../../shared/menu-check-active.svg)
skin/classic/global/menu/shared-menu-check-black.svg (../../shared/menu-check-black.svg)
skin/classic/global/menu/shared-menu-check-hover.svg (../../shared/menu-check-hover.svg)
* skin/classic/global/in-content/common.css (in-content/common.css)
* skin/classic/global/in-content/info-pages.css (in-content/info-pages.css)
skin/classic/global/in-content/check.svg (../../shared/in-content/check.svg)