Bug 1698058 - Update downloads panel/window icons & icon button styling. r=Gijs

Differential Revision: https://phabricator.services.mozilla.com/D108189
This commit is contained in:
Tim Nguyen 2021-03-13 00:35:11 +00:00
Родитель c4a537e166
Коммит 6b556978c0
11 изменённых файлов: 19 добавлений и 113 удалений

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

@ -2078,59 +2078,6 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
display: none !important;
}
.subviewbutton.download {
-moz-box-align: start;
min-height: 48px;
padding-inline-start: 8px;
}
.subviewbutton.download > .toolbarbutton-icon,
.subviewbutton.download > .toolbarbutton-text > label {
margin: 4px 0 0;
}
.subviewbutton.download > .toolbarbutton-icon {
width: 32px;
height: 32px;
}
.subviewbutton.download > .toolbarbutton-text > .status-text {
color: var(--panel-description-color);
font-size: .9em;
}
.subviewbutton.download > .action-button {
appearance: none; /* To avoid native Windows hover styling */
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 1;
%ifdef XP_MACOSX
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
%else
list-style-image: url("chrome://browser/skin/folder.svg");
%endif
/* Measurement to vertically center this button: 1 line of text minus half of 4px top margin. */
margin: calc(1em - 2px) 0 0;
padding: 4px;
}
.subviewbutton.download[canRetry] > .action-button {
list-style-image: url("chrome://browser/skin/reload.svg");
}
.subviewbutton.download:not([canShow], [canRetry]) > .action-button {
fill: currentColor;
fill-opacity: 0.4;
}
.subviewbutton.download:is([canShow],[canRetry]) > .action-button@buttonStateHoverOrFocus@ {
background-color: var(--arrowpanel-dimmed-further);
}
.subviewbutton.download:is([canShow],[canRetry]) > .action-button@buttonStateActive@ {
background-color: var(--arrowpanel-dimmed-even-further);
}
/* What's New panel */
#customizationui-widget-multiview #PanelUI-whatsNew {
max-width: @menuPanelWidth@;

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

@ -76,12 +76,13 @@
margin: 0;
border: none;
color: inherit;
padding: 0 18px;
padding: 0 12px;
}
.downloadButton > .button-box {
appearance: none;
padding: 2px !important;
padding: 8px !important;
border-radius: 4px;
}
.downloadButton > .button-box > .button-icon {
@ -97,37 +98,25 @@
}
.downloadButton:hover > .button-box {
background-color: graytext;
color: Field;
border-radius: 50%;
background-color: color-mix(in srgb, currentColor 15%, transparent);
}
.downloadButton:hover:active > .button-box {
background-color: FieldText;
}
@itemFocused@ > .downloadButton:hover > .button-box {
background-color: HighlightText;
color: Highlight;
}
@itemFocused@ > .downloadButton:hover:active > .button-box {
background-color: Field;
color: FieldText;
background-color: color-mix(in srgb, currentColor 30%, transparent);
}
/*** Button icons ***/
.downloadIconCancel > .button-box > .button-icon {
list-style-image: url("chrome://browser/skin/panel-icon-cancel.svg");
list-style-image: url("chrome://browser/skin/stop.svg");
}
.downloadIconShow > .button-box > .button-icon {
list-style-image: url("chrome://global/skin/icons/findFile.svg");
list-style-image: url("chrome://global/skin/icons/find-file-in-folder.svg");
}
.downloadIconRetry > .button-box > .button-icon {
list-style-image: url("chrome://browser/skin/panel-icon-retry.svg");
list-style-image: url("chrome://browser/skin/reload.svg");
}
/*** Progressmeter ***/

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

