Bug 1682522 - Implement new menu style for Windows 10. r=desktop-theme-reviewers,ntim

Differential Revision: https://phabricator.services.mozilla.com/D104466
This commit is contained in:
Molly Howell 2021-02-11 00:52:56 +00:00
Родитель 156c710d50
Коммит 3de3dc09e4
11 изменённых файлов: 271 добавлений и 9 удалений

Просмотреть файл

@ -0,0 +1,6 @@
<!-- 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/. -->
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill="context-fill" fill-opacity="context-fill-opacity" d="m0.6071 8.2077c-0.39052-0.39053-0.39052-1.0237 0-1.4142l6.5064-6.5064c0.24484-0.24484 0.64181-0.24484 0.88665 0 0.24484 0.24484 0.24484 0.6418 0 0.88665l-4.4473 4.4473c-0.47247 0.47247-0.13785 1.2803 0.53033 1.2803h10.192c0.3452 0 0.625 0.27982 0.625 0.625 0 0.34517-0.2798 0.625-0.625 0.625h-10.15c-0.66818 0-1.0028 0.80785-0.53033 1.2803l4.4028 4.4028c0.24355 0.2435 0.24355 0.6384 0 0.882-0.24356 0.2435-0.63843 0.2435-0.88199 0z"/>
</svg>

После

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

Просмотреть файл

@ -0,0 +1,6 @@
<!-- 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/. -->
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill="context-fill" fill-opacity="context-fill-opacity" fill-rule="evenodd" d="m9.5054 3.6257c-0.28425-0.5212-1.0326-0.5212-1.3169 0l-0.81295 1.4906c-0.40785 0.74784-1.1303 1.2727-1.9675 1.4295l-1.6689 0.31253c-0.58354 0.10927-0.8148 0.82104-0.40694 1.2524l1.1665 1.2338c0.5852 0.61897 0.86114 1.4682 0.75153 2.3129l-0.21849 1.6838c-0.07639 0.5888 0.52907 1.0287 1.0654 0.7741l1.5339-0.7281c0.76951-0.3653 1.6625-0.3653 2.432 0l1.5338 0.7281c0.5364 0.2546 1.1418-0.1853 1.0654-0.7741l-0.2185-1.6838c-0.1096-0.8447 0.1664-1.694 0.7516-2.3129l1.1664-1.2338c0.4079-0.43139 0.1766-1.1432-0.4069-1.2524l-1.6689-0.31253c-0.8373-0.15679-1.5597-0.68166-1.9675-1.4295zm0.44799-2.4688c-0.47765-0.87581-1.7352-0.87582-2.2129 0l-1.748 3.2052c-0.18127 0.33237-0.50234 0.56564-0.87446 0.63533l-3.5885 0.672c-0.98056 0.18362-1.3692 1.3796-0.68382 2.1046l2.5081 2.6529c0.26009 0.2751 0.38273 0.6526 0.33401 1.028l-0.46979 3.6205c-0.12837 0.9893 0.88903 1.7285 1.7902 1.3007l3.2981-1.5656c0.34201-0.1623 0.73888-0.1623 1.0809 0l3.2981 1.5656c0.9012 0.4278 1.9186-0.3114 1.7903-1.3007l-0.4698-3.6205c-0.0487-0.3754 0.0739-0.7529 0.334-1.028l2.5081-2.6529c0.6854-0.7249 0.2968-1.9209-0.6838-2.1046l-3.5884-0.672c-0.3722-0.06969-0.6932-0.30296-0.8745-0.63533z" />
</svg>

После

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

Просмотреть файл

@ -0,0 +1,6 @@
<!-- 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/. -->
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill="context-fill" fill-opacity="context-fill-opacity" d="m14.426 8.2065c0.3905-0.39053 0.3905-1.0237 0-1.4142l-6.5065-6.5064c-0.24484-0.24484-0.6418-0.24484-0.88664 0-0.24484 0.24484-0.24484 0.6418 0 0.88665l4.4473 4.4473c0.4725 0.47247 0.1379 1.2803-0.5303 1.2803h-10.192c-0.34518 0-0.625 0.27982-0.625 0.625 0 0.34517 0.27982 0.625 0.625 0.625h10.15c0.6682 0 1.0028 0.80785 0.5303 1.2803l-4.4028 4.4028c-0.24356 0.2435-0.24356 0.6384 0 0.882 0.24355 0.2435 0.63843 0.2435 0.88198 0z" />
</svg>

