stonewareslord/treestyletab
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Render narrow scrollbar more correctly, without any side effect like #1072

Browse Source
This commit is contained in:
YUKI Hiroshi 2016-02-18 12:59:29 +09:00
parent cb8dcc4a8c
commit 172df772d3
7 changed files with 38 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
content/treestyletab/treestyletab.xul
View File

@ -12,7 +12,8 @@
<!DOCTYPE overlay SYSTEM "chrome://treestyletab/locale/treestyletab.dtd">
<overlay id="treestyletab-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:svg="http://www.w3.org/2000/svg">
<script src="res/tabsDragUtils.js" type="application/javascript"/>
<script src="treestyletab.js" type="application/javascript"/>
@ -148,6 +149,18 @@
onpopupshown="if ('setConsumeRollupEvent' in this.popupBoxObject) this.popupBoxObject.setConsumeRollupEvent(this.popupBoxObject.ROLLUP_NO_CONSUME || PopupBoxObject.ROLLUP_NO_CONSUME);"
onclick="this.hidePopup();"
onDOMMouseScroll="this.hidePopup()"/>
<svg:svg height="0">
<!--
This is used to clip overflowed boxes. For example, scrollbar
elements with "-moz-appearance" sometimes become larger than
the parent box. This mask clips such a overflowed contents.
-->
<svg:clipPath id="treestyletab-box-clip-path"
clipPathUnits="objectBoundingBox">
<svg:path d="m0,0 V1 H1 V-1 H-1 z"/>
</svg:clipPath>
</svg:svg>
</popupset>
</overlay>

2
defaults/preferences/treestyletab.js
View File

@ -69,8 +69,6 @@ pref("extensions.treestyletab.tabbar.invertScrollbar", true);
*/
pref("extensions.treestyletab.tabbar.narrowScrollbar", true);
pref("extensions.treestyletab.tabbar.narrowScrollbar.width", 10);
pref("extensions.treestyletab.tabbar.narrowScrollbar.resize.default", true);
pref("extensions.treestyletab.tabbar.narrowScrollbar.resize.Windows", false);
/**
* On some environments (ex. GNOME3 on Linux), "narrow scrollbar" cannot get

49
modules/utils.js
View File

@ -601,15 +601,9 @@ var TreeStyleTabUtils = {
SSS.unregisterSheet(this.lastAgentSheetForNarrowScrollbar, SSS.AGENT_SHEET);
var size = this.getTreePref('tabbar.narrowScrollbar.width');
var rulesToSizeScrollbar = '';
var rulesToSizeScrollbarContents = '';
var negativeMarginRules = '';
{
let OS = Services.appinfo.OS;
let shouldResize = this.getTreePref('tabbar.narrowScrollbar.resize.'+OS);
if (shouldResize === null)
shouldResize = this.getTreePref('tabbar.narrowScrollbar.resize.default');
let scrollbarSize = 0;
if (!shouldResize) {
let scrollbox = aTabBrowser.tabContainer.mTabstrip._scrollbox;
let d = scrollbox.ownerDocument;
@ -629,39 +623,44 @@ var TreeStyleTabUtils = {
}
}
}
}
if (!shouldResize && scrollbarSize > 0) {
if (scrollbarSize > 0) {
let overWidth = size - scrollbarSize;
let leftMargin = Math.floor(overWidth / 2);
let rightMargin = overWidth - leftMargin;
rulesToSizeScrollbar = 'margin-left: '+leftMargin+'px;' +
negativeMarginRules = 'margin-left: '+leftMargin+'px;' +
'margin-right: '+rightMargin+'px;';
}
else {
rulesToSizeScrollbarContents = 'max-width: '+size+'px;' +
'min-width: '+size+'px;';
}
}
const style = 'data:text/css,'+encodeURIComponent(
('@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");' +
(rulesToSizeScrollbarContents ?
'tabs.tabbrowser-tabs[%MODE%="vertical"][%NARROW%="true"]' +
' .tabbrowser-arrowscrollbox' +
' > scrollbox' +
' > scrollbar[orient="vertical"],' +
'tabs.tabbrowser-tabs[%MODE%="vertical"][%NARROW%="true"]' +
' .tabbrowser-arrowscrollbox' +
' > scrollbox' +
' > scrollbar[orient="vertical"] * {' + rulesToSizeScrollbarContents + '}' : '' ) +
'tabs.tabbrowser-tabs[%MODE%="vertical"][%NARROW%="true"]' +
' .tabbrowser-arrowscrollbox' +
' > scrollbox' +
' > scrollbar[orient="vertical"] {' +
' font-size: %SIZE%px;' +
rulesToSizeScrollbar +
' max-width: %SIZE%px;' +
' min-width: %SIZE%px;' +
// This "clip-path" is required to clip overflowed elements.
// Elements with "-moz-appearance" can be larger than its given
// maximum size.
' clip-path: url(#treestyletab-box-clip-path);' +
'}' +
'tabs.tabbrowser-tabs[%MODE%="vertical"][%NARROW%="true"]' +
' .tabbrowser-arrowscrollbox' +
' > scrollbox' +
' > scrollbar[orient="vertical"] * {' +
' font-size: %SIZE%px;' +
' max-width: 100%;' +
' min-width: %SIZE%px;' +
'}' +
'tabs.tabbrowser-tabs[%MODE%="vertical"][%NARROW%="true"]' +
' .tabbrowser-arrowscrollbox' +
' > scrollbox' +
' > scrollbar[orient="vertical"] scrollbarbutton {' +
' font-size: %SIZE%px;' +
negativeMarginRules +
'}' +
'tabs.tabbrowser-tabs[%MODE%="vertical"][%NARROW%="true"]' +
' .tabbrowser-arrowscrollbox' +

36
skin/classic/treestyletab/metal/base.css
View File

@ -40,23 +40,6 @@
border-width: 1px 0 0 !important;
padding: 0 !important;
}
/* these styles are required to cover narrow scrollbars. */
.tabbrowser-tabs[treestyletab-mode="vertical"]
.scrollbox-innerbox {
background: linear-gradient(to left,
rgba(121,121,121,1) 0%,
rgba(121,121,121,1) 10%,
rgba(121,121,121,0) 11%,
rgba(121,121,121,0) 100%) !important;
}
.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
.scrollbox-innerbox {
background: linear-gradient(to right,
rgba(121,121,121,1) 0%,
rgba(121,121,121,1) 10%,
rgba(121,121,121,0) 11%,
rgba(121,121,121,0) 100%) !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] {
appearance: none !important;
@ -123,25 +106,6 @@ tabbrowser[treestyletab-tabbar-position="right"]
background: #acacac !important;
border-color: #797979 !important;
}
/* these styles are required to cover narrow scrollbars. */
:root:-moz-window-inactive
.tabbrowser-tabs[treestyletab-mode="vertical"]
.scrollbox-innerbox {
background: linear-gradient(to left,
rgba(172,172,172,1) 0%,
rgba(172,172,172,1) 10%,
rgba(172,172,172,0) 11%,
rgba(172,172,172,0) 100%) !important;
}
:root:-moz-window-inactive
.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
.scrollbox-innerbox {
background: linear-gradient(to right,
rgba(172,172,172,1) 0%,
rgba(172,172,172,1) 10%,
rgba(172,172,172,0) 11%,
rgba(172,172,172,0) 100%) !important;
}
:root:-moz-window-inactive
.tabbrowser-strip[treestyletab-mode="vertical"][treestyletab-style~="aero"],
:root:-moz-window-inactive

