Bug 1508402 - Flex item selector dropdown menu should the whole selector if it fits. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 28 Nov 2018 11:28:01 -0500
changeset 505039 dd6283d8f201df1bd344d05ccc7b6c0c2903826e
parent 505038 25e1436ae7e8d405bde04fd23fba5cc1757d4e67
child 505040 26baf1ec73c631623eddf90e7b75cb4e2d3ac2de
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1508402
milestone65.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 1508402 - Flex item selector dropdown menu should the whole selector if it fits. r=pbro
devtools/client/themes/layout.css
devtools/client/themes/toolbars.css
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -139,16 +139,19 @@ html[dir="rtl"] .flex-header-button-prev
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
 .flex-header-content.flex-item-shown {
   justify-content: center;
   padding: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .flex-header-container-properties {
   display: flex;
 }
 
 .flex-header-container-properties .inspector-badge:first-child {
   margin-inline-start: 0;
@@ -224,32 +227,18 @@ html[dir="rtl"] .flex-item-list .devtool
   vertical-align: middle;
 }
 
 /**
  * Flex Item Selector
  */
 
 #flex-item-selector {
-  background-position: right 4px center;
   cursor: pointer;
-  padding-left: 0;
-  vertical-align: middle;
-  width: 140px;
-}
-
-#flex-item-selector .objectBox-node {
-  display: inline-block;
   font-size: 12px;
-  overflow: hidden;
-  padding-top: 0.15em;
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 85%;
 }
 
 /**
  * Flex Item Sizing Outline
  */
 
 .flex-outline-container {
   display: flex;
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -211,16 +211,17 @@ splitter.devtools-horizontal-splitter,
   background-color: var(--theme-splitter-color);
 }
 
 /* Dropdown Menu Button */
 .devtools-dropdown-button {
   background-image: url("chrome://devtools/skin/images/select-arrow.svg") !important;
   background-position: right center !important;
   background-repeat: no-repeat !important;
+  text-overflow: ellipsis;
   overflow: hidden;
   padding-inline-start: 2px !important;
   padding-inline-end: 10px !important;
   fill: var(--theme-toolbar-photon-icon-color);
   -moz-context-properties: fill;
 }
 
 .devtools-dropdown-button:not(:hover) {