После

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

Просмотреть файл

@ -0,0 +1,7 @@
<!-- 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/. -->
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill="context-fill" fill-opacity="context-fill-opacity" d="m14.25 13.097c0.1213-0.1606 0.3966-0.078 0.3966 0.1232v2.6548c0 0.3453 0.2799 0.6251 0.6251 0.6251s0.6251-0.2798 0.6251-0.6251v-4.3749c0-0.5523-0.4478-1-1-1h-4.375c-0.3452 0-0.62505 0.2798-0.62505 0.625s0.27985 0.625 0.62505 0.625h2.2513c0.3875 0 0.6211 0.419 0.3797 0.7222-1.0044 1.2611-2.484 2.1434-4.2094 2.3553-3.4946 0.4291-6.6753-2.056-7.1044-5.5506-0.04207-0.34261-0.35391-0.58624-0.69651-0.54418-0.34261 0.04207-0.58624 0.35391-0.54418 0.69651 0.51322 4.1798 4.3176 7.1522 8.4974 6.639 2.1342-0.2621 3.9533-1.3825 5.1542-2.9713z" />
<path fill="context-fill" fill-opacity="context-fill-opacity" d="m15.191 8.2672c-0.3426 0.04207-0.6544-0.20156-0.6965-0.54417-0.4291-3.4946-3.6098-5.9796-7.1044-5.5506-1.7253 0.21184-3.2051 1.0943-4.2094 2.3553-0.24146 0.30317-0.00787 0.7222 0.37971 0.7222h2.2518c0.34518 0 0.625 0.27982 0.625 0.625s-0.27982 0.625-0.625 0.625h-4.375c-0.55229 0-1-0.44771-1-1v-4.3749c0-0.34521 0.27985-0.62506 0.62506-0.62506 0.34521 0 0.62506 0.27985 0.62506 0.62506v2.6544c0 0.20123 0.27525 0.28377 0.39659 0.12325 1.201-1.5887 3.0198-2.7088 5.1539-2.9709 4.1797-0.51321 7.9842 2.4591 8.4974 6.6389 0.0421 0.34261-0.2016 0.65445-0.5442 0.69651z" />
</svg>

После

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

Просмотреть файл