42
skin/classic/treestyletab/sidebar/sidebar.css
View File

@ -20,53 +20,11 @@
.tabbrowser-strip[treestyletab-mode="vertical"] {
background: #d4dde5 !important;
}
/* these styles are required to cover narrow scrollbars. */
.tabbrowser-tabs[treestyletab-mode="vertical"]
.scrollbox-innerbox {
background: linear-gradient(to left,
rgba(212,221,229,1) 0%,
rgba(212,221,229,1) 10%,
rgba(212,221,229,0) 11%,
rgba(212,221,229,0) 100%) !important;
}
.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
.scrollbox-innerbox {
background: linear-gradient(to right,
rgba(212,221,229,1) 0%,
rgba(212,221,229,1) 10%,
rgba(212,221,229,0) 11%,
rgba(212,221,229,0) 100%) !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
.scrollbox-innerbox {
background: linear-gradient(to left,
rgba(212,221,229,1) 0%,
rgba(212,221,229,1) 10%,
rgba(212,221,229,0) 11%,
rgba(212,221,229,0) 100%) !important;
}
.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
.scrollbox-innerbox {
background: linear-gradient(to right,
rgba(212,221,229,1) 0%,
rgba(212,221,229,1) 10%,
rgba(212,221,229,0) 11%,
rgba(212,221,229,0) 100%) !important;
}
#main-window:-moz-window-inactive
.tabbrowser-strip:not([treestyletab-style~="aero"])[treestyletab-mode="vertical"] {
background: #e8e8e8 !important;
}
#main-window:-moz-window-inactive
.tabbrowser-tabs:not([treestyletab-style~="aero"])[treestyletab-mode="vertical"]
.scrollbox-innerbox {
background: linear-gradient(to right,
rgba(232,232,232,1) 0%,
rgba(232,232,232,1) 10%,
rgba(232,232,232,0) 11%,
rgba(232,232,232,0) 100%) !important;
}
/* autohide */
.treestyletab-tabbar-toolbar[treestyletab-tabbar-autohide][treestyletab-mode="vertical"]
#treestyletab-tabbar-resizer-box {

17
skin/classic/treestyletab/square/base.css
View File

@ -17,23 +17,6 @@
-moz-appearance: none;
background: darkgray !important;
}
/* these styles are required to cover narrow scrollbars. */
.tabbrowser-tabs[treestyletab-style~="border"][treestyletab-mode="vertical"]
.scrollbox-innerbox {
background: linear-gradient(to left,
rgba(169,169,169,1) 0%,
rgba(169,169,169,1) 10%,
rgba(169,169,169,0) 11%,
rgba(169,169,169,0) 100%) !important;
}
.tabbrowser-tabs[treestyletab-style~="border"][treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
.scrollbox-innerbox {
background: linear-gradient(to right,
rgba(169,169,169,1) 0%,
rgba(169,169,169,1) 10%,
rgba(169,169,169,0) 11%,
rgba(169,169,169,0) 100%) !important;
}
.tabbrowser-strip[treestyletab-mode="vertical"],
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"],

18
skin/classic/treestyletab/square/vertigo.css
View File

@ -1,23 +1,5 @@
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* these styles are required to cover narrow scrollbars. */
.tabbrowser-tabs[treestyletab-mode="vertical"]
.scrollbox-innerbox {
background: linear-gradient(to left,
-moz-dialog 0%,
-moz-dialog 10%,
transparent 11%,
transparent 100%) !important;
}
.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
.scrollbox-innerbox {
background: linear-gradient(to right,
-moz-dialog 0%,
-moz-dialog 10%,
transparent 11%,
transparent 100%) !important;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]),
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab:not([pinned]),