mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1029937 Use superior XUL implementation for badged buttons to avoid reflows r=Gijs
This commit is contained in:
Neil Rashbrook
parent
7c6754946d
commit
454d2c6046
@ -183,9 +183,7 @@ let PanelFrame = {
|
||||
}
|
||||
});
|
||||
|
||||
// in overflow, the anchor is a normal toolbarbutton, in toolbar it is a badge button
|
||||
let anchor = aWindow.document.getAnonymousElementByAttribute(anchorBtn, "class", "toolbarbutton-badge-container") ||
|
||||
aWindow.document.getAnonymousElementByAttribute(anchorBtn, "class", "toolbarbutton-icon");
|
||||
let anchor = aWindow.document.getAnonymousElementByAttribute(anchorBtn, "class", "toolbarbutton-icon");
|
||||
// Bug 849216 - open the popup asynchronously so we avoid the auto-rollup
|
||||
// handling from preventing it being opened in some cases.
|
||||
Services.tm.mainThread.dispatch(function() {
|
||||
|
||||
@ -584,7 +584,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
|
||||
.findbar-button > .toolbarbutton-text,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-container,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon {
|
||||
-moz-margin-end: 0;
|
||||
padding: 2px 6px;
|
||||
@ -595,14 +595,14 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
|
||||
}
|
||||
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
/* Help SDK icons fit: */
|
||||
toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
|
||||
toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-container > .toolbarbutton-icon {
|
||||
toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
@ -620,7 +620,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon {
|
||||
background: var(--toolbarbutton-hover-background);
|
||||
border-width: 1px;
|
||||
@ -638,7 +638,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
|
||||
.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon {
|
||||
background: var(--toolbarbutton-active-background);
|
||||
box-shadow: var(--toolbarbutton-active-boxshadow);
|
||||
|
||||
@ -1067,7 +1067,7 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-ic
|
||||
}
|
||||
|
||||
:-moz-any(@primaryToolbarButtons@) > .toolbarbutton-icon,
|
||||
:-moz-any(@primaryToolbarButtons@) > .toolbarbutton-badge-container > .toolbarbutton-icon,
|
||||
:-moz-any(@primaryToolbarButtons@) > .toolbarbutton-badge-stack > .toolbarbutton-icon,
|
||||
:-moz-any(@primaryToolbarButtons@) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
||||
width: 18px;
|
||||
}
|
||||
@ -1090,25 +1090,25 @@ toolbar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutto
|
||||
|
||||
/* Help SDK icons fit: */
|
||||
toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
|
||||
toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-container > .toolbarbutton-icon {
|
||||
toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
@media (-moz-mac-lion-theme) {
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-menu-dropmarker,
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-menubutton-dropmarker,
|
||||
.toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-icon,
|
||||
.toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-text,
|
||||
.toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-badge-container > .toolbarbutton-icon,
|
||||
.toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-badge-stack > .toolbarbutton-icon,
|
||||
.toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menu-dropmarker,
|
||||
.toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
|
||||
.toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
||||
@ -1116,7 +1116,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
|
||||
}
|
||||
|
||||
#main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon {
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
@ -233,14 +233,14 @@ toolbarpaletteitem[notransition][place="panel"] {
|
||||
}
|
||||
|
||||
toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
|
||||
toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon,
|
||||
toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
|
||||
toolbarpaletteitem > toolbaritem.panel-wide-item,
|
||||
toolbarpaletteitem > toolbarbutton[type="menu-button"] {
|
||||
transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
|
||||
}
|
||||
|
||||
toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
|
||||
toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon {
|
||||
toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
|
||||
@ -312,9 +312,9 @@ toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
|
||||
|
||||
/* Help SDK buttons fit in. */
|
||||
toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
|
||||
toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
|
||||
toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
|
||||
toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
|
||||
toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-container > .toolbarbutton-icon {
|
||||
toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
@ -432,10 +432,10 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it
|
||||
|
||||
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
|
||||
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
|
||||
.customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
.customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
|
||||
.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
|
||||
.panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
|
||||
.customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
|
||||
.panel-customization-placeholder-child > .toolbarbutton-icon {
|
||||
@ -461,8 +461,8 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it
|
||||
/* above we treat the container as the icon for the margins, that is so the
|
||||
/* badge itself is positioned correctly. Here we make sure that the icon itself
|
||||
/* has the minimum size we want, but no padding/margin. */
|
||||
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon,
|
||||
.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
|
||||
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
|
||||
.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
|
||||
@ -191,39 +191,39 @@
|
||||
-moz-image-region: rect(0, 832px, 32px, 800px);
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container,
|
||||
toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"],
|
||||
toolbarpaletteitem[place="palette"] > #loop-button {
|
||||
list-style-image: url(chrome://browser/skin/loop/menuPanel.png);
|
||||
-moz-image-region: rect(0, 32px, 32px, 0);
|
||||
}
|
||||
|
||||
/* Make sure that the state icons are not shown in the customization palette. */
|
||||
toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container {
|
||||
toolbarpaletteitem[place="palette"] > #loop-button {
|
||||
-moz-image-region: rect(0, 32px, 32px, 0) !important;
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container,
|
||||
#loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"][state="disabled"],
|
||||
#loop-button[cui-areatype="menu-panel"][disabled="true"] {
|
||||
-moz-image-region: rect(0, 64px, 32px, 32px);
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
|
||||
-moz-image-region: rect(0, 96px, 32px, 64px);
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
|
||||
-moz-image-region: rect(0, 128px, 32px, 96px);
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
|
||||
-moz-image-region: rect(0, 160px, 32px, 128px);
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
|
||||
-moz-image-region: rect(0, 192px, 32px, 160px);
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
|
||||
-moz-image-region: rect(0, 224px, 32px, 192px);
|
||||
}
|
||||
|
||||
@ -375,39 +375,39 @@
|
||||
-moz-image-region: rect(64px, 1984px, 128px, 1920px);
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container,
|
||||
toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"],
|
||||
toolbarpaletteitem[place="palette"] > #loop-button {
|
||||
list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png);
|
||||
-moz-image-region: rect(0, 64px, 64px, 0);
|
||||
}
|
||||
|
||||
/* Make sure that the state icons are not shown in the customization palette. */
|
||||
toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container {
|
||||
toolbarpaletteitem[place="palette"] > #loop-button {
|
||||
-moz-image-region: rect(0, 64px, 64px, 0) !important;
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container,
|
||||
#loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"][state="disabled"],
|
||||
#loop-button[cui-areatype="menu-panel"][disabled="true"] {
|
||||
-moz-image-region: rect(0, 128px, 64px, 64px);
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
|
||||
-moz-image-region: rect(0, 192px, 64px, 128px);
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
|
||||
-moz-image-region: rect(0, 256px, 64px, 192px);
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
|
||||
-moz-image-region: rect(0, 320px, 64px, 256px);
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
|
||||
-moz-image-region: rect(0, 384px, 64px, 320px);
|
||||
}
|
||||
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
|
||||
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
|
||||
-moz-image-region: rect(0, 448px, 64px, 384px);
|
||||
}
|
||||
|
||||
|
||||
@ -184,37 +184,37 @@ toolbar[brighttext] #sync-button[status="active"] {
|
||||
-moz-image-region: rect(0, 720px, 18px, 702px);
|
||||
}
|
||||
|
||||
#loop-button > .toolbarbutton-badge-container {
|
||||
#loop-button {
|
||||
list-style-image: url(chrome://browser/skin/loop/toolbar.png);
|
||||
-moz-image-region: rect(0, 18px, 18px, 0);
|
||||
}
|
||||
|
||||
toolbar[brighttext] #loop-button > .toolbarbutton-badge-container {
|
||||
toolbar[brighttext] #loop-button {
|
||||
list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png);
|
||||
}
|
||||
|
||||
#loop-button[state="disabled"] > .toolbarbutton-badge-container,
|
||||
#loop-button[disabled="true"] > .toolbarbutton-badge-container {
|
||||
#loop-button[state="disabled"],
|
||||
#loop-button[disabled="true"] {
|
||||
-moz-image-region: rect(0, 36px, 18px, 18px);
|
||||
}
|
||||
|
||||
#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container {
|
||||
#loop-button:not([disabled="true"])[state="error"] {
|
||||
-moz-image-region: rect(0, 54px, 18px, 36px);
|
||||
}
|
||||
|
||||
#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container {
|
||||
#loop-button:not([disabled="true"])[state="action"] {
|
||||
-moz-image-region: rect(0, 72px, 18px, 54px);
|
||||
}
|
||||
|
||||
#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
|
||||
#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
|
||||
-moz-image-region: rect(0, 90px, 18px, 72px);
|
||||
}
|
||||
|
||||
#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container {
|
||||
#loop-button:not([disabled="true"])[state="active"] {
|
||||
-moz-image-region: rect(0, 108px, 18px, 90px);
|
||||
}
|
||||
|
||||
#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
|
||||
#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
|
||||
-moz-image-region: rect(0, 126px, 18px, 108px);
|
||||
}
|
||||
|
||||
@ -430,37 +430,37 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container {
|
||||
%endif
|
||||
}
|
||||
|
||||
#loop-button > .toolbarbutton-badge-container {
|
||||
#loop-button {
|
||||
list-style-image: url("chrome://browser/skin/loop/toolbar@2x.png");
|
||||
-moz-image-region: rect(0, 36px, 36px, 0);
|
||||
}
|
||||
|
||||
toolbar[brighttext] #loop-button > .toolbarbutton-badge-container {
|
||||
toolbar[brighttext] #loop-button {
|
||||
list-style-image: url("chrome://browser/skin/loop/toolbar-inverted@2x.png");
|
||||
}
|
||||
|
||||
#loop-button[state="disabled"] > .toolbarbutton-badge-container,
|
||||
#loop-button[disabled="true"] > .toolbarbutton-badge-container {
|
||||
#loop-button[state="disabled"],
|
||||
#loop-button[disabled="true"] {
|
||||
-moz-image-region: rect(0, 72px, 36px, 36px);
|
||||
}
|
||||
|
||||
#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container {
|
||||
#loop-button:not([disabled="true"])[state="error"] {
|
||||
-moz-image-region: rect(0, 108px, 36px, 72px);
|
||||
}
|
||||
|
||||
#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container {
|
||||
#loop-button:not([disabled="true"])[state="action"] {
|
||||
-moz-image-region: rect(0, 144px, 36px, 108px);
|
||||
}
|
||||
|
||||
#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
|
||||
#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
|
||||
-moz-image-region: rect(0, 180px, 36px, 144px);
|
||||
}
|
||||
|
||||
#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container {
|
||||
#loop-button:not([disabled="true"])[state="active"] {
|
||||
-moz-image-region: rect(0, 216px, 36px, 180px);
|
||||
}
|
||||
|
||||
#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
|
||||
#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
|
||||
-moz-image-region: rect(0, 252px, 36px, 216px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -593,13 +593,13 @@ menuitem.bookmark-item {
|
||||
list-style-image: url("chrome://browser/skin/Toolbar-lunaSilver.png");
|
||||
}
|
||||
|
||||
#loop-button > .toolbarbutton-badge-container {
|
||||
#loop-button {
|
||||
list-style-image: url(chrome://browser/skin/loop/toolbar-lunaSilver.png)
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-windows-theme: luna-silver) and (min-resolution: 1.1dppx) {
|
||||
#loop-button > .toolbarbutton-badge-container {
|
||||
#loop-button {
|
||||
list-style-image: url(chrome://browser/skin/loop/toolbar-lunaSilver@2x.png)
|
||||
}
|
||||
}
|
||||
@ -674,7 +674,7 @@ toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
.findbar-button > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
|
||||
#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,
|
||||
@conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
|
||||
@ -687,7 +687,7 @@ toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
|
||||
toolbarbutton[cui-areatype="toolbar"] > :-moz-any(@nestedButtons@) > .toolbarbutton-icon,
|
||||
:-moz-any(@primaryToolbarButtons@):-moz-any([cui-areatype="toolbar"],:not([cui-areatype])):not(:-moz-any(@nestedButtons@)) > .toolbarbutton-icon,
|
||||
:-moz-any(@primaryToolbarButtons@):-moz-any([cui-areatype="toolbar"],:not([cui-areatype])) > .toolbarbutton-badge-container > .toolbarbutton-icon,
|
||||
:-moz-any(@primaryToolbarButtons@):-moz-any([cui-areatype="toolbar"],:not([cui-areatype])) > .toolbarbutton-badge-stack > .toolbarbutton-icon,
|
||||
:-moz-any(@primaryToolbarButtons@):-moz-any([cui-areatype="toolbar"],:not([cui-areatype])) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
width: 18px;
|
||||
@ -728,7 +728,7 @@ toolbarbutton[cui-areatype="toolbar"] > :-moz-any(@nestedButtons@) > .toolbarbut
|
||||
.findbar-button > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
|
||||
#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 {
|
||||
background-color: hsla(210,32%,93%,0);
|
||||
@ -744,14 +744,14 @@ toolbarbutton[cui-areatype="toolbar"] > :-moz-any(@nestedButtons@) > .toolbarbut
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container,
|
||||
#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
|
||||
#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
||||
padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
|
||||
}
|
||||
|
||||
/* Help SDK icons fit: */
|
||||
toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
|
||||
toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-container > .toolbarbutton-icon {
|
||||
toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
@ -821,7 +821,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
|
||||
#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-container,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
|
||||
@conditionalForwardWithUrlbar@ > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
|
||||
background: var(--toolbarbutton-hover-background);
|
||||
@ -866,7 +866,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
|
||||
#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-container {
|
||||
#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);
|
||||
@ -882,7 +882,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
|
||||
#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
|
||||
#nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
|
||||
text-shadow: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@ -85,10 +85,10 @@
|
||||
extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
|
||||
<content>
|
||||
<children includes="observes|template|menupopup|panel|tooltip"/>
|
||||
<xul:hbox class="toolbarbutton-badge-container" align="start" pack="end">
|
||||
<xul:hbox class="toolbarbutton-badge" xbl:inherits="badge"/>
|
||||
<xul:stack class="toolbarbutton-badge-stack">
|
||||
<xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label"/>
|
||||
</xul:hbox>
|
||||
<xul:label class="toolbarbutton-badge" xbl:inherits="value=badge" top="0" end="0"/>
|
||||
</xul:stack>
|
||||
<xul:label class="toolbarbutton-text" crop="right" flex="1"
|
||||
xbl:inherits="value=label,accesskey,crop,wrap"/>
|
||||
<xul:label class="toolbarbutton-multiline-text" flex="1"
|
||||
@ -100,10 +100,10 @@
|
||||
extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
|
||||
<content>
|
||||
<children includes="observes|template|menupopup|panel|tooltip"/>
|
||||
<xul:hbox class="toolbarbutton-badge-container" align="start" pack="end">
|
||||
<xul:hbox class="toolbarbutton-badge" xbl:inherits="badge"/>
|
||||
<xul:stack class="toolbarbutton-badge-stack">
|
||||
<xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label"/>
|
||||
</xul:hbox>
|
||||
<xul:label class="toolbarbutton-badge" xbl:inherits="value=badge" top="0" end="0"/>
|
||||
</xul:stack>
|
||||
<xul:label class="toolbarbutton-text" crop="right" flex="1"
|
||||
xbl:inherits="value=label,accesskey,crop,dragover-top,wrap"/>
|
||||
<xul:label class="toolbarbutton-multiline-text" flex="1"
|
||||
|
||||
@ -134,8 +134,9 @@ toolbarbutton.badged-button {
|
||||
-moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-badged");
|
||||
}
|
||||
|
||||
.toolbarbutton-badge[badge]:not([badge=""])::after {
|
||||
content: attr(badge);
|
||||
.toolbarbutton-badge:not([value]),
|
||||
.toolbarbutton-badge[value=""] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
toolbarbutton[type="menu"],
|
||||
|
||||
@ -109,34 +109,20 @@ toolbarbutton[type="menu-button"][disabled="true"]:hover:active {
|
||||
|
||||
.toolbarbutton-badge {
|
||||
background-color: #d90000;
|
||||
}
|
||||
|
||||
.toolbarbutton-badge::after {
|
||||
/* The |content| property is set in the content stylesheet. */
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 1px 2px 2px;
|
||||
padding: 1px 2px;
|
||||
color: #fff;
|
||||
background-color: inherit;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset,
|
||||
0 -1px 0 hsla(0, 0%, 0%, .1) inset,
|
||||
0 1px 0 hsla(206, 50%, 10%, .2);
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -2px;
|
||||
margin: -4px 0 0 !important;
|
||||
-moz-margin-end: -2px !important;
|
||||
min-width: 10px;
|
||||
line-height: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toolbarbutton-badge:-moz-locale-dir(rtl)::after {
|
||||
left: -2px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.toolbarbutton-badge-container {
|
||||
position: relative;
|
||||
-moz-stack-sizing: ignore;
|
||||
}
|
||||
|
||||
/* .......... dropmarker .......... */
|
||||
|
||||
@ -80,49 +80,30 @@ toolbarbutton[type="menu-button"][disabled="true"]:hover:active {
|
||||
|
||||
.toolbarbutton-badge {
|
||||
background-color: #d90000;
|
||||
}
|
||||
|
||||
.toolbarbutton-badge::after {
|
||||
/* The |content| property is set in the content stylesheet. */
|
||||
font-size: 9px;
|
||||
padding: 1px 2px 2px;
|
||||
padding: 1px 2px;
|
||||
color: #fff;
|
||||
background-color: inherit;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset,
|
||||
0 -1px 0 hsla(0, 0%, 0%, .1) inset,
|
||||
0 1px 0 hsla(206, 50%, 10%, .2);
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
z-index: 1;
|
||||
margin: -8px 0 0 !important;
|
||||
-moz-margin-end: -8px !important;
|
||||
min-width: 10px;
|
||||
line-height: 10px;
|
||||
text-align: center;
|
||||
-moz-stack-sizing: ignore;
|
||||
}
|
||||
|
||||
.toolbarbutton-badge:-moz-window-inactive::after {
|
||||
.toolbarbutton-badge:-moz-window-inactive {
|
||||
background-color: rgb(230,230,230);
|
||||
box-shadow: none;
|
||||
border: 1px solid rgb(206,206,206);
|
||||
color: rgb(192,192,192);
|
||||
}
|
||||
|
||||
.toolbarbutton-badge:-moz-locale-dir(rtl)::after {
|
||||
left: -8px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
toolbar[mode="icons"] > *|* > .toolbarbutton-badge::after {
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
toolbar[mode="icons"] > *|* > .toolbarbutton-badge:-moz-locale-dir(rtl)::after {
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.toolbarbutton-badge-container {
|
||||
position: relative;
|
||||
toolbar[mode="icons"] > *|* > .toolbarbutton-badge {
|
||||
-moz-margin-end: -10px !important;
|
||||
}
|
||||
|
||||
/* .......... dropmarker .......... */
|
||||
|
||||
@ -146,44 +146,26 @@ toolbarbutton[type="menu-button"][disabled="true"]:hover:active {
|
||||
|
||||
/* ::::: toolbarbutton badged ::::: */
|
||||
|
||||
.toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
|
||||
.toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) {
|
||||
-moz-margin-end: 0;
|
||||
}
|
||||
|
||||
.toolbarbutton-badge[badge=""] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toolbarbutton-badge {
|
||||
background-color: #d90000;
|
||||
}
|
||||
|
||||
.toolbarbutton-badge::after {
|
||||
/* The |content| property is set in the content stylesheet. */
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 1px 2px 2px;
|
||||
padding: 1px 2px;
|
||||
color: #fff;
|
||||
background-color: inherit;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset,
|
||||
0 -1px 0 hsla(0, 0%, 0%, .1) inset,
|
||||
0 1px 0 hsla(206, 50%, 10%, .2);
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -2px;
|
||||
margin: -4px 0 0 !important;
|
||||
-moz-margin-end: -2px !important;
|
||||
min-width: 10px;
|
||||
line-height: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toolbarbutton-badge:-moz-locale-dir(rtl)::after {
|
||||
left: -2px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.toolbarbutton-badge-container {
|
||||
position: relative;
|
||||
-moz-stack-sizing: ignore;
|
||||
}
|
||||
|
||||
/* .......... dropmarker .......... */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user