зеркало из https://github.com/mozilla/gecko-dev.git
Bug 593967 - Add more elements into tabbrowser tabs for easier stylability. r=gavin
This commit is contained in:
Родитель
2f8514d33f
Коммит
57d89f4ffb
|
@ -37,15 +37,15 @@ tabbrowser {
|
|||
min-width: 1px;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:not([fadein]):not([pinned]) > .tab-text,
|
||||
.tabbrowser-tab:not([fadein]):not([pinned]) > .tab-icon-image,
|
||||
.tabbrowser-tab:not([fadein]):not([pinned]) > .tab-close-button {
|
||||
.tab-label:not([fadein]):not([pinned]),
|
||||
.tab-icon-image:not([fadein]):not([pinned]),
|
||||
.tab-close-button:not([fadein]):not([pinned]) {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab > .tab-text,
|
||||
.tabbrowser-tab > .tab-icon-image,
|
||||
.tabbrowser-tab > .tab-close-button {
|
||||
.tab-label,
|
||||
.tab-icon-image,
|
||||
.tab-close-button {
|
||||
-moz-transition: opacity .25s;
|
||||
}
|
||||
|
||||
|
@ -54,14 +54,6 @@ tabbrowser {
|
|||
display: block; /* position:fixed already does this (bug 579776), but let's be explicit */
|
||||
}
|
||||
|
||||
.tabbrowser-tab[pinned] > .tab-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[pinned] > .tab-icon-image {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#alltabs-popup {
|
||||
-moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-alltabs-popup");
|
||||
}
|
||||
|
|
|
@ -415,7 +415,7 @@
|
|||
<stack id="allTabs-stack">
|
||||
<vbox id="allTabs-container"><hbox/></vbox>
|
||||
<toolbarbutton id="allTabs-tab-close-button"
|
||||
class="tab-close-button"
|
||||
class="tabs-closebutton"
|
||||
oncommand="allTabs.closeTab(event);"
|
||||
tooltiptext="&closeCmd.label;"
|
||||
style="visibility:hidden"/>
|
||||
|
|
|
@ -11,11 +11,25 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.tabbrowser-tabs:not([closebuttons="noclose"]):not([closebuttons="closeatend"]) > .tabbrowser-tab[selected="true"]:not([pinned]) > .tab-close-button,
|
||||
.tabbrowser-tabs[closebuttons="alltabs"] > .tabbrowser-tab:not([pinned]) > .tab-close-button {
|
||||
.tabbrowser-tabs:not([closebuttons="noclose"]):not([closebuttons="closeatend"]) > * > * > * .tab-close-button:not([pinned])[selected="true"],
|
||||
.tabbrowser-tabs[closebuttons="alltabs"] > * > * > * > .tab-close-button:not([pinned]) {
|
||||
display: -moz-box;
|
||||
}
|
||||
|
||||
.tab-close-button[selected="true"] {
|
||||
/* Make this button focusable so clicking on it will not focus the tab while
|
||||
it's getting closed */
|
||||
-moz-user-focus: normal;
|
||||
}
|
||||
|
||||
.tab-label[pinned] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-stack {
|
||||
vertical-align: middle; /* for pinned tabs */
|
||||
}
|
||||
|
||||
tabpanels {
|
||||
background-color: white;
|
||||
}
|
||||
|
|
|
@ -3329,17 +3329,22 @@
|
|||
</resources>
|
||||
|
||||
<content context="tabContextMenu" closetabtext="&closeTab.label;">
|
||||
<xul:image xbl:inherits="validate,src=image"
|
||||
class="tab-icon-image"
|
||||
role="presentation"/>
|
||||
<xul:label flex="1"
|
||||
xbl:inherits="value=label,crop,accesskey"
|
||||
class="tab-text"
|
||||
role="presentation"/>
|
||||
<xul:toolbarbutton anonid="close-button"
|
||||
tabindex="-1"
|
||||
clickthrough="never"
|
||||
class="tab-close-button"/>
|
||||
<xul:stack class="tab-stack" flex="1">
|
||||
<xul:hbox class="tab-content" align="center">
|
||||
<xul:image xbl:inherits="validate,src=image,fadein,pinned,busy,stalled,progress,selected"
|
||||
class="tab-icon-image"
|
||||
role="presentation"/>
|
||||
<xul:label flex="1"
|
||||
xbl:inherits="value=label,crop,accesskey,fadein,pinned,selected"
|
||||
class="tab-text tab-label"
|
||||
role="presentation"/>
|
||||
<xul:toolbarbutton anonid="close-button"
|
||||
xbl:inherits="fadein,pinned,selected"
|
||||
tabindex="-1"
|
||||
clickthrough="never"
|
||||
class="tab-close-button"/>
|
||||
</xul:hbox>
|
||||
</xul:stack>
|
||||
</content>
|
||||
|
||||
<implementation>
|
||||
|
|
|
@ -1432,16 +1432,7 @@ statusbarpanel#statusbar-display {
|
|||
min-height: 18px; /* corresponds to the max. height of non-textual tab contents, i.e. the tab close button */
|
||||
}
|
||||
|
||||
.tabbrowser-tab > .tab-text {
|
||||
border: 1px dotted transparent;
|
||||
margin: -1px !important; /* let the border not consume any space, like outline */
|
||||
}
|
||||
|
||||
.tabbrowser-tab:focus > .tab-text {
|
||||
border: 1px dotted -moz-DialogText;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[pinned]:focus > .tab-icon-image {
|
||||
.tabbrowser-tab:focus > .tab-stack {
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
||||
|
@ -1453,41 +1444,41 @@ statusbarpanel#statusbar-display {
|
|||
-moz-image-region: rect(0px, 16px, 16px, 0px);
|
||||
}
|
||||
|
||||
.tabbrowser-tab[pinned] > .tab-icon-image,
|
||||
.tab-icon-image[pinned],
|
||||
.tabs-newtab-button > .toolbarbutton-icon {
|
||||
-moz-margin-start: 2px;
|
||||
-moz-margin-end: 2px;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[busy] > .tab-icon-image {
|
||||
.tab-icon-image[busy] {
|
||||
list-style-image: url("chrome://browser/skin/tabbrowser/progress.png") !important;
|
||||
-moz-image-region: rect(0, 16px, 16px, 0);
|
||||
}
|
||||
.tabbrowser-tab[busy][stalled] > .tab-icon-image {
|
||||
.tab-icon-image[busy][stalled] {
|
||||
list-style-image: url("chrome://browser/skin/tabbrowser/progress-pulsing.png") !important;
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="1"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="1"] {
|
||||
-moz-image-region: rect(0, 32px, 16px, 16px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="2"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="2"] {
|
||||
-moz-image-region: rect(0, 48px, 16px, 32px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="3"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="3"] {
|
||||
-moz-image-region: rect(0, 64px, 16px, 48px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="4"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="4"] {
|
||||
-moz-image-region: rect(0, 80px, 16px, 64px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="5"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="5"] {
|
||||
-moz-image-region: rect(0, 96px, 16px, 80px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="6"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="6"] {
|
||||
-moz-image-region: rect(0, 112px, 16px, 96px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="7"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="7"] {
|
||||
-moz-image-region: rect(0, 128px, 16px, 112px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="8"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="8"] {
|
||||
-moz-image-region: rect(0, 144px, 16px, 128px);
|
||||
}
|
||||
|
||||
|
@ -1531,12 +1522,6 @@ statusbarpanel#statusbar-display {
|
|||
-moz-margin-end: -1px;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[selected="true"] > .tab-close-button {
|
||||
/* Make this button focusable so clicking on it will not focus the tab while
|
||||
it's getting closed */
|
||||
-moz-user-focus: normal;
|
||||
}
|
||||
|
||||
/* Tabstrip new tab button */
|
||||
.tabs-newtab-button,
|
||||
#TabsToolbar > #new-tab-button ,
|
||||
|
|
|
@ -70,7 +70,7 @@
|
|||
.tabbrowser-tab:-moz-lwtheme[selected="true"] {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.tabbrowser-tab:-moz-lwtheme:not([selected="true"]):not(:hover) > .tab-text {
|
||||
.tabbrowser-tab:not(:hover) > * > * > .tab-label:not([selected="true"]):-moz-lwtheme {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
|
@ -1482,43 +1482,43 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
|
|||
list-style-image: url("chrome://global/skin/tree/item.png");
|
||||
}
|
||||
|
||||
.tabbrowser-tab[busy] > .tab-icon-image {
|
||||
.tab-icon-image[busy] {
|
||||
list-style-image: url("chrome://browser/skin/tabbrowser/progress.png") !important;
|
||||
-moz-image-region: rect(0, 16px, 16px, 0);
|
||||
}
|
||||
.tabbrowser-tab[busy][stalled] > .tab-icon-image {
|
||||
.tab-icon-image[busy][stalled] {
|
||||
list-style-image: url("chrome://browser/skin/tabbrowser/progress-pulsing.png") !important;
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="1"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="1"] {
|
||||
-moz-image-region: rect(0, 32px, 16px, 16px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="2"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="2"] {
|
||||
-moz-image-region: rect(0, 48px, 16px, 32px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="3"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="3"] {
|
||||
-moz-image-region: rect(0, 64px, 16px, 48px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="4"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="4"] {
|
||||
-moz-image-region: rect(0, 80px, 16px, 64px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="5"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="5"] {
|
||||
-moz-image-region: rect(0, 96px, 16px, 80px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="6"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="6"] {
|
||||
-moz-image-region: rect(0, 112px, 16px, 96px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="7"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="7"] {
|
||||
-moz-image-region: rect(0, 128px, 16px, 112px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="8"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="8"] {
|
||||
-moz-image-region: rect(0, 144px, 16px, 128px);
|
||||
}
|
||||
|
||||
.tabbrowser-tab:not(:hover):not([selected="true"]) > .tab-icon-image {
|
||||
.tabbrowser-tab:not(:hover) > * > * > .tab-icon-image:not([selected="true"]) {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.tabbrowser-tab > .tab-text {
|
||||
.tab-label {
|
||||
margin-top: 1px;
|
||||
margin-bottom: 0;
|
||||
font: message-box;
|
||||
|
@ -1597,7 +1597,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
|
|||
background-image: -moz-linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.58));
|
||||
}
|
||||
|
||||
.tabbrowser-tab:focus > .tab-text {
|
||||
.tabbrowser-tab:focus > .tab-stack {
|
||||
box-shadow: @focusRingShadow@;
|
||||
}
|
||||
|
||||
|
@ -1680,12 +1680,6 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
|
|||
list-style-image: url("chrome://global/skin/icons/closetab-active.png");
|
||||
}
|
||||
|
||||
.tabbrowser-tab[selected="true"] > .tab-close-button {
|
||||
/* Make this button focusable so clicking on it will not focus the tab while
|
||||
it's getting closed */
|
||||
-moz-user-focus: normal;
|
||||
}
|
||||
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-up,
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-down {
|
||||
-moz-image-region: rect(0, 11px, 17px, 0);
|
||||
|
|
|
@ -1479,35 +1479,35 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
|
|||
background-image: -moz-linear-gradient(rgba(255,0,0,.5), rgba(255,0,0,.5)) !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[busy] > .tab-icon-image {
|
||||
.tab-icon-image[busy] {
|
||||
list-style-image: url("chrome://browser/skin/tabbrowser/progress.png") !important;
|
||||
-moz-image-region: rect(0, 16px, 16px, 0);
|
||||
}
|
||||
.tabbrowser-tab[busy][stalled] > .tab-icon-image {
|
||||
.tab-icon-image[busy][stalled] {
|
||||
list-style-image: url("chrome://browser/skin/tabbrowser/progress-pulsing.png") !important;
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="1"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="1"] {
|
||||
-moz-image-region: rect(0, 32px, 16px, 16px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="2"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="2"] {
|
||||
-moz-image-region: rect(0, 48px, 16px, 32px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="3"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="3"] {
|
||||
-moz-image-region: rect(0, 64px, 16px, 48px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="4"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="4"] {
|
||||
-moz-image-region: rect(0, 80px, 16px, 64px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="5"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="5"] {
|
||||
-moz-image-region: rect(0, 96px, 16px, 80px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="6"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="6"] {
|
||||
-moz-image-region: rect(0, 112px, 16px, 96px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="7"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="7"] {
|
||||
-moz-image-region: rect(0, 128px, 16px, 112px);
|
||||
}
|
||||
.tabbrowser-tab[busy][progress="8"] > .tab-icon-image {
|
||||
.tab-icon-image[busy][progress="8"] {
|
||||
-moz-image-region: rect(0, 144px, 16px, 128px);
|
||||
}
|
||||
|
||||
|
@ -1523,22 +1523,13 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
|
|||
min-height: 16px; /* corresponds to the max. height of non-textual tab contents, i.e. the favicon */
|
||||
}
|
||||
|
||||
.tabbrowser-tab[pinned] > .tab-icon-image {
|
||||
.tab-icon-image[pinned] {
|
||||
-moz-margin-start: 2px;
|
||||
-moz-margin-end: 2px;
|
||||
}
|
||||
|
||||
/* tabbrowser-tab focus ring */
|
||||
.tabbrowser-tab > .tab-text {
|
||||
border: 1px dotted transparent;
|
||||
margin: -1px !important; /* let the border not consume any space, like outline */
|
||||
}
|
||||
|
||||
.tabbrowser-tab:focus > .tab-text {
|
||||
border: 1px dotted -moz-DialogText;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[pinned]:focus > .tab-icon-image {
|
||||
.tabbrowser-tab:focus > .tab-stack {
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
||||
|
@ -1561,20 +1552,17 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
|
|||
}
|
||||
|
||||
.tab-close-button:hover,
|
||||
.tabbrowser-tab[selected="true"] > .tab-close-button:hover {
|
||||
.tab-close-button:hover[selected="true"] {
|
||||
-moz-image-region: rect(0, 32px, 16px, 16px);
|
||||
}
|
||||
|
||||
.tab-close-button:hover:active,
|
||||
.tabbrowser-tab[selected="true"] > .tab-close-button:hover:active {
|
||||
.tab-close-button:hover:active[selected="true"] {
|
||||
-moz-image-region: rect(0, 48px, 16px, 32px);
|
||||
}
|
||||
|
||||
.tabbrowser-tab[selected="true"] > .tab-close-button {
|
||||
.tab-close-button[selected="true"] {
|
||||
-moz-image-region: rect(0, 16px, 16px, 0);
|
||||
/* Make this button focusable so clicking on it will not focus the tab while
|
||||
it's getting closed */
|
||||
-moz-user-focus: normal;
|
||||
}
|
||||
|
||||
.tab-close-button:focus {
|
||||
|
|
Загрузка…
Ссылка в новой задаче