Bug 610080 - Border effect for tab overflow. [hardblocker] r=dao ui-r=faaborg a=blocking2.0final

This commit is contained in:
Frank Yan 2011-02-09 10:25:54 -08:00
parent 666d6bdd8b
commit af2ca06423
9 changed files with 98 additions and 29 deletions

View File

@ -1555,14 +1555,20 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
}
/* Tabbrowser arrowscrollbox arrows */
.tabbrowser-arrowscrollbox > .scrollbutton-up {
-moz-appearance: tab-scroll-arrow-back;
.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
-moz-appearance: none;
margin: 0;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up {
-moz-border-start: 0;
-moz-border-end: 2px solid transparent;
}
.tabbrowser-arrowscrollbox > .scrollbutton-down {
-moz-appearance: tab-scroll-arrow-forward;
margin: 0;
-moz-border-start: 2px solid transparent;
-moz-border-end: 0;
-moz-transition: 1s box-shadow ease-out;
border-radius: 4px;
}
@ -1572,6 +1578,16 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
-moz-transition: none;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(ltr),
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(rtl) {
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 / 0 2px 0 0;
}
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(ltr),
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(rtl) {
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 / 0 0 0 2px;
}
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {

View File

@ -75,6 +75,7 @@ browser.jar:
skin/classic/browser/tabbrowser/connecting.png (tabbrowser/connecting.png)
skin/classic/browser/tabbrowser/loading.png (tabbrowser/loading.png)
skin/classic/browser/tabbrowser/tab.png (tabbrowser/tab.png)
skin/classic/browser/tabbrowser/tab-overflow-border.png (tabbrowser/tab-overflow-border.png)
skin/classic/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
skin/classic/browser/tabview/edit-light.png (tabview/edit-light.png)
skin/classic/browser/tabview/new-tab.png (tabview/new-tab.png)

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 B

View File

@ -1800,11 +1800,23 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
.tabbrowser-arrowscrollbox > .scrollbutton-down {
-moz-image-region: rect(0, 11px, 17px, 0);
margin: 0;
padding: 0 1px;
padding: 0 4px;
border: none;
}
#tabbrowser-tabs[tabsontop=false] > .tabbrowser-arrowscrollbox > .scrollbutton-up,
#tabbrowser-tabs[tabsontop=false] > .tabbrowser-arrowscrollbox > .scrollbutton-down,
#tabbrowser-tabs[tabsontop=false] > .tabbrowser-arrowscrollbox > .scrollbutton-up > .toolbarbutton-icon,
#tabbrowser-tabs[tabsontop=false] > .tabbrowser-arrowscrollbox > .scrollbutton-down > .toolbarbutton-icon {
-moz-transform: scaleY(-1);
}
.tabbrowser-arrowscrollbox > .scrollbutton-up {
-moz-border-end: 2px solid transparent;
}
.tabbrowser-arrowscrollbox > .scrollbutton-down {
-moz-border-start: 2px solid transparent;
-moz-transition: 1s background-color ease-out;
}
@ -1833,11 +1845,20 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
-moz-image-region: rect(0, 44px, 17px, 33px);
}
.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled="true"],
.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled="true"] {
.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
-moz-image-region: rect(0, 33px, 17px, 22px) !important;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(ltr),
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(rtl) {
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 / 0 2px 0 0;
}
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(ltr),
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(rtl) {
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 / 0 0 0 2px;
}
/**
* Tabstrip & add-on bar toolbar buttons
@ -1862,16 +1883,16 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
padding: 0 1px;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled="true"]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled="true"]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover,
:-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1:not([type="menu-button"]):not([disabled]):not([open]):hover,
:-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover,
:-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1:not([disabled]):not([buttonover]):hover > .toolbarbutton-menubutton-dropmarker {
background-image: -moz-linear-gradient(transparent, rgba(0,0,0,.15)) !important;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled="true"]):hover:active,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled="true"]):hover:active,
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover:active,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover:active,
:-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1:not([type="menu-button"]):not([disabled]):hover:active,
:-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1[type="menu"][open],
:-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover:active,

View File

@ -114,6 +114,7 @@ browser.jar:
skin/classic/browser/tabbrowser/tab-top-normal-active.png (tabbrowser/tab-top-normal-active.png)
skin/classic/browser/tabbrowser/tab-top-hover-active.png (tabbrowser/tab-top-hover-active.png)
skin/classic/browser/tabbrowser/tab-top-selected-active.png (tabbrowser/tab-top-selected-active.png)
skin/classic/browser/tabbrowser/tab-overflow-border.png (tabbrowser/tab-overflow-border.png)
skin/classic/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
skin/classic/browser/tabview/edit-light.png (tabview/edit-light.png)
skin/classic/browser/tabview/new-tab.png (tabview/new-tab.png)

Binary file not shown.

After

Width:  |  Height:  |  Size: 184 B

View File

@ -1681,13 +1681,13 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
padding-bottom: 0;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled="true"],
.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled="true"] {
.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
opacity: .4;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled="true"]):hover:active,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled="true"]):hover:active {
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover:active,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover:active {
-moz-image-region: rect(0, 30px, 17px, 15px);
}
@ -1705,6 +1705,34 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
-moz-transition: none;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):not(:hover):-moz-locale-dir(ltr),
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):not(:hover):-moz-locale-dir(rtl) {
-moz-appearance: none;
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 / 0 2px 0 0;
padding-right: 1px;
}
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):not(:hover):-moz-locale-dir(ltr),
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):not(:hover):-moz-locale-dir(rtl) {
-moz-appearance: none;
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 / 0 0 0 2px;
padding-left: 1px;
}
@media all and (-moz-windows-classic) {
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):not(:hover):-moz-locale-dir(ltr),
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):not(:hover):-moz-locale-dir(rtl) {
padding-left: 4px;
padding-right: 2px;
}
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):not(:hover):-moz-locale-dir(ltr),
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):not(:hover):-moz-locale-dir(rtl) {
padding-left: 2px;
padding-right: 4px;
}
}
.tabs-newtab-button > .toolbarbutton-icon {
margin-top: -1px;
margin-bottom: -1px;

View File

@ -85,13 +85,14 @@ browser.jar:
skin/classic/browser/preferences/saveFile.png (preferences/saveFile.png)
* skin/classic/browser/preferences/preferences.css (preferences/preferences.css)
skin/classic/browser/preferences/applications.css (preferences/applications.css)
skin/classic/browser/tabbrowser/alltabs.png (tabbrowser/alltabs.png)
skin/classic/browser/tabbrowser/newtab.png (tabbrowser/newtab.png)
skin/classic/browser/tabbrowser/connecting.png (tabbrowser/connecting.png)
skin/classic/browser/tabbrowser/loading.png (tabbrowser/loading.png)
skin/classic/browser/tabbrowser/tab.png (tabbrowser/tab.png)
skin/classic/browser/tabbrowser/tab-arrow-left.png (tabbrowser/tab-arrow-left.png)
skin/classic/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
skin/classic/browser/tabbrowser/alltabs.png (tabbrowser/alltabs.png)
skin/classic/browser/tabbrowser/newtab.png (tabbrowser/newtab.png)
skin/classic/browser/tabbrowser/connecting.png (tabbrowser/connecting.png)
skin/classic/browser/tabbrowser/loading.png (tabbrowser/loading.png)
skin/classic/browser/tabbrowser/tab.png (tabbrowser/tab.png)
skin/classic/browser/tabbrowser/tab-arrow-left.png (tabbrowser/tab-arrow-left.png)
skin/classic/browser/tabbrowser/tab-overflow-border.png (tabbrowser/tab-overflow-border.png)
skin/classic/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
skin/classic/browser/tabview/edit-light.png (tabview/edit-light.png)
skin/classic/browser/tabview/grain.png (tabview/grain.png)
skin/classic/browser/tabview/new-tab.png (tabview/new-tab.png)
@ -198,13 +199,14 @@ browser.jar:
skin/classic/aero/browser/preferences/saveFile.png (preferences/saveFile-aero.png)
* skin/classic/aero/browser/preferences/preferences.css (preferences/preferences.css)
skin/classic/aero/browser/preferences/applications.css (preferences/applications.css)
skin/classic/aero/browser/tabbrowser/alltabs.png (tabbrowser/alltabs.png)
skin/classic/aero/browser/tabbrowser/newtab.png (tabbrowser/newtab.png)
skin/classic/aero/browser/tabbrowser/connecting.png (tabbrowser/connecting.png)
skin/classic/aero/browser/tabbrowser/loading.png (tabbrowser/loading.png)
skin/classic/aero/browser/tabbrowser/tab.png (tabbrowser/tab.png)
skin/classic/aero/browser/tabbrowser/tab-arrow-left.png (tabbrowser/tab-arrow-left.png)
skin/classic/aero/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
skin/classic/aero/browser/tabbrowser/alltabs.png (tabbrowser/alltabs.png)
skin/classic/aero/browser/tabbrowser/newtab.png (tabbrowser/newtab.png)
skin/classic/aero/browser/tabbrowser/connecting.png (tabbrowser/connecting.png)
skin/classic/aero/browser/tabbrowser/loading.png (tabbrowser/loading.png)
skin/classic/aero/browser/tabbrowser/tab.png (tabbrowser/tab.png)
skin/classic/aero/browser/tabbrowser/tab-arrow-left.png (tabbrowser/tab-arrow-left.png)
skin/classic/aero/browser/tabbrowser/tab-overflow-border.png (tabbrowser/tab-overflow-border.png)
skin/classic/aero/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
skin/classic/aero/browser/tabview/edit-light.png (tabview/edit-light.png)
skin/classic/aero/browser/tabview/grain.png (tabview/grain.png)
skin/classic/aero/browser/tabview/new-tab.png (tabview/new-tab.png)

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 B