@ -754,6 +754,40 @@ panel[touchmode] .PanelUI-subView #appMenu-zoom-controls > .subviewbutton-iconic
margin-top: -4px;
}
@supports (-moz-bool-pref("browser.proton.contextmenus.enabled")) {
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
#context-navigation {
/* The Windows 10 version of the navigation area needs the scrollbox's
background color, not the builtin "menu" color. */
background-color: inherit;
/* The Win10 context menu wants the icons centered vertically in the
navigation group, not with a gap on the bottom. */
padding-bottom: 0;
}
/* Other menu separators don't extend all the way to the menu edges, but the
one below the navigation buttons in the content context menu should. */
#context-sep-navigation {
margin-top: 0;
margin-inline: 0;
}
/* We also have different navigation icons for Win10. */
#context-back {
list-style-image: url("chrome://browser/skin/menus/back.svg");
}
#context-forward {
list-style-image: url("chrome://browser/skin/menus/forward.svg");
}
#context-reload {
list-style-image: url("chrome://browser/skin/menus/reload.svg");
}
#context-bookmarkpage {
list-style-image: url("chrome://browser/skin/menus/bookmark-hollow.svg");
}
}
}
%include browser-aero.css
@media (-moz-os-version: windows-win7) {

Просмотреть файл

@ -50,3 +50,7 @@ browser.jar:
skin/classic/browser/window-controls/restore-highcontrast.svg (window-controls/restore-highcontrast.svg)
skin/classic/browser/window-controls/restore-themes.svg (window-controls/restore-themes.svg)
skin/classic/browser/e10s-64@2x.png (../shared/e10s-64@2x.png)
skin/classic/browser/menus/back.svg (../shared/icons/menus/back.svg)
skin/classic/browser/menus/bookmark-hollow.svg (../shared/icons/menus/bookmark-hollow.svg)
skin/classic/browser/menus/forward.svg (../shared/icons/menus/forward.svg)
skin/classic/browser/menus/reload.svg (../shared/icons/menus/reload.svg)

Просмотреть файл

@ -19,12 +19,43 @@
--arrowpanel-border-color: var(--default-arrowpanel-border-color);
--panel-disabled-color: GrayText;
--panel-description-color: GrayText;
/*
* Overridden below for the default windows 10 theme.
*/
--menuitem-hover-background-color: -moz-menuhover;
--menuitem-hover-color: -moz-menuhovertext;
/* ::::: Styles ::::: */
background-color: -moz-Dialog;
color: -moz-DialogText;
font: message-box;
}
@supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
:root {
--menuitem-hover-background-color: #0250bb;
--menuitem-disabled-hover-background-color: rgba(207, 207, 216, 0.3);
--menuitem-hover-color: white;
--menu-background-color: #f9f9fb;
--menu-color: black;
--menu-disabled-color: rgba(21, 20, 26, 0.4);
--menu-border-color: #f0f0f4;
}
:root:-moz-lwtheme-brighttext {
--menuitem-hover-background-color: #00b4f5;
--menuitem-disabled-hover-background-color: rgba(74, 74, 85, 0.5);
--menuitem-hover-color: black;
--menu-background-color: #15141a;
--menu-color: white;
--menu-disabled-color: rgba(251, 251, 254, 0.6);
--menu-border-color: #5b5b67;
}
}
}
@media (-moz-windows-default-theme) {
:root {
--arrowpanel-border-color: hsla(210,4%,10%,.2);

Просмотреть файл

@ -0,0 +1,6 @@
<!-- 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/. -->
<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path fill="context-fill" fill-opacity="context-fill-opacity" d="m0.24219 11.455 5.4492-5.4551-5.4492-5.4551 0.52734-0.52734 5.9883 5.9824-5.9883 5.9824z"/>
</svg>

После

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

Просмотреть файл

@ -18,7 +18,7 @@ toolkit.jar:
* skin/classic/global/findBar.css
* skin/classic/global/global.css
skin/classic/global/netError.css
* skin/classic/global/popup.css
skin/classic/global/popup.css
* skin/classic/global/popupnotification.css
skin/classic/global/printPageSetup.css
skin/classic/global/richlistbox.css
@ -38,6 +38,7 @@ toolkit.jar:
skin/classic/global/icons/sslWarning.png (icons/sslWarning.png)
skin/classic/global/icons/warning-large.png (icons/warning-large.png)
skin/classic/global/icons/windowControls.png (icons/windowControls.png)
skin/classic/global/icons/menus/submenu.svg (icons/menus/submenu.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/tree/sort-asc.svg (tree/sort-asc.svg)

Просмотреть файл

@ -25,6 +25,24 @@ menucaption {
-moz-image-region: auto;
}
@supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
/* For Windows 10, prevent using native OS drawing of certain menu elements,
especially background colors and shadows. */
menu, menuitem, menucaption {
appearance: none;
}
/* Menu item text also needs native drawing disabled. */
menu > .menu-text,
menuitem > .menu-text,
menu > .menu-iconic-text,
menuitem > .menu-iconic-text {
appearance: none;
}
}
}
menu[disabled="true"],
menuitem[disabled="true"],
menu[_moz-menuactive="true"][disabled="true"],
@ -33,6 +51,17 @@ menuitem[_moz-menuactive="true"][disabled="true"] {
text-shadow: none;
}
@supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
menu[disabled="true"],
menuitem[disabled="true"],
menu[_moz-menuactive="true"][disabled="true"],
menuitem[_moz-menuactive="true"][disabled="true"] {
color: var(--menu-disabled-color);
}
}
}
@media (-moz-windows-classic) {
menu[disabled="true"],
menubar > menu[disabled="true"][_moz-menuactive="true"],
@ -91,6 +120,15 @@ menucaption {
padding-top: 2px;
}
/* Don't leave space for icons on Win10. */
@supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
.menu-text {
padding-inline-start: 0 !important;
}
}
}
/* ..... menu arrow box ..... */
.menu-right {
@ -102,6 +140,22 @@ menucaption {
padding-top: 1px;
}
/* Override the native menu arrow with a custom one for Win10. */
@supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
.menu-right {
appearance: none;
list-style-image: url("chrome://global/skin/icons/menus/submenu.svg");
-moz-context-properties: fill;
fill: currentColor;
}
.menu-right:-moz-locale-dir(rtl) {
transform: scaleX(-1);
}
}
}
/* ::::: menu/menuitems in menubar ::::: */
menubar > menu[_moz-menuactive="true"]:not([disabled="true"]) {
@ -167,8 +221,17 @@ menupopup > menucaption {
menu[_moz-menuactive="true"],
menuitem[_moz-menuactive="true"] {
background-color: -moz-menuhover;
color: -moz-menuhovertext;
background-color: var(--menuitem-hover-background-color);
color: var(--menuitem-hover-color);
}
@supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
menu[_moz-menuactive="true"][disabled="true"],
menuitem[_moz-menuactive="true"][disabled="true"] {
background-color: var(--menuitem-disabled-hover-background-color);
}
}
}
/* ::::: menu/menuitems in menulist popups ::::: */
@ -225,6 +288,16 @@ menulist > menupopup > :is(menuitem, menucaption):not(.menuitem-iconic) > .menu-
margin: 0 !important;
}
@supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
menulist > menupopup > menuitem,
menulist > menupopup > menucaption,
menulist > menupopup > menu {
color: var(--menu-color);
}
}
}
/* ::::: checkbox and radio menuitems ::::: */
menuitem[type="checkbox"],
@ -257,6 +330,31 @@ menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon {
display: none;
}
@supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
/* For Windows 10, checkbox and radio button menu items need the default
appearance disabled so they pick up our custom styles instead. */
menuitem[type="checkbox"],
menuitem[type="radio"] {
appearance: none;
}
/* We need to do something to override the default style for selected
checkboxes and radio buttons because the native drawing we use on other
Windows versions looks pretty bad with the Win10 styles, so for now we'll
insert a generic checkmark icon for both types. */
menuitem[checked="true"] > .menu-iconic-left {
appearance: none !important;
-moz-context-properties: fill;
fill: currentColor;
list-style-image: url("chrome://global/skin/icons/check.svg");
}
menuitem[checked="true"] > .menu-iconic-left > .menu-iconic-icon {
display: initial;
}
}
}
/* ::::: menuseparator ::::: */
menuseparator {
@ -273,4 +371,20 @@ menulist > menupopup > menuseparator {
border-bottom: none;
}
/* On Windows 10, separators get entirely custom rendering. */
@supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
menuseparator {
appearance: none;
border-top: 1px solid var(--menu-border-color);
border-bottom: none;
padding: 0;
/* The side margins should align with the start of the menu item text. */
margin: 2px 1em;
}
}
}
%include ../../shared/menu-scrolling.inc.css

