Bug 1361686 - Share bookmark toolbar button styling between platforms. r=dao
MozReview-Commit-ID: 4LA4AXIud8z
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -117,73 +117,16 @@
min-height: 30px;
}
#browser-bottombox {
/* opaque for layers optimization */
background-color: -moz-Dialog;
}
-/* Places toolbar */
-toolbarbutton.bookmark-item:not(.subviewbutton),
-#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
- margin: 0;
- padding: 2px 3px;
-}
-
-toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not(:active):not([open]) {
- color: inherit;
-}
-
-toolbarbutton.bookmark-item:not(.subviewbutton) {
- -moz-appearance: none;
- border: 1px solid transparent;
- border-radius: 2px;
- transition-property: background-color, border-color;
- transition-duration: 150ms;
-}
-
-toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([open]) {
- background: var(--toolbarbutton-hover-background);
- border-color: var(--toolbarbutton-hover-bordercolor);
-}
-
-toolbarbutton.bookmark-item:not(.subviewbutton):hover:active,
-toolbarbutton.bookmark-item[open="true"] {
- background: var(--toolbarbutton-active-background);
- box-shadow: var(--toolbarbutton-active-boxshadow);
- border-color: var(--toolbarbutton-active-bordercolor);
-}
-
-toolbarbutton.bookmark-item:not(.subviewbutton):hover:-moz-lwtheme {
- background: var(--toolbarbutton-hover-background);
- border-color: var(--toolbarbutton-hover-bordercolor);
-}
-
-.bookmark-item > .toolbarbutton-icon,
-#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
- width: 16px;
- height: 16px;
-}
-
-/* Force the display of the label for bookmarks */
-.bookmark-item > .toolbarbutton-text,
-#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
- display: -moz-box !important;
-}
-
-.bookmark-item > .toolbarbutton-menu-dropmarker {
- display: none;
-}
-
-/* Dropmarker for folder bookmarks */
-.bookmark-item[container] > .toolbarbutton-menu-dropmarker {
- display: -moz-box !important;
-}
-
#bookmarks-toolbar-placeholder {
list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
}
toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
}
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -308,94 +308,21 @@ toolbarbutton.chevron:-moz-locale-dir(rt
toolbarbutton.chevron > .toolbarbutton-icon {
width: 13px;
}
}
/* ----- BOOKMARK BUTTONS ----- */
-toolbarbutton.bookmark-item:not(.subviewbutton),
-#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
- border: 0;
- border-radius: 10000px;
- padding: 1px 8px;
- margin: 0 0 1px;
-}
-
-#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
- -moz-box-orient: horizontal;
-}
-
.bookmark-item > .toolbarbutton-menu-dropmarker {
- list-style-image: url("chrome://browser/skin/places/folderDropArrow.png");
- -moz-image-region: rect(0, 7px, 5px, 0);
+ list-style-image: url("chrome://browser/skin/places/arrow-down.svg");
+ fill: currentColor;
margin-top: 1px;
margin-inline-start: 3px;
- margin-inline-end: -2px;
-}
-
-@media (min-resolution: 2dppx) {
- .bookmark-item > .toolbarbutton-menu-dropmarker {
- list-style-image: url("chrome://browser/skin/places/folderDropArrow@2x.png");
- -moz-image-region: rect(0, 14px, 10px, 0);
- }
-
- .bookmark-item > .toolbarbutton-menu-dropmarker > .dropmarker-icon {
- width: 7px;
- }
-}
-
-.bookmark-item > .toolbarbutton-text,
-#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
- display: -moz-box !important; /* Force the display of the label for bookmarks */
-}
-
-toolbarbutton.bookmark-item:not(.subviewbutton):hover {
- background-color: rgba(0, 0, 0, .205);
-}
-
-toolbarbutton.bookmark-item:hover:not(.subviewbutton),
-toolbarbutton.bookmark-item[open="true"]:not(.subviewbutton) {
- color: #FFF !important;
- text-shadow: 0 1px rgba(0, 0, 0, .4) !important;
-}
-
-.bookmark-item:hover > .toolbarbutton-menu-dropmarker,
-.bookmark-item[open="true"] > .toolbarbutton-menu-dropmarker {
- -moz-image-region: rect(5px, 7px, 10px, 0);
-}
-
-@media (min-resolution: 2dppx) {
- .bookmark-item:hover > .toolbarbutton-menu-dropmarker,
- .bookmark-item[open="true"] > .toolbarbutton-menu-dropmarker {
- -moz-image-region: rect(10px, 14px, 20px, 0);
- }
-}
-
-toolbarbutton.bookmark-item:not(.subviewbutton):active:hover,
-toolbarbutton.bookmark-item:not(.subviewbutton)[open="true"] {
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.4);
- background-color: rgba(0, 0, 0, .5);
-}
-
-toolbarbutton.bookmark-item > menupopup {
- margin-inline-start: 3px;
-}
-
-.bookmark-item > .toolbarbutton-icon,
-#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
- width: 16px;
- min-height: 16px;
- max-height: 16px;
-}
-
-.bookmark-item > .toolbarbutton-icon[label]:not([label=""]),
-.bookmark-item > .toolbarbutton-icon[type="menu"] {
- margin-inline-end: 5px;
}
.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");
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -82,18 +82,16 @@ browser.jar:
skin/classic/browser/places/bookmarksToolbar.png (places/bookmarksToolbar.png)
skin/classic/browser/places/bookmarksToolbar@2x.png (places/bookmarksToolbar@2x.png)
skin/classic/browser/places/bookmarksToolbar-menuPanel.png (places/bookmarksToolbar-menuPanel.png)
skin/classic/browser/places/bookmarksToolbar-menuPanel@2x.png (places/bookmarksToolbar-menuPanel@2x.png)
skin/classic/browser/places/history.png (places/history.png)
skin/classic/browser/places/history@2x.png (places/history@2x.png)
skin/classic/browser/places/toolbar.png (places/toolbar.png)
skin/classic/browser/places/toolbarDropMarker.png (places/toolbarDropMarker.png)
- skin/classic/browser/places/folderDropArrow.png (places/folderDropArrow.png)
- skin/classic/browser/places/folderDropArrow@2x.png (places/folderDropArrow@2x.png)
skin/classic/browser/places/editBookmarkOverlay.css (places/editBookmarkOverlay.css)
skin/classic/browser/places/starred48.png (places/starred48.png)
skin/classic/browser/places/starred48@2x.png (places/starred48@2x.png)
skin/classic/browser/places/unstarred48.png (places/unstarred48.png)
skin/classic/browser/places/unfiledBookmarks.png (places/unfiledBookmarks.png)
skin/classic/browser/places/unfiledBookmarks@2x.png (places/unfiledBookmarks@2x.png)
skin/classic/browser/places/tag.png (places/tag.png)
skin/classic/browser/places/tag@2x.png (places/tag@2x.png)
deleted file mode 100644
index 8d722ccd5e6e62e89c00097c32d17ace829e4d0a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 9efb6d95d8b33ac99aa364126b568b954fe01960..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -170,16 +170,19 @@
skin/classic/browser/welcome-back.svg (../shared/incontent-icons/welcome-back.svg)
skin/classic/browser/readerMode.svg (../shared/reader/readerMode.svg)
skin/classic/browser/panic-panel/header.png (../shared/panic-panel/header.png)
skin/classic/browser/panic-panel/header@2x.png (../shared/panic-panel/header@2x.png)
skin/classic/browser/panic-panel/header-small.png (../shared/panic-panel/header-small.png)
skin/classic/browser/panic-panel/header-small@2x.png (../shared/panic-panel/header-small@2x.png)
skin/classic/browser/panic-panel/icons.png (../shared/panic-panel/icons.png)
skin/classic/browser/panic-panel/icons@2x.png (../shared/panic-panel/icons@2x.png)
+#ifndef XP_LINUX
+ skin/classic/browser/places/arrow-down.svg (../shared/places/arrow-down.svg)
+#endif
skin/classic/browser/places/bookmarks-notification-finish.png (../shared/places/bookmarks-notification-finish.png)
skin/classic/browser/places/bookmarks-notification-finish@2x.png (../shared/places/bookmarks-notification-finish@2x.png)
skin/classic/browser/privatebrowsing/aboutPrivateBrowsing.css (../shared/privatebrowsing/aboutPrivateBrowsing.css)
skin/classic/browser/privatebrowsing/favicon.svg (../shared/privatebrowsing/favicon.svg)
skin/classic/browser/privatebrowsing/private-browsing.svg (../shared/privatebrowsing/private-browsing.svg)
skin/classic/browser/privatebrowsing/tracking-protection-off.svg (../shared/privatebrowsing/tracking-protection-off.svg)
skin/classic/browser/privatebrowsing/tracking-protection.svg (../shared/privatebrowsing/tracking-protection.svg)
skin/classic/browser/compacttheme/loading-inverted.png (../shared/compacttheme/loading-inverted.png)
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/places/arrow-down.svg
@@ -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 xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+ <path fill="context-fill" d="M0 2h8L4 6 0 2z"/>
+</svg>
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -141,16 +141,17 @@ toolbar[brighttext] .toolbarbutton-1 > .
-moz-box-align: center;
margin: 0;
}
%ifndef MOZ_PHOTON_THEME
@conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon,
%endif
.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,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
padding: var(--toolbarbutton-vertical-inner-padding) 7px;
background-origin: padding-box !important;
background-clip: padding-box !important;
@@ -251,32 +252,35 @@ toolbar[brighttext] .toolbarbutton-1 > .
}
#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
#TabsToolbar .toolbarbutton-1[open],
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
.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]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
#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,
%ifndef MOZ_PHOTON_THEME
@conditionalForwardWithUrlbar@ > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon,
%endif
#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
background: var(--toolbarbutton-hover-background);
border-color: var(--toolbarbutton-hover-bordercolor);
box-shadow: var(--toolbarbutton-hover-boxshadow);
}
.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 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
#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 {
background: var(--toolbarbutton-active-background);
border-color: var(--toolbarbutton-active-bordercolor);
box-shadow: var(--toolbarbutton-active-boxshadow);
@@ -391,8 +395,32 @@ toolbar[brighttext] .toolbarbutton-1 > .
}
#BMB_bookmarksPopup[side="left"],
#BMB_bookmarksPopup[side="right"] {
margin-top: -20px;
margin-bottom: -20px;
}
+/* ::::: bookmark buttons ::::: */
+
+toolbarbutton.bookmark-item:not(.subviewbutton) {
+ margin: 0;
+ padding: 2px 3px;
+ -moz-appearance: none;
+}
+
+.bookmark-item > .toolbarbutton-icon,
+#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
+ width: 16px;
+ height: 16px;
+}
+
+/* Force the display of the label for bookmarks */
+.bookmark-item > .toolbarbutton-text,
+#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
+ display: -moz-box !important;
+}
+
+.bookmark-item > .toolbarbutton-icon[label]:not([label=""]),
+.bookmark-item > .toolbarbutton-icon[type="menu"] {
+ margin-inline-end: 5px;
+}
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -366,55 +366,21 @@ toolbar[brighttext] {
@media not all and (-moz-windows-classic) {
#titlebar-min {
margin-inline-end: 2px;
}
}
/* ::::: bookmark buttons ::::: */
-toolbarbutton.bookmark-item:not(.subviewbutton),
-#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
- margin: 0;
- padding: 2px 3px;
- -moz-appearance: none;
- border: 1px solid transparent;
- border-radius: var(--toolbarbutton-border-radius);
- background-origin: padding-box !important;
- background-clip: padding-box !important;
- transition-property: background-color, border-color, box-shadow;
- transition-duration: 150ms;
-}
-
-toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
- border-color: var(--toolbarbutton-hover-bordercolor);
- background: var(--toolbarbutton-hover-background);
-}
-
-toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),
-toolbarbutton.bookmark-item[open="true"] {
- border-color: var(--toolbarbutton-active-bordercolor);
- box-shadow: var(--toolbarbutton-active-boxshadow);
- background: var(--toolbarbutton-active-background);
-}
-
-.bookmark-item > .toolbarbutton-icon,
-#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
- width: 16px;
- height: 16px;
-}
-
-/* Force the display of the label for bookmarks */
-.bookmark-item > .toolbarbutton-text,
-#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
- display: -moz-box !important;
-}
-
.bookmark-item > .toolbarbutton-menu-dropmarker {
- display: none;
+ list-style-image: url("chrome://browser/skin/places/arrow-down.svg");
+ fill: currentColor;
+ margin-top: 1px;
+ margin-inline-start: 3px;
}
#bookmarks-toolbar-placeholder {
list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
}
toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {