Bug 1338106 - hide toolbox toolbar icons for narrow viewport;r=ntim
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 08 Mar 2017 12:36:40 +0100
changeset 347520 b1eeaade030704e4f7130e125a1c53cc21e049d0
parent 347519 c0a0ddf7cb98603c3525cb4d1dc96db9fe59ad23
child 347521 1396c6c9a24841b99e9ff6b8f001bfc8f09513ba
push id31499
push userkwierso@gmail.com
push dateTue, 14 Mar 2017 23:41:39 +0000
treeherdermozilla-central@cef93bf5a0a1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1338106
milestone55.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 1338106 - hide toolbox toolbar icons for narrow viewport;r=ntim - remove text-overflow: ellipsis to maximize readable text - add media query to hide toolbar icons when viewport width < 700px MozReview-Commit-ID: 4HBFciWSuie
devtools/client/themes/toolbox.css
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -86,43 +86,46 @@
 
 #toolbox-buttons-start {
   border: solid 0 var(--theme-splitter-color);
   border-inline-end-width: 1px;
 }
 
 /* Toolbox tabs */
 .devtools-tab {
+  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;
-  text-overflow: ellipsis;
   background-color: transparent;
 }
 
+/* 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:not(.devtools-tab-icon-only) > img {
+    visibility: hidden;
+    margin-inline-start: 5px;
+    margin-inline-end: 0;
+    width: 0;
+  }
+}
+
 .devtools-tab-icon-only {
   padding-inline-end: 2px;
 }
 
-.devtools-tab span {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-inline-end: 13px;
-  position: relative;
-  top: 1px;
-}
-
 /* Save space on the tab-strip in Firebug theme */
 .theme-firebug .devtools-tab {
   -moz-box-flex: initial;
 }
 
 .theme-dark .devtools-tab {
   color: var(--theme-body-color-alt);
   border-color: #42484f;
@@ -166,21 +169,22 @@
   padding-left: 13px !important;
   background-position: 3px 6px;
 }
 
 .devtools-tab > img {
   border: none;
   margin: 0;
   margin-inline-start: 10px;
+  margin-inline-end: 5px;
   opacity: 0.8;
   max-height: 16px;
   width: 16px; /* Prevents collapse during theme switching */
   vertical-align: text-top;
-  margin-inline-end: 6px;
+  flex-shrink: 0;
 }
 
 /* Support invertable icon flags and make icon white when it's on a blue background */
 .theme-light .devtools-tab.icon-invertable-light-theme:not(.selected) > img,
 .devtools-tab.icon-invertable-dark-theme.selected > img {
   filter: invert(1);
 }