Bug 1276629 - Exclude select from floating scrollbars CSS. r=ntim draft
authorJ. Ryan Stinnett <jryans@gmail.com>
Thu, 13 Oct 2016 09:25:06 -0500
changeset 426012 8a05a01bf0b62420fb380ac9194b0cdfaaf96ce6
parent 424408 38171e4619fb49c80f0342b6c4a91970c5faccf5
child 534056 d13e7350b1eeb33b9632ae13ec032aa4469ad2a6
push id32579
push userbmo:jryans@gmail.com
push dateMon, 17 Oct 2016 15:20:46 +0000
reviewersntim
bugs1276629
milestone52.0a1
Bug 1276629 - Exclude select from floating scrollbars CSS. r=ntim MozReview-Commit-ID: 6V05AIVmtXZ
devtools/client/themes/floating-scrollbars-dark-theme.css
devtools/client/themes/floating-scrollbars-responsive-design.css
--- a/devtools/client/themes/floating-scrollbars-dark-theme.css
+++ b/devtools/client/themes/floating-scrollbars-dark-theme.css
@@ -1,46 +1,52 @@
-@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
 
-xul|scrollbar {
+/* Restrict all styles to `*|*:not(html|select) > scrollbar` so that scrollbars
+   inside a <select> are excluded (including them hides the select arrow on
+   Windows).  We want to include both the root scrollbars for the document as
+   well as any overflow: scroll elements within the page, while excluding
+   <select>. */
+*|*:not(html|select) > scrollbar {
   -moz-appearance: none !important;
   position: relative;
   background-color: transparent;
   background-image: none;
   z-index: 2147483647;
   padding: 2px;
 }
 
-:root[platform="mac"] xul|scrollbar {
+*|*:root[platform="mac"] *|*:not(html|select) > scrollbar {
   border: none;
 }
 
 /* Scrollbar code will reset the margin to the correct side depending on
    where layout actually puts the scrollbar */
-xul|scrollbar[orient="vertical"] {
+*|*:not(html|select) > scrollbar[orient="vertical"] {
   margin-left: -10px;
   min-width: 10px;
   max-width: 10px;
 }
 
-xul|scrollbar[orient="horizontal"] {
+*|*:not(html|select) > scrollbar[orient="horizontal"] {
   margin-top: -10px;
   min-height: 10px;
   max-height: 10px;
 }
 
-xul|scrollbar xul|thumb {
+*|*:not(html|select) > scrollbar thumb {
   background-color: rgba(170, 170, 170, .2) !important; /* --toolbar-tab-hover */
   -moz-appearance: none !important;
   border-width: 0px !important;
   border-radius: 3px !important;
 }
 
-:root[platform="mac"] xul|slider {
+*|*:root[platform="mac"] *|*:not(html|select) > scrollbar slider {
   -moz-appearance: none !important;
 }
 
-:root[platform="win"] xul|scrollbar xul|scrollbarbutton,
-:root[platform="linux"] xul|scrollbar xul|scrollbarbutton,
-:root[platform="win"] xul|scrollbar xul|gripper,
-:root[platform="linux"] xul|scrollbar xul|gripper {
+*|*:root[platform="win"] *|*:not(html|select) > scrollbar scrollbarbutton,
+*|*:root[platform="linux"] *|*:not(html|select) > scrollbar scrollbarbutton,
+*|*:root[platform="win"] *|*:not(html|select) > scrollbar gripper,
+*|*:root[platform="linux"] *|*:not(html|select) > scrollbar gripper {
   display: none;
 }
--- a/devtools/client/themes/floating-scrollbars-responsive-design.css
+++ b/devtools/client/themes/floating-scrollbars-responsive-design.css
@@ -1,42 +1,47 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
 
-scrollbar {
+/* Restrict all styles to `*|*:not(html|select) > scrollbar` so that scrollbars
+   inside a <select> are excluded (including them hides the select arrow on
+   Windows).  We want to include both the root scrollbars for the document as
+   well as any overflow: scroll elements within the page, while excluding
+   <select>. */
+*|*:not(html|select) > scrollbar {
   -moz-appearance: none !important;
   position: relative;
   background-color: transparent;
   background-image: none;
   z-index: 2147483647;
   padding: 2px;
   border: none;
 }
 
 /* Scrollbar code will reset the margin to the correct side depending on
    where layout actually puts the scrollbar */
-scrollbar[orient="vertical"] {
+*|*:not(html|select) > scrollbar[orient="vertical"] {
   margin-left: -10px;
   min-width: 10px;
   max-width: 10px;
 }
 
-scrollbar[orient="horizontal"] {
+*|*:not(html|select) > scrollbar[orient="horizontal"] {
   margin-top: -10px;
   min-height: 10px;
   max-height: 10px;
 }
 
-slider {
+*|*:not(html|select) > scrollbar slider {
   -moz-appearance: none !important;
 }
 
-thumb {
+*|*:not(html|select) > scrollbar thumb {
   -moz-appearance: none !important;
   background-color: rgba(0,0,0,0.2);
-  border-radius: 3px;
   border-width: 0px !important;
   border-radius: 3px !important;
 }
 
-scrollbar scrollbarbutton,
-scrollbar gripper {
+*|*:not(html|select) > scrollbar scrollbarbutton,
+*|*:not(html|select) > scrollbar gripper {
   display: none;
 }