Просмотреть файл

@ -21,6 +21,49 @@ menupopup {
-moz-default-appearance: menupopup;
}
@supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
menupopup {
/* Disable the default appearance so we can override the native styling. */
appearance: none;
/* Leave enough space for the drop shadow and border. */
padding: 3px 30px 42px;
/* But also prevent the menu from opening away from where it should be. */
margin-inline-start: -30px;
margin-top: -3px;
/* Prevent any background or border around the outside of the shadow. */
background-color: transparent;
border-color: transparent;
}
menupopup > menuitem,
menupopup > menu {
padding-block: 0.5em;
padding-inline-start: 1em;
}
/* This is the container inside of the <menupopup> element; the border is
defined here to keep it inside of the shadow. */
.menupopup-arrowscrollbox {
background-color: var(--menu-background-color);
color: var(--menu-color);
border: 1px solid var(--menu-border-color);
border-radius: 4px;
box-shadow:
0px 2.4px 7.2px rgba(0, 0, 0, 0.18),
0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
/* Prevent contained items from drawing over the border-radius. */
overflow: hidden;
}
}
}
menupopup > menu > menupopup {
/* align submenus */
margin-inline-start: -3px;
@ -62,15 +105,11 @@ panel[type="arrow"][side="right"] {
-moz-box-orient: vertical;
}
%ifdef XP_WIN
@media (-moz-os-version: windows-win7) {
%endif
.panel-arrowcontent {
border-radius: 4px;
}
%ifdef XP_WIN
}
%endif
panel[type="arrow"].panel-no-padding::part(arrowcontent) {
padding: 0;
@ -115,13 +154,11 @@ panel[type="arrow"].panel-no-padding::part(arrowcontent) {
margin-left: -5px;
}
%ifdef XP_WIN
@media (-moz-windows-default-theme) {
.panel-arrowcontent {
box-shadow: 0 0 4px hsla(210,4%,10%,.2);
}
}
%endif
/* rules for popups associated with menulists */
@ -130,3 +167,13 @@ menulist > menupopup {
min-width: 0;
background-color: Field;
}
@supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
/* For Win10, the popup itself needs to have a transparent background because
otherwise the background color would appear behind the drop shadow. */
menulist > menupopup {
background-color: transparent;
}
}
}