Bug 1377184 - Consistently use the custom toolbar button styling in all browser toolbars. r=johannh
MozReview-Commit-ID: DvMorv7HhDu
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1111,17 +1111,17 @@
mousethrough="always"
collapsed="true"/>
</hbox>
<scrollbox orient="horizontal"
id="PlacesToolbarItems"
flex="1"/>
<toolbarbutton type="menu"
id="PlacesChevron"
- class="chevron"
+ class="toolbarbutton-1"
mousethrough="never"
collapsed="true"
tooltiptext="&bookmarksToolbarChevron.tooltip;"
onpopupshowing="document.getElementById('PlacesToolbar')
._placesView._onChevronPopupShowing(event);">
<menupopup id="PlacesChevronPopup"
placespopup="true"
tooltip="bhTooltip" popupsinherittooltip="true"
--- a/browser/base/content/test/performance/browser_startup_images.js
+++ b/browser/base/content/test/performance/browser_startup_images.js
@@ -82,24 +82,18 @@ const whitelist = [
},
{
file: "resource://gre-resources/broken-image.png",
platforms: ["win", "macosx"],
intermittentNotLoaded: ["win", "macosx"],
},
{
- file: "chrome://global/skin/icons/chevron.png",
- hidpi: "chrome://global/skin/icons/chevron@2x.png",
- platforms: ["macosx"],
- },
-
- {
- file: "chrome://global/skin/toolbar/chevron.gif",
- platforms: ["win", "linux"],
+ file: "chrome://browser/skin/chevron.svg",
+ platforms: ["win", "linux", "macosx"],
},
{
file: "chrome://global/skin/icons/resizer.png",
platforms: ["win"],
},
];
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -828,38 +828,16 @@ html|span.ac-emphasize-text-url {
}
/* All tabs menupopup */
.alltabs-item[selected="true"] {
font-weight: bold;
}
-
-toolbarbutton.chevron {
- list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
-}
-
-toolbar[brighttext] toolbarbutton.chevron {
- list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
-}
-
-toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon {
- transform: scaleX(-1);
-}
-
-toolbarbutton.chevron > .toolbarbutton-text,
-toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
- display: none;
-}
-
-toolbarbutton.chevron > .toolbarbutton-icon {
- margin: 0;
-}
-
/* Status panel */
.statuspanel-label {
margin: 0;
padding: 2px 4px;
background-color: -moz-dialog;
border: 1px none ThreeDShadow;
border-top-style: solid;
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -210,48 +210,16 @@
min-height: 19px; /* 16px button height + 2px padding + 1px margin-bottom */
}
#nav-bar-customization-target > #wrapper-personal-bookmarks > #personal-bookmarks {
min-height: 32px;
-moz-box-align: center;
}
-toolbarbutton.chevron {
- list-style-image: url("chrome://global/skin/icons/chevron.png");
- margin: 1px 0 0;
- padding: 0;
-}
-
-toolbar[brighttext] toolbarbutton.chevron {
- list-style-image: url("chrome://global/skin/icons/chevron-inverted.png");
-}
-
-toolbarbutton.chevron > .toolbarbutton-text {
- display: none;
-}
-
-toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon {
- transform: scaleX(-1);
-}
-
-@media (min-resolution: 2dppx) {
- toolbarbutton.chevron {
- list-style-image: url("chrome://global/skin/icons/chevron@2x.png");
- }
-
- toolbar[brighttext] toolbarbutton.chevron {
- list-style-image: url("chrome://global/skin/icons/chevron-inverted@2x.png");
- }
-
- toolbarbutton.chevron > .toolbarbutton-icon {
- width: 13px;
- }
-}
-
/* ----- BOOKMARK BUTTONS ----- */
.bookmark-item[container] {
list-style-image: url("chrome://global/skin/tree/folder.png");
}
.bookmark-item[container][livemark] {
list-style-image: url("chrome://browser/skin/page-livemarks.png");
@@ -1087,20 +1055,16 @@ html|span.ac-emphasize-text-url {
.browserContainer > findbar {
background: @scopeBarBackground@;
border-top: @scopeBarSeparatorBorder@;
color: -moz-DialogText;
text-shadow: none;
}
-toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
- display: none;
-}
-
.bookmark-item {
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
}
.openintabs-menuitem {
list-style-image: none;
}
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -434,19 +434,16 @@
}
/* New tab button */
.tabs-newtab-button,
#TabsToolbar > #new-tab-button ,
#TabsToolbar > toolbarpaletteitem > #new-tab-button {
list-style-image: url(chrome://browser/skin/tabbrowser/newtab.svg);
- -moz-context-properties: fill;
- fill: currentColor;
- color: inherit;
}
.tabs-newtab-button {
width: 36px;
}
@media (min-resolution: 1.1dppx) {
.tab-throbber[busy] {
@@ -457,18 +454,16 @@
list-style-image: url("chrome://global/skin/icons/loading@2x.png");
}
}
/* All tabs button and menupopup */
#alltabs-button {
list-style-image: url(chrome://browser/skin/arrow-dropdown-16.svg);
- -moz-context-properties: fill;
- fill: currentColor;
}
.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
}
.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
list-style-image: url("chrome://global/skin/icons/loading.png");
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -295,16 +295,17 @@ toolbar:not([brighttext]) #bookmarks-men
#zoom-out-button {
list-style-image: url("chrome://browser/skin/zoom-out.svg");
}
#zoom-in-button {
list-style-image: url("chrome://browser/skin/zoom-in.svg");
}
+#PlacesChevron,
#nav-bar-overflow-button {
list-style-image: url("chrome://browser/skin/chevron.svg");
}
#nav-bar-overflow-button[animate] > .toolbarbutton-icon {
fill: transparent;
}
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -6,18 +6,18 @@
--toolbarbutton-hover-background: hsla(240,5%,5%,.1);
--toolbarbutton-active-background: hsla(240,5%,5%,.15);
--toolbarbutton-inner-padding: 6px;
--backbutton-background: hsla(0,100%,100%,.8);
--backbutton-hover-background: var(--backbutton-background);
--backbutton-active-background: var(--toolbarbutton-active-background);
+ --backbutton-border-color: hsla(240,5%,5%,.3);
- --backbutton-border-color: hsla(240,5%,5%,.3);
/* This default value of --toolbarbutton-height is defined to prevent
CSS errors for an invalid variable. The value should not get used,
as a more specific value should be set when the value will be used. */
--toolbarbutton-height: 0;
}
/* Larger buttons in touch mode */
:root[uidensity=touch] {
@@ -44,28 +44,27 @@ toolbar[brighttext] {
#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
opacity: 0.4;
}
.toolbarbutton-1 > .toolbarbutton-icon {
margin-inline-end: 0;
}
-:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-icon,
-:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+.toolbarbutton-1 > .toolbarbutton-icon,
+.toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
max-width: 16px;
}
#TabsToolbar .toolbarbutton-1,
.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
margin: 0 0 var(--tab-toolbar-navbar-overlap);
}
-#TabsToolbar .toolbarbutton-1,
.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
-moz-appearance: none;
padding: 0;
min-width: 26px;
border: 1px solid transparent;
border-bottom-style: none;
border-radius: var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0 0;
@@ -84,120 +83,117 @@ toolbar[brighttext] {
background-color: Highlight;
}
.findbar-button {
-moz-appearance: none;
padding: 0;
}
-#nav-bar .toolbarbutton-1 {
+toolbar .toolbarbutton-1 {
-moz-appearance: none;
margin: 0;
padding: 0 2px;
-moz-box-pack: center;
}
-#nav-bar #PanelUI-menu-button {
+#PanelUI-menu-button {
padding-inline-start: 5px;
padding-inline-end: 5px;
}
-#nav-bar .toolbarbutton-1 > menupopup {
+toolbar .toolbarbutton-1 > menupopup {
margin-top: -3px;
}
-#nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
+toolbar .toolbarbutton-1 > menupopup.cui-widget-panel {
margin-top: -8px;
}
.findbar-button > .toolbarbutton-text,
toolbarbutton.bookmark-item:not(.subviewbutton),
-#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
-#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack {
+toolbar .toolbarbutton-1 > .toolbarbutton-icon,
+toolbar .toolbarbutton-1 > .toolbarbutton-text,
+toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
padding: var(--toolbarbutton-inner-padding);
border-radius: var(--toolbarbutton-border-radius);
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
}
-#nav-bar .toolbarbutton-1 > .toolbarbutton-icon {
+toolbar .toolbarbutton-1 > .toolbarbutton-icon {
/* horizontal padding + actual icon width */
max-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
}
.bookmark-item > .toolbarbutton-menu-dropmarker,
-#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
-#nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
+toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
display: none;
}
-#nav-bar .toolbarbutton-1 > .toolbarbutton-text {
+toolbar .toolbarbutton-1 > .toolbarbutton-text {
padding-top: var(--toolbarbutton-vertical-text-padding);
padding-bottom: 0;
/* To make the hover feedback line up with sibling buttons, it needs the same
* height as the button icons and the same vertical padding, but as a minimum,
* because otherwise an increase in text sizes would break things.
*/
min-height: calc(16px + 2 * var(--toolbarbutton-inner-padding));
}
-#nav-bar .toolbaritem-combined-buttons {
+toolbar .toolbaritem-combined-buttons {
margin-left: 2px;
margin-right: 2px;
}
-#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
+toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
padding-left: 0;
padding-right: 0;
}
-#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator {
+toolbar .toolbaritem-combined-buttons:not(:hover) > separator {
content: "";
display: -moz-box;
width: 1px;
height: 16px;
margin-inline-end: -1px;
background-image: linear-gradient(currentColor 0, currentColor 100%);
background-position: center;
background-repeat: no-repeat;
background-size: 1px 16px;
opacity: .2;
}
-#nav-bar[brighttext] .toolbaritem-combined-buttons > separator {
+toolbar[brighttext] .toolbaritem-combined-buttons > separator {
opacity: .3;
}
-#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
-#TabsToolbar .toolbarbutton-1[open],
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover,
.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]),
-#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
-#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack {
+toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
+toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
+toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack {
background-color: var(--toolbarbutton-hover-background);
color: inherit;
}
.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),
toolbarbutton.bookmark-item[open="true"],
-#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
-#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
+toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
+toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
+toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
background-color: var(--toolbarbutton-active-background);
transition-duration: 10ms;
color: inherit;
}
-#nav-bar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
+toolbar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
background-color: var(--toolbarbutton-hover-background);
transition: background-color .4s;
}
:root:not([uidensity=compact]) #back-button {
padding-top: 3px;
padding-bottom: 3px;
padding-inline-start: 5px !important;
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1057,38 +1057,16 @@ treechildren.searchbar-treebody::-moz-tr
}
/* All tabs menupopup */
.alltabs-item[selected="true"] {
font-weight: bold;
}
-
-toolbarbutton.chevron {
- list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
-}
-
-toolbar[brighttext] toolbarbutton.chevron {
- list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
-}
-
-toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon {
- transform: scaleX(-1);
-}
-
-toolbarbutton.chevron > .toolbarbutton-text,
-toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
- display: none;
-}
-
-toolbarbutton.chevron > .toolbarbutton-icon {
- margin: 0;
-}
-
/* Bookmarks toolbar */
#PlacesToolbarDropIndicator {
list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
}
toolbarbutton.bookmark-item[dragover="true"][open="true"] {
-moz-appearance: none;
background: Highlight !important;
deleted file mode 100644
index 8ad164baaf7d205f16d7d7742d2fdd09caf71efc..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 4327a1a4570208a46553b392fc840c649cfbbbc3..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index b2d31e38f56dda9807001c84e1d2bc31ced0eb0e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index dd91178030e5f6b315f642909617cce898cdfb7d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -70,20 +70,16 @@ toolkit.jar:
skin/classic/global/dirListing/dirListing.css (dirListing/dirListing.css)
skin/classic/global/dirListing/folder.png (dirListing/folder.png)
skin/classic/global/dirListing/up.png (dirListing/up.png)
skin/classic/global/icons/autocomplete-dropmarker.png (icons/autocomplete-dropmarker.png)
skin/classic/global/icons/autocomplete-search.svg (icons/autocomplete-search.svg)
skin/classic/global/icons/autoscroll.png (icons/autoscroll.png)
skin/classic/global/icons/blacklist_favicon.png (icons/blacklist_favicon.png)
skin/classic/global/icons/blacklist_64.png (icons/blacklist_64.png)
- skin/classic/global/icons/chevron.png (icons/chevron.png)
- skin/classic/global/icons/chevron-inverted.png (icons/chevron-inverted.png)
- skin/classic/global/icons/chevron@2x.png (icons/chevron@2x.png)
- skin/classic/global/icons/chevron-inverted@2x.png (icons/chevron-inverted@2x.png)
skin/classic/global/icons/glyph-dropdown.png (icons/glyph-dropdown.png)
skin/classic/global/icons/glyph-dropdown@2x.png (icons/glyph-dropdown@2x.png)
skin/classic/global/icons/menulist-dropmarker.png (icons/menulist-dropmarker.png)
skin/classic/global/icons/notfound.png (icons/notfound.png)
skin/classic/global/icons/panebutton-active.png (icons/panebutton-active.png)
skin/classic/global/icons/panebutton-inactive.png (icons/panebutton-inactive.png)
skin/classic/global/icons/panel-dropmarker.png (icons/panel-dropmarker.png)
skin/classic/global/icons/resizer.png (icons/resizer.png)
--- a/toolkit/themes/shared/non-mac.jar.inc.mn
+++ b/toolkit/themes/shared/non-mac.jar.inc.mn
@@ -46,18 +46,16 @@
skin/classic/global/icons/warning-16.png (../../windows/global/icons/warning-16.png)
skin/classic/global/icons/warning-64.png (../../windows/global/icons/warning-64.png)
skin/classic/global/radio/radio-check.gif (../../windows/global/radio/radio-check.gif)
skin/classic/global/radio/radio-check-dis.gif (../../windows/global/radio/radio-check-dis.gif)
skin/classic/global/splitter/grip-bottom.gif (../../windows/global/splitter/grip-bottom.gif)
skin/classic/global/splitter/grip-top.gif (../../windows/global/splitter/grip-top.gif)
skin/classic/global/splitter/grip-left.gif (../../windows/global/splitter/grip-left.gif)
skin/classic/global/splitter/grip-right.gif (../../windows/global/splitter/grip-right.gif)
- skin/classic/global/toolbar/chevron.gif (../../windows/global/toolbar/chevron.gif)
- skin/classic/global/toolbar/chevron-inverted.png (../../windows/global/toolbar/chevron-inverted.png)
skin/classic/global/tree/columnpicker.gif (../../windows/global/tree/columnpicker.gif)
skin/classic/global/tree/sort-asc.png (../../windows/global/tree/sort-asc.png)
skin/classic/global/tree/sort-dsc.png (../../windows/global/tree/sort-dsc.png)
skin/classic/global/tree/sort-asc-classic.png (../../windows/global/tree/sort-asc-classic.png)
skin/classic/global/tree/sort-dsc-classic.png (../../windows/global/tree/sort-dsc-classic.png)
skin/classic/mozapps/downloads/downloadButtons.png (../../windows/mozapps/downloads/downloadButtons.png)
skin/classic/mozapps/downloads/unknownContentType.css (../../windows/mozapps/downloads/unknownContentType.css)
deleted file mode 100644
index 861e41a8121442012833210ea9eea68effb57813..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index cccba6e43f95bfaadd029eddd0d2d5b5da61ab6f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001