Commit 1909c4ba authored by Tim Nguyen's avatar Tim Nguyen
Browse files

Bug 1624919 - Scope scrollbox.css to arrowscrollbox custom element. r=dao 

Differential Revision: https://phabricator.services.mozilla.com/D68239

--HG--
extra : moz-landing-system : lando
parent 5a7b245d

browser/themes/shared/tabs.inc.css

+10 −10
Original line number Diff line number Diff line
@@ -438,8 +438,8 @@ 
}



/* 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%;
@@ -454,28 +454,28 @@ 
  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;

}

toolkit/content/widgets.css

+0 −1
Original line number Diff line number Diff line
@@ -20,7 +20,6 @@ 
@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");

toolkit/content/widgets/arrowscrollbox.js

+4 −3
Original line number Diff line number Diff line
@@ -22,13 +22,14 @@ 


    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"/>

    `;

    }

toolkit/content/widgets/menupopup.js

+2 −2
Original line number Diff line number Diff line
@@ -93,8 +93,8 @@ 
    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;

        }

toolkit/themes/shared/scrollbox.css

+6 −6
Original line number Diff line number Diff line
@@ -4,10 +4,10 @@ 


@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;

}
@@ -48,8 +48,8 @@ arrowscrollbox[notoverflowing=true]::part(scrollbutton-down) { 
}



%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