Bug 1507746 - Shorten the flexbox container's selector in the accordion header if its too long. r=gl
authorMicah Tigley <mtigley@mozilla.com>
Tue, 20 Nov 2018 01:55:29 +0000
changeset 503606 408a5c502d131500a050ecfb929e6cf7f0e403b3
parent 503605 ed44376f7c7a3fc46cde381224f76c413c23a668
child 503607 e00d7edbb963f9d88fd4c7f477c88a5ccb04344f
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)
reviewersgl
bugs1507746
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 1507746 - Shorten the flexbox container's selector in the accordion header if its too long. r=gl Differential Revision: https://phabricator.services.mozilla.com/D12292
devtools/client/inspector/layout/components/Accordion.css
devtools/client/inspector/layout/components/Accordion.js
--- a/devtools/client/inspector/layout/components/Accordion.css
+++ b/devtools/client/inspector/layout/components/Accordion.css
@@ -41,16 +41,23 @@
 .accordion ._header:hover {
   background-color: var(--theme-toolbar-hover);
 }
 
 .accordion ._header:hover svg {
   fill: var(--theme-comment-alt);
 }
 
+.accordion ._header .truncate {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .accordion ._content {
   border-bottom: 1px solid var(--theme-splitter-color);
   font-size: 11px;
   padding: 4px;
 }
 
 .accordion div:last-child ._content {
   border-bottom: none;
@@ -58,8 +65,9 @@
 
 .arrow {
   vertical-align: middle;
   display: inline-block;
   padding-inline-start: 2px;
   padding-inline-end: 1px;
   flex-shrink: 0;
 }
+
--- a/devtools/client/inspector/layout/components/Accordion.js
+++ b/devtools/client/inspector/layout/components/Accordion.js
@@ -66,17 +66,17 @@ class Accordion extends PureComponent {
 
     return div(
       { className: containerClassName, key: i },
 
       div(
         { className: "_header",
           onClick: event => this.handleHeaderClick(i, event) },
         span({ className: arrowClassName }),
-        item.header
+        span({ className: "truncate" }, item.header)
       ),
 
       (created[i] || opened[i]) ?
         div(
           { className: "_content",
             style: { display: opened[i] ? "block" : "none" },
           },
           createElement(item.component, item.componentProps || {})