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

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/layout/components/Accordion.css

@@ -46,6 +46,13 @@
   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;
@@ -63,3 +70,4 @@
   padding-inline-end: 1px;
   flex-shrink: 0;
 }
+

devtools/client/inspector/layout/components/Accordion.js

@@ -71,7 +71,7 @@ class Accordion extends PureComponent {
         { className: "_header",
           onClick: event => this.handleHeaderClick(i, event) },
         span({ className: arrowClassName }),
-        item.header
+        span({ className: "truncate" }, item.header)
       ),
 
       (created[i] || opened[i]) ?