@ -204,15 +204,15 @@
/*** Button icons ***/
.downloadIconCancel > .button-box > .button-icon {
list-style-image: url("chrome://browser/skin/panel-icon-cancel.svg");
list-style-image: url("chrome://browser/skin/stop.svg");
}
.downloadIconShow > .button-box > .button-icon {
list-style-image: url("chrome://global/skin/icons/findFile.svg");
list-style-image: url("chrome://global/skin/icons/find-file-in-folder.svg");
}
.downloadIconRetry > .button-box > .button-icon {
list-style-image: url("chrome://browser/skin/panel-icon-retry.svg");
list-style-image: url("chrome://browser/skin/reload.svg");
}
.downloadIconSubviewArrow > .button-box > .button-icon {

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

@ -1,6 +0,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/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 3H8.151L6.584 1.538A2 2 0 0 0 5.219 1H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM5.219 3l1.072 1H2V3zM14 13H2V5h6v-.014c.05 0 .1.014.151.014H14z"/>
</svg>

До

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

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

@ -103,7 +103,6 @@
skin/classic/browser/tracking-protection-animation.svg (../shared/identity-block/tracking-protection-animation.svg)
skin/classic/browser/tracking-protection-animation-brighttext.svg (../shared/identity-block/tracking-protection-animation-brighttext.svg)
skin/classic/browser/panel-icon-cancel.svg (../shared/panel-icon-cancel.svg)
skin/classic/browser/panel-icon-retry.svg (../shared/panel-icon-retry.svg)
skin/classic/browser/toolbar-drag-indicator.svg (../shared/toolbar-drag-indicator.svg)
skin/classic/browser/protections/resolved-breach.svg (../shared/protections/resolved-breach.svg)
@ -167,7 +166,6 @@
skin/classic/browser/edit-copy.svg (../shared/icons/edit-copy.svg)
skin/classic/browser/edit-cut.svg (../shared/icons/edit-cut.svg)
skin/classic/browser/edit-paste.svg (../shared/icons/edit-paste.svg)
skin/classic/browser/folder.svg (../shared/icons/folder.svg)
skin/classic/browser/forget.svg (../shared/icons/forget.svg)
skin/classic/browser/forward.svg (../shared/icons/forward.svg)
skin/classic/browser/fullscreen.svg (../shared/icons/fullscreen.svg)

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

@ -172,10 +172,6 @@ toolbarpaletteitem[place="palette"] > #bookmarks-menu-button,
#appMenu-library-downloads-button {
list-style-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar");
}
#appMenu-library-downloads-show-button {
list-style-image: url("chrome://browser/skin/folder.svg");
}
} /** END not Proton **/
@supports -moz-bool-pref("browser.proton.enabled") {

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

@ -1,8 +0,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/. -->
<svg xmlns="http://www.w3.org/2000/svg"
width="32" height="32" viewBox="0 0 32 32">
<path fill="context-fill" d="M28,16.5v-14l-5,4.8c-1.8-1.4-4.4-2.4-7-2.4c-6.4,0-11.8,5.2-11.8,11.8c0,6.4,5.2,11.8,11.8,11.8c3.4,0,6.2-1.4,8.2-3.6 l-3.4-3.4c-1.2,1.2-3,1.8-5,1.8c-3.6,0.2-6.8-2.8-6.8-6.8c0-3.8,3-7.2,7-7.2c1.4,0,2.6,0.4,3.6,1l-6,6.2H28z"/>
</svg>

До

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

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

@ -1202,7 +1202,7 @@ var snapshotFormatters = {
const iconUp = "chrome://global/skin/icons/arrow-up-12.svg";
const iconDown = "chrome://global/skin/icons/arrow-dropdown-12.svg";
const iconFolder = "chrome://global/skin/icons/findFile.svg";
const iconFolder = "chrome://global/skin/icons/find-file-in-folder.svg";
const iconUnsigned =
"chrome://global/skin/icons/connection-mixed-active-loaded.svg";
const outerTHead = $("third-party-modules-thead");

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

@ -1,8 +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 xmlns="http://www.w3.org/2000/svg"
width="32" height="32" viewBox="0 0 32 32">
<path fill="context-fill" d="M17.3,9.4c0,0,1.1,0,3.7,0c1.7,0,2,0,5.6,0c0.6,0,0.6,0,1.1,0V9.2c0-1.5-0.9-2.6-2-2.6h-5.8V6.3c0-0.6-1.5-2-2.8-2h-7.1 H7.6H4.9v2.4v2.4v2.2c2.8,0,8.5,0,8.5,0C16.4,11.3,17.3,9.4,17.3,9.4z M29,13c0-0.6-0.6-1.1-1.5-1.7l0,0c-0.2,0-0.6,0-0.9,0 c-2.8,0-3,0-4.8,0c-1.9,0-3.3,0-3.3,0s-1.5,2.4-3.7,2.4c0,0-6.5,0-9.1,0H5.4C3,13.7,3,15.9,3,15.9l1.1,9.7C4.1,27.1,5,28,6.5,28 h19.1c1.5,0,2.4-0.9,2.4-2.4L29,13.7l0,0l0,0C29,13.7,29,13,29,13z" />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 3H8.151L6.584 1.538A2 2 0 0 0 5.219 1H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM5.219 3l1.072 1H2V3zM14 13H2V5h6v-.014c.05 0 .1.014.151.014H14z"/>
</svg>

До

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

После

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

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

@ -1,8 +0,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/. -->
<svg xmlns="http://www.w3.org/2000/svg"
width="32" height="32" viewBox="0 0 32 32">
<path fill="context-fill" d="M12.9,2c6,0,11,5,11,11c0,2.2-0.6,4.2-1.8,6l7.2,7c0.8,0.8,0.8,2.4,0,3.2c-0.6,0.6-1.2,0.8-1.6,0.8s-1.2-0.2-1.6-0.6l-7-7 c-1.8,1.2-3.8,1.8-6,1.8c-6,0-11-5-11-11C2.1,7.2,6.9,2,12.9,2z M12.9,20c3.8,0,7-3.2,7-7s-3.2-7-7-7s-7,3.2-7,7S9.1,20,12.9,20z" />
</svg>

До

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

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

@ -46,13 +46,13 @@ toolkit.jar:
skin/classic/global/icons/document.svg (../../shared/icons/document.svg)
skin/classic/global/icons/edit.svg (../../shared/icons/edit.svg)
skin/classic/global/icons/error.svg (../../shared/icons/error.svg)
#ifndef XP_MACOSX
skin/classic/global/icons/find-file-in-folder.svg (../../shared/icons/folder.svg)
#else
skin/classic/global/icons/find-file-in-folder.svg (../../shared/icons/search-glass.svg)
#endif
skin/classic/global/icons/find-previous-arrow.svg (../../shared/icons/find-previous-arrow.svg)
skin/classic/global/icons/find-next-arrow.svg (../../shared/icons/find-next-arrow.svg)
#ifndef XP_MACOSX
skin/classic/global/icons/findFile.svg (../../shared/icons/folder.svg)
#else
skin/classic/global/icons/findFile.svg (../../shared/icons/magnifier.svg)
#endif
skin/classic/global/icons/heart.svg (../../shared/icons/heart.svg)
skin/classic/global/icons/help.svg (../../shared/icons/help.svg)
skin/classic/global/icons/info.svg (../../shared/icons/info.svg)