Bug 1338106 - Add mask-image to fade out text of devtools-tabs;r=ntim

Also fixes a slight issue in firebug theme that made the text slide of
1 px down when selecting a tab.

MozReview-Commit-ID: KNm9Xf21p2D

--HG--
extra : rebase_source : 98728735c36446a116a5a2cb2306f39e5a72f21c
extra : source : c342d199c1397fbb66c3c6f70cfe42b5d3817cc2

devtools/client/framework/components/toolbox-tab.js

@@ -4,7 +4,7 @@
 "use strict";
 
 const {DOM, createClass} = require("devtools/client/shared/vendor/react");
-const {img, button} = DOM;
+const {img, button, span} = DOM;
 
 module.exports = createClass({
   displayName: "ToolboxTab",
@@ -56,7 +56,9 @@ module.exports = createClass({
         onClick: () => selectTool(id),
       },
       ...this.renderIcon(panelDefinition, isHighlighted),
-      iconOnly ? null : label
+      iconOnly ? null : span({
+        className: "devtools-tab-label"
+      }, label)
     );
   }
 });

devtools/client/themes/firebug-theme.css

@@ -76,6 +76,7 @@
 .theme-firebug .devtools-sidebar-tabs tab {
   margin: 3px 0 -1px 0;
   padding: 1px 4px !important;
+  padding-inline-end: 0 !important;
   border: 1px solid transparent !important;
   border-bottom: none !important;
   border-radius: 4px 4px 0 0;
@@ -98,8 +99,9 @@
   margin-bottom: -1px;
 }
 
-.theme-firebug .devtools-tab span {
-  padding-inline-end: 0;
+.theme-firebug .devtools-tab-label {
+  /* Set the end padding on the label to make sure the label gets faded out properly */
+  padding-inline-end: 4px;
 }
 
 /* In order to hide bottom-border of side panel tabs we need
@@ -118,7 +120,7 @@
 .theme-firebug .devtools-sidebar-tabs tab[selected] {
   background-color: var(--theme-toolbar-tab-selected-background);
   border-color: var(--theme-splitter-color) !important;
-  border-bottom-width: 0 !important;
+  border-bottom-color: transparent !important;
   padding-bottom: 2px;
   color: inherit;
 }

devtools/client/themes/toolbox.css

@@ -91,6 +91,7 @@
 
 /* Toolbox tabs */
 .devtools-tab {
+  position: relative;
   display: flex;
   align-items: center;
   min-width: 32px;
@@ -100,25 +101,43 @@
   border-style: solid;
   border-width: 0;
   border-inline-start-width: 1px;
-  padding-inline-end: 10px;
   white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
   background-color: transparent;
 }
 
+
+.devtools-tab-label {
+  mask-image: linear-gradient(to left, transparent 0, black 6px);
+  /* Set the end padding on the label to make sure the label gets faded out properly */
+  padding-inline-end: 10px;
+  min-width: 1px;
+}
+
+.devtools-tab-label:-moz-locale-dir(rtl) {
+  mask-image: linear-gradient(to right, transparent 0, black 6px);
+}
+
 /* Hide tab icons when the viewport width is limited */
 @media (max-width: 700px) {
-  /* Hide the icons, reduce the margins to 5px and set the width to 0 */
+  .devtools-tab-label {
+    /* Set the end padding on the label to make sure the label gets faded out properly */
+    padding-inline-end: 5px;
+  }
+
+  .devtools-tab:not(.devtools-tab-icon-only) {
+    padding-inline-start: 5px !important;
+  }
+
+  /* Hide the icons */
   .devtools-tab:not(.devtools-tab-icon-only) > img {
-    visibility: hidden;
-    margin-inline-start: 5px;
-    margin-inline-end: 0;
-    width: 0;
+    display: none;
   }
 }
 
 .devtools-tab-icon-only {
-  padding-inline-end: 2px;
+  min-width: 24px;
 }
 
 /* Save space on the tab-strip in Firebug theme */
@@ -215,15 +234,10 @@
 }
 
 .toolbox-tabs .devtools-tab.selected,
-.toolbox-tabs .devtools-tab.highlighted {
-  border-width: 0;
-  padding-inline-start: 1px;
-}
-
+.toolbox-tabs .devtools-tab.highlighted,
 .toolbox-tabs .devtools-tab.selected + .devtools-tab,
 .toolbox-tabs .devtools-tab.highlighted + .devtools-tab {
-  border-inline-start-width: 0;
-  padding-inline-start: 1px;
+  border-inline-start-color: transparent;
 }
 
 .toolbox-tabs .devtools-tab:first-child {
@@ -248,8 +262,7 @@
   padding-inline-start: 1px;
 }
 #toolbox-option-container img {
-  margin-inline-end: 6px;
-  margin-inline-start: 6px;
+  margin: 0 3px;
 }
 
 /* Toolbox controls */