Bug 1338106 - Add text-overflow fade workaround for devtools-tabs;r=ntim draft
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 08 Mar 2017 11:14:38 +0100
changeset 495142 329ce5f562ab30945635b51aad5dea29379a0cde
parent 495141 8af8707cfc92de84cbf42ced9c501763bcc974f7
child 548301 1fc4c23282ecd1edac7650e8342c3c0b2ba60d72
push id48251
push userjdescottes@mozilla.com
push dateWed, 08 Mar 2017 10:34:53 +0000
reviewersntim
bugs1338106
milestone55.0a1
Bug 1338106 - Add text-overflow fade workaround for devtools-tabs;r=ntim MozReview-Commit-ID: KNm9Xf21p2D
devtools/client/themes/toolbox.css
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -89,43 +89,99 @@
 
 #toolbox-buttons-start {
   border: solid 0 var(--theme-splitter-color);
   border-inline-end-width: 1px;
 }
 
 /* Toolbox tabs */
 .devtools-tab {
+  position: relative;
   display: flex;
   align-items: center;
   min-width: 32px;
   min-height: 24px;
   margin: 0;
   padding: 0;
   border-style: solid;
   border-width: 0;
   border-inline-start-width: 1px;
   padding-inline-end: 10px;
   white-space: nowrap;
   overflow: hidden;
   background-color: transparent;
 }
 
+/* Tab text-overflow fade workaround (waiting for text-overflow: fade) */
+.devtools-tab::after {
+  --tab-fade-color: var(--theme-tab-toolbar-background);
+}
+
+.devtools-tab:hover::after {
+  --tab-fade-color: var(--theme-toolbar-hover);
+}
+
+.devtools-tab:hover:active::after {
+  --tab-fade-color: var(--theme-toolbar-hover-active);
+}
+
+.devtools-tab.selected::after {
+  --tab-fade-color: var(--theme-selection-background);
+}
+
+.devtools-tab::before {
+  --tab-fade-color: transparent;
+}
+
+.devtools-tab:not(.selected):hover::before,
+.devtools-tab:not(.selected):hover:active::before {
+  /* :hover and :hover:active use transparent backgrounds
+     We use a :before pseudo of the color of the toolbar background
+     otherwise the :after pseudo would create a darker shade when
+     displayed on top of its ; */
+  --tab-fade-color:var(--theme-tab-toolbar-background);
+}
+
+.theme-firebug .devtools-tab::after,
+.theme-firebug .devtools-tab::before {
+  /* Firebug theme uses a gradient as background, so we can't use the workaround here. */
+  --tab-fade-color: transparent !important;
+}
+
+.devtools-tab:not(.devtools-tab-icon-only)::after,
+.devtools-tab:not(.devtools-tab-icon-only)::before {
+  content: "";
+  position: absolute;
+
+  top: 0;
+  right: 0;
+  width: 10px;
+  bottom: 0;
+
+  background: linear-gradient(90deg, transparent, var(--tab-fade-color) 75%);
+}
+
 /* Hide tab icons when the viewport width is limited */
 @media (max-width: 700px) {
   /* Make the tabs more compact */
   .devtools-tab:not(.devtools-tab-icon-only) {
     padding-inline-start: 5px;
     padding-inline-end: 5px;
   }
 
   /* Hide the icons */
   .devtools-tab:not(.devtools-tab-icon-only) > img {
     display: none;
   }
+
+  /* Reduce the size of the fade-out pseudo elements */
+  .devtools-tab:not(.devtools-tab-icon-only)::after,
+  .devtools-tab:not(.devtools-tab-icon-only)::before {
+    width: 5px;
+  }
 }
 
 .devtools-tab-icon-only {
   padding-inline-end: 2px;
 }
 
 /* Save space on the tab-strip in Firebug theme */
 .theme-firebug .devtools-tab {