Bug 1391743 - Polish tabstrip overflow indicators some more. r?daleharvey draft
authorDão Gottwald <dao@mozilla.com>
Wed, 23 Aug 2017 10:32:58 +0200
changeset 651129 50055a1bf537c4a73a71473aeae72a99ec029b01
parent 650941 7c50f0c999c5bf8ee915261997597a5a9b8fb2ae
child 727597 e8262bf042aea6f939a1d7d16cf74bc04c64138d
push id75605
push userdgottwald@mozilla.com
push dateWed, 23 Aug 2017 08:33:19 +0000
reviewersdaleharvey
bugs1391743
milestone57.0a1
Bug 1391743 - Polish tabstrip overflow indicators some more. r?daleharvey MozReview-Commit-ID: EKz6l9uV2Ge
browser/themes/shared/tabbrowser/tab-overflow-indicator.png
browser/themes/shared/tabs.inc.css
index a5fcc1dec4abcb966b3066bb4b50db4a45bedb57..155332962a3335c7ba2d0645bd16f03e0869ee42
GIT binary patch
literal 849
zc$@)I1FrmuP)<h;3K|Lk000e1NJLTq001HY002k`1ONa4IU(<L00002VoOIv0RM-N
z%)bBt010qNS#tmY3ljhU3ljkVnw%H_000McNliru;RqK90UiN$8~OkM0^&(TK~z}7
z&6wSmqc9AEKbg$F{{s)!UL@f+6quchrKhJoEfKP0I|lfF4x!(N@OzL#TrBiYLAIZI
z4pf-h$^D)0feK{-NFbROm={d8AVz>1;A4FXUx0A~Npi>RA(IZ0B#98(0Qm`<4wB1j
zZkdzM{pp%)0kkaL0)2oi6pULK9bnqzao5K8$+m*P_vRNp%adcqngF7G@8Et9vhvWW
zL_GpglPz{2u_=WIOtfg<uNx%OMsD3zQ5=YO7%syZGGW6cmJ$fO<nLbG0jDl(?yk+E
z%Q2*}upvkY5-q+Q{kaWCEtY_s8^AG?8*xh%u*po2!5&KeF>_0Nfm`tzP!hT3$|G@0
z{J~CUDZer4i7}Ve#j`sV#NSAOjnNcD+R=Dycc@EE?6i!q(@uwttPk}w=xiocoAadE
zeL07${oqhh!OT?+&xEG1GhaDWG_^DjO;IwL&GSIk9niAPjD$!zEGdG>^vI<_I06Sj
zC>%rtvZ^v3v(d3Z1r0z!FflnC4q_<mMR*mY7F_^@qAK`U5eP{YK$0p#P<aIpbEQ_X
z5aB?`@_ClJvAOKZtTC#eIllV9p;(krJt7p+1&fQ2s>SVuZtZR)d?0Ue>ud;xP<Chb
zvt@jmR?2#{%0p61G*!^b&4)(rb2tE!Kv>PJ2K!Ns23L;pTb4tDtXt5&Ee$(dAfy(~
zl3;zYq`~qNt5^ZmmZ^finEhjjepKNmPhvAYM?cBjN;()VwC?FtYuiA3abMyQlS)UM
zCcVi0Je<0yp7Uhk;n&#7c(v?CndpCtpWnvCuIKhF38G43PH8saR9e;4jBT@)dD;XH
z;kY?6+*)omxz2{i8kJFngxCjl1KTZL|6fyoACynEbk^kKt@pZF4Eby{*|Y$?yZJBd
zZZJ3o@lIH2HTvb#hO@<|h#tDLZw3ESJ3BYq9^`)kdHbLy_=O`*QcL=&#hZD~ub(&l
bN;rQ3^~gE^hB}0x00000NkvXXu0mjfY;=Bl
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -291,37 +291,42 @@
 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
   transition: opacity .3s linear var(--soundplaying-removal-delay);
   opacity: 0;
 }
 
 /* Tab Overflow */
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
+  width: 18px;
   background-image: url(chrome://browser/skin/tabbrowser/tab-overflow-indicator.png);
-  background-size: 100% 100%;
-  width: 19px;
+  background-size: 17px 100%;
+  border-left: 1px solid;
+  border-image: linear-gradient(rgba(255,255,255,.2),
+                                rgba(255,255,255,.2) calc(100% - 1px - var(--tab-toolbar-navbar-overlap)),
+                                transparent calc(100% - 1px - var(--tab-toolbar-navbar-overlap)));
+  border-image-slice: 1;
   pointer-events: none;
   position: relative;
   z-index: 3; /* the selected tab's z-index + 1 */
 }
 
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
   transform: scaleX(-1);
 }
 
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
-  margin-inline-start: -2px;
+  margin-inline-start: -1px;
   margin-inline-end: -17px;
 }
 
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
   margin-inline-start: -17px;
-  margin-inline-end: -2px;
+  margin-inline-end: -1px;
 }
 
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
   opacity: 0;
 }
 
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,