Bug 1624919 - Scope scrollbox.css to arrowscrollbox custom element. r=dao
authorTim Nguyen <ntim.bugs@gmail.com>
Thu, 26 Mar 2020 15:07:10 +0000
changeset 520583 9a501aef6cee650e5d5df837550cf351497126ce
parent 520582 228988ede47da5c247d0a821ad49613babab11ce
child 520584 4f2d89525c63081b92fcd17a7056b64953b0ffca
push id37253
push usernerli@mozilla.com
push dateThu, 26 Mar 2020 21:36:52 +0000
treeherdermozilla-central@c644dd16e2cc [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1624919
milestone76.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1624919 - Scope scrollbox.css to arrowscrollbox custom element. r=dao Differential Revision: https://phabricator.services.mozilla.com/D68239
browser/themes/shared/tabs.inc.css
toolkit/content/widgets.css
toolkit/content/widgets/arrowscrollbox.js
toolkit/content/widgets/menupopup.js
toolkit/themes/shared/scrollbox.css
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -433,54 +433,54 @@
 
 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
   transition: opacity .3s linear var(--soundplaying-removal-delay);
   opacity: 0;
 }
 
 /* Tab Overflow */
-.tabbrowser-arrowscrollbox:not([scrolledtostart])::part(arrowscrollbox-overflow-start-indicator),
-.tabbrowser-arrowscrollbox:not([scrolledtoend])::part(arrowscrollbox-overflow-end-indicator) {
+.tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator),
+.tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) {
   width: 18px;
   background-image: url(chrome://browser/skin/tabbrowser/tab-overflow-indicator.png);
   background-size: 17px 100%;
   background-repeat: no-repeat;
   border-left: 1px solid;
   border-image: linear-gradient(rgba(255,255,255,.2),
                                 rgba(255,255,255,.2) calc(100% - 1px - var(--tabs-navbar-shadow-size)),
                                 transparent calc(100% - 1px - var(--tabs-navbar-shadow-size)));
   border-image-slice: 1;
   pointer-events: none;
   position: relative;
   z-index: 3; /* the selected tab's z-index + 1 */
 }
 
-.tabbrowser-arrowscrollbox:-moz-locale-dir(rtl)::part(arrowscrollbox-overflow-start-indicator),
-.tabbrowser-arrowscrollbox:-moz-locale-dir(ltr)::part(arrowscrollbox-overflow-end-indicator) {
+.tabbrowser-arrowscrollbox:-moz-locale-dir(rtl)::part(overflow-start-indicator),
+.tabbrowser-arrowscrollbox:-moz-locale-dir(ltr)::part(overflow-end-indicator) {
   transform: scaleX(-1);
 }
 
-.tabbrowser-arrowscrollbox:not([scrolledtostart])::part(arrowscrollbox-overflow-start-indicator) {
+.tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator) {
   margin-inline-start: -1px;
   margin-inline-end: -17px;
 }
 
-.tabbrowser-arrowscrollbox:not([scrolledtoend])::part(arrowscrollbox-overflow-end-indicator) {
+.tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) {
   margin-inline-start: -17px;
   margin-inline-end: -1px;
 }
 
-.tabbrowser-arrowscrollbox[scrolledtostart]::part(arrowscrollbox-overflow-start-indicator),
-.tabbrowser-arrowscrollbox[scrolledtoend]::part(arrowscrollbox-overflow-end-indicator) {
+.tabbrowser-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator),
+.tabbrowser-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator) {
   opacity: 0;
 }
 
-.tabbrowser-arrowscrollbox::part(arrowscrollbox-overflow-start-indicator),
-.tabbrowser-arrowscrollbox::part(arrowscrollbox-overflow-end-indicator) {
+.tabbrowser-arrowscrollbox::part(overflow-start-indicator),
+.tabbrowser-arrowscrollbox::part(overflow-end-indicator) {
   transition: opacity 150ms ease;
 }
 
 .tabbrowser-tab:not([visuallyselected=true]):not([multiselected]),
 .tabbrowser-tab:-moz-lwtheme {
   color: inherit;
 }
 
--- a/toolkit/content/widgets.css
+++ b/toolkit/content/widgets.css
@@ -15,15 +15,14 @@
 @import url("chrome://global/skin/findBar.css");
 @import url("chrome://global/skin/menu.css");
 @import url("chrome://global/skin/menulist.css");
 @import url("chrome://global/skin/notification.css");
 @import url("chrome://global/skin/numberinput.css");
 @import url("chrome://global/skin/popup.css");
 @import url("chrome://global/skin/radio.css");
 @import url("chrome://global/skin/richlistbox.css");
-@import url("chrome://global/skin/scrollbox.css");
 @import url("chrome://global/skin/splitter.css");
 @import url("chrome://global/skin/tabbox.css");
 @import url("chrome://global/skin/textbox.css");
 @import url("chrome://global/skin/toolbar.css");
 @import url("chrome://global/skin/toolbarbutton.css");
 @import url("chrome://global/skin/tree.css");
--- a/toolkit/content/widgets/arrowscrollbox.js
+++ b/toolkit/content/widgets/arrowscrollbox.js
@@ -17,23 +17,24 @@
         ".scrollbutton-up": "orient,disabled=scrolledtostart",
         "[part=scrollbox]": "orient,align,pack,dir,smoothscroll",
         ".scrollbutton-down": "orient,disabled=scrolledtoend",
       };
     }
 
     get markup() {
       return `
-      <html:link rel="stylesheet" href="chrome://global/skin/global.css"/>
+      <html:link rel="stylesheet" href="chrome://global/skin/toolbarbutton.css"/>
+      <html:link rel="stylesheet" href="chrome://global/skin/scrollbox.css"/>
       <toolbarbutton class="scrollbutton-up" part="scrollbutton-up"/>
-      <spacer part="arrowscrollbox-overflow-start-indicator"/>
+      <spacer part="overflow-start-indicator"/>
       <scrollbox part="scrollbox" flex="1">
         <html:slot/>
       </scrollbox>
-      <spacer part="arrowscrollbox-overflow-end-indicator"/>
+      <spacer part="overflow-end-indicator"/>
       <toolbarbutton class="scrollbutton-down" part="scrollbutton-down"/>
     `;
     }
 
     constructor() {
       super();
       this.attachShadow({ mode: "open" });
       this.shadowRoot.appendChild(this.fragment);
--- a/toolkit/content/widgets/menupopup.js
+++ b/toolkit/content/widgets/menupopup.js
@@ -88,18 +88,18 @@
           <html:slot></html:slot>
         </arrowscrollbox>
       `;
     }
 
     get styles() {
       let s = `
         :host(.in-menulist) .popup-internal-box::part(scrollbutton-up),
-        :host(.in-menulist) .popup-internal-box::part(arrowscrollbox-overflow-start-indicator),
-        :host(.in-menulist) .popup-internal-box::part(arrowscrollbox-overflow-end-indicator),
+        :host(.in-menulist) .popup-internal-box::part(overflow-start-indicator),
+        :host(.in-menulist) .popup-internal-box::part(overflow-end-indicator),
         :host(.in-menulist) .popup-internal-box::part(scrollbutton-down) {
           display: none;
         }
         :host(.in-menulist) .popup-internal-box::part(scrollbox) {
           overflow: auto;
         }
       `;
 
--- a/toolkit/themes/shared/scrollbox.css
+++ b/toolkit/themes/shared/scrollbox.css
@@ -1,18 +1,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-arrowscrollbox[scrolledtoend=true]::part(arrowscrollbox-overflow-end-indicator),
-arrowscrollbox[scrolledtostart=true]::part(arrowscrollbox-overflow-start-indicator),
-arrowscrollbox[notoverflowing=true]::part(scrollbutton-up),
-arrowscrollbox[notoverflowing=true]::part(scrollbutton-down) {
+:host([scrolledtostart=true])::part(overflow-end-indicator),
+:host([scrolledtoend=true])::part(overflow-start-indicator),
+:host([notoverflowing=true]) .scrollbutton-up,
+:host([notoverflowing=true]) .scrollbutton-down {
   visibility: collapse;
 }
 
 /* Scroll arrows */
 
 .scrollbutton-up,
 .scrollbutton-down {
   color: inherit !important; /* override any color changes for toolbar buttons in e.g. disabled or hover states */
@@ -43,13 +43,13 @@ arrowscrollbox[notoverflowing=true]::par
 }
 
 .scrollbutton-up > .toolbarbutton-text,
 .scrollbutton-down > .toolbarbutton-text {
   display: none;
 }
 
 %ifndef XP_MACOSX
-arrowscrollbox:not([clicktoscroll="true"])::part(scrollbutton-up),
-arrowscrollbox:not([clicktoscroll="true"])::part(scrollbutton-down) {
+:host(:not([clicktoscroll="true"])) .scrollbutton-up,
+:host(:not([clicktoscroll="true"])) .scrollbutton-down {
   -moz-appearance: none;
 }
 %endif