wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 994280 - Improve badged button for Australis. r=enn

Browse Source 
- moved badged button XBL from browser to toolkit
 - made the XBL applied by CSS class instead of button's type
 - added australis look & feel to badged button
 - fixed OS X badge position
This commit is contained in:
mferretti@mozilla.com 2014-10-02 11:52:50 +01:00
parent f41db250b3
commit aa208d3233
12 changed files with 158 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
browser/base/content/browser.css
View File

@ -829,23 +829,15 @@ html|*#gcli-output-frame,
transition: none;
}
.toolbarbutton-badge[badge]:not([badge=""])::after {
content: attr(badge);
}
toolbarbutton[type="badged"] {
-moz-binding: url("chrome://browser/content/urlbarBindings.xml#toolbarbutton-badged");
}
toolbarbutton[type="socialmark"] {
-moz-binding: url("chrome://browser/content/socialmarks.xml#toolbarbutton-marks");
}
toolbarbutton[type="badged"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
toolbarbutton.badged-button > .toolbarbutton-badge-container > .toolbarbutton-icon,
toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
max-width: 16px;
}
toolbarpaletteitem[place="palette"] > toolbarbutton[type="badged"] > .toolbarbutton-badge-container > .toolbarbutton-icon {
toolbarpaletteitem[place="palette"] > toolbarbutton.badged-button > .toolbarbutton-badge-container > .toolbarbutton-icon {
max-width: 32px;
}

16
browser/base/content/urlbarBindings.xml
View File

@ -2581,20 +2581,4 @@
</method>
</implementation>
</binding>
<binding id="toolbarbutton-badged" display="xul:button"
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:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label"/>
</xul:hbox>
<xul:label class="toolbarbutton-text" crop="right" flex="1"
xbl:inherits="value=label,accesskey,crop,wrap"/>
<xul:label class="toolbarbutton-multiline-text" flex="1"
xbl:inherits="xbl:text=label,accesskey,wrap"/>
</content>
</binding>
</bindings>

2
browser/components/customizableui/CustomizableWidgets.jsm
View File

@ -915,7 +915,7 @@ const CustomizableWidgets = [
node.setAttribute("id", this.id);
node.classList.add("toolbarbutton-1");
node.classList.add("chromeclass-toolbar-additional");
node.setAttribute("type", "badged");
node.classList.add("badged-button");
node.setAttribute("label", CustomizableUI.getLocalizedProperty(this, "label"));
node.setAttribute("tooltiptext", CustomizableUI.getLocalizedProperty(this, "tooltiptext"));
node.setAttribute("removable", "true");

3
browser/modules/Social.jsm
View File

@ -271,8 +271,7 @@ function CreateSocialStatusWidget(aId, aProvider) {
onBuild: function(aDocument) {
let node = aDocument.createElement('toolbarbutton');
node.id = this.id;
node.setAttribute('class', 'toolbarbutton-1 chromeclass-toolbar-additional social-status-button');
node.setAttribute('type', "badged");
node.setAttribute('class', 'toolbarbutton-1 chromeclass-toolbar-additional social-status-button badged-button');
node.style.listStyleImage = "url(" + (aProvider.icon32URL || aProvider.iconURL) + ")";
node.setAttribute("origin", aProvider.origin);
node.setAttribute("label", aProvider.name);

31
browser/themes/linux/browser.css
View File

@ -565,7 +565,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
padding: 3px 7px;
}
toolbarbutton[type="badged"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
toolbarbutton.badged-button > .toolbarbutton-badge-container > .toolbarbutton-icon,
toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
max-width: 32px !important;
}
@ -2077,35 +2077,6 @@ toolbarbutton.chevron > .toolbarbutton-icon {
display: none;
}
.toolbarbutton-badge-container {
margin: 5px 3px;
position: relative;
}
toolbar[iconsize="small"] .toolbarbutton-badge-container {
margin: 0;
}
.toolbarbutton-badge[badge]:not([badge=""])::after {
/* The |content| property is set in the content stylesheet. */
font-size: 9px;
font-weight: bold;
padding: 0 1px;
color: #fff;
background-color: rgb(240,61,37);
border: 1px solid rgb(216,55,34);
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0,39,121,0.77);
position: absolute;
top: 0;
right: 0;
}
.toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
left: 2px;
right: auto;
}
.popup-notification-icon[popupid="servicesInstall"] {
list-style-image: url(chrome://browser/skin/social/services-64.png);
}

42
browser/themes/osx/browser.css
View File

@ -4419,48 +4419,6 @@ menulist.translate-infobar-element > .menulist-dropmarker {
display: none;
}
.toolbarbutton-badge-container {
margin: 0;
padding: 0;
position: relative;
}
.toolbarbutton-badge[badge]:not([badge=""]) {
/* The |content| property is set in the content stylesheet. */
font-size: 9px;
font-weight: bold;
padding: 0 1px;
color: #fff;
background-color: rgb(240,61,37);
border: 1px solid rgb(216,55,34);
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0,39,121,0.77);
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.toolbarbutton-badge[badge]:not([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[badge]:not([badge=""]):-moz-locale-dir(rtl) {
left: 0;
right: auto;
}
toolbar[mode="icons"] > *|* > .toolbarbutton-badge[badge]:not([badge=""]) {
right: -2px;
}
toolbar[mode="icons"] > *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl) {
left: -2px;
}
.popup-notification-icon[popupid="servicesInstall"] {
list-style-image: url(chrome://browser/skin/social/services-64.png);
}

53
browser/themes/windows/browser.css
View File

@ -2699,59 +2699,6 @@ toolbarpaletteitem[place="palette"] > #switch-to-metro-button {
list-style-image: url(chrome://browser/skin/Metro_Glyph-menuPanel.png);
}
.toolbarbutton-badge-container {
margin: 0;
padding: 0;
position: relative;
}
#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
padding: 2px 5px;
}
.toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
position: absolute;
top: 2px;
right: 2px;
}
.toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
-moz-margin-end: 0;
}
.toolbarbutton-badge[badge=""] {
display: none;
}
.toolbarbutton-badge[badge]:not([badge=""])::after {
/* The |content| property is set in the content stylesheet. */
font-size: 9px;
font-weight: bold;
padding: 0 1px;
color: #fff;
background-color: rgb(240,61,37);
border: 1px solid rgb(216,55,34);
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0,39,121,0.77);
position: absolute;
top: 0;
right: 0;
}
#nav-bar .toolbarbutton-badge[badge]:not([badge=""])::after {
top: 1px;
right: 1px;
}
.toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
left: 0;
right: auto;
}
#nav-bar .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
left: 1px;
right: auto;
}
.popup-notification-icon[popupid="servicesInstall"] {
list-style-image: url(chrome://browser/skin/social/services-64.png);
}

25
toolkit/content/widgets/toolbarbutton.xml
View File

@ -14,7 +14,7 @@
<resources>
<stylesheet src="chrome://global/skin/toolbarbutton.css"/>
</resources>
<content>
<children includes="observes|template|menupopup|panel|tooltip"/>
<xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label,consumeanchor"/>
@ -25,7 +25,7 @@
</content>
</binding>
<binding id="menu" display="xul:menu"
<binding id="menu" display="xul:menu"
extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
<content>
<children includes="observes|template|menupopup|panel|tooltip"/>
@ -38,7 +38,7 @@
class="toolbarbutton-menu-dropmarker" xbl:inherits="disabled,label"/>
</content>
</binding>
<binding id="menu-vertical" display="xul:menu"
extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
<content>
@ -56,8 +56,8 @@
</xul:hbox>
</content>
</binding>
<binding id="menu-button" display="xul:menu"
<binding id="menu-button" display="xul:menu"
extends="chrome://global/content/bindings/button.xml#menu-button-base">
<resources>
<stylesheet src="chrome://global/skin/toolbarbutton.css"/>
@ -80,4 +80,19 @@
<xul:image class="toolbarbutton-icon" xbl:inherits="src=image"/>
</content>
</binding>
<binding id="toolbarbutton-badged"
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:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label"/>
</xul:hbox>
<xul:label class="toolbarbutton-text" crop="right" flex="1"
xbl:inherits="value=label,accesskey,crop,wrap"/>
<xul:label class="toolbarbutton-multiline-text" flex="1"
xbl:inherits="xbl:text=label,accesskey,wrap"/>
</content>
</binding>
</bindings>

8
toolkit/content/xul.css
View File

@ -138,6 +138,14 @@ toolbarbutton[type="menu-button"] {
-moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#menu-button");
}
toolbarbutton.badged-button {
-moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-badged");
}
toolbarbutton.badged-button .toolbarbutton-badge[badge]:not([badge=""])::after {
content: attr(badge);
}
toolbar[mode="icons"] .toolbarbutton-text,
toolbar[mode="icons"] .toolbarbutton-multiline-text,
toolbar[mode="text"] .toolbarbutton-icon {

34
toolkit/themes/linux/global/toolbarbutton.css
View File

@ -105,6 +105,40 @@ toolbarbutton[type="menu-button"][disabled="true"]:hover:active {
-moz-box-orient: vertical;
}
/* ::::: toolbarbutton badged ::::: */
.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;
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;
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;
}
/* .......... dropmarker .......... */
.toolbarbutton-menubutton-dropmarker {

49
toolkit/themes/osx/global/toolbarbutton.css
View File

@ -76,6 +76,55 @@ toolbarbutton[type="menu-button"][disabled="true"]:hover:active {
text-shadow: inherit;
}
/* ::::: toolbarbutton badged ::::: */
.toolbarbutton-badge {
background-color: #d90000;
}
.toolbarbutton-badge::after {
/* The |content| property is set in the content stylesheet. */
font-size: 9px;
padding: 1px 2px 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;
min-width: 10px;
line-height: 10px;
text-align: center;
}
.toolbarbutton-badge:-moz-window-inactive::after {
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;
}
/* .......... dropmarker .......... */
.toolbarbutton-menubutton-dropmarker {

42
toolkit/themes/windows/global/toolbarbutton.css
View File

@ -137,6 +137,48 @@ toolbarbutton[type="menu-button"][disabled="true"]:hover:active {
-moz-box-orient: vertical;
}
/* ::::: toolbarbutton badged ::::: */
.toolbarbutton-badge-container > .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;
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;
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;
}
/* .......... dropmarker .......... */
.toolbarbutton-menubutton-dropmarker {