Bug 1490101 - Avoid overflowing the layout tab when flex elements are long; r=rcaliman
authorPatrick Brosset <pbrosset@mozilla.com>
Thu, 11 Oct 2018 15:31:53 +0000
changeset 496493 ed70a55e2721cc9e84a05ecec3b67ef296f15950
parent 496492 b01876f4f16eddbcfdc203e99f32356a81763863
child 496494 623c34a2c9dcceebe35432602b0ca47eb8ea9869
push id9984
push userffxbld-merge
push dateMon, 15 Oct 2018 21:07:35 +0000
treeherdermozilla-beta@183d27ea8570 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1490101
milestone64.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 1490101 - Avoid overflowing the layout tab when flex elements are long; r=rcaliman Fixes the 3 places where long element Reps can appear: - as a accordion header as "flex item of div..." - as a flex item in the list of items for a container - as a flex container To fix this, I added text-overflow:ellipsis in a few places and made sure the Rep was not pushing other things too far behind the viewport. I also made the layout sidebar overflow-x:hidden, because it doesn't need to scroll sideways (if the sidebar is too thin, then the box-model diagram might overflow, but it has its own horizontal scrollbar). Finally, I removed the inspector select icon next to the Flex Container Rep because usually the element is already selected anyway. If it's not, then you can use the back arrow to go back to the container. Differential Revision: https://phabricator.services.mozilla.com/D8364
devtools/client/inspector/flexbox/components/FlexContainer.js
devtools/client/inspector/flexbox/components/Header.js
devtools/client/inspector/layout/components/Accordion.css
devtools/client/themes/layout.css
--- a/devtools/client/inspector/flexbox/components/FlexContainer.js
+++ b/devtools/client/inspector/flexbox/components/FlexContainer.js
@@ -25,27 +25,25 @@ class FlexContainer extends PureComponen
   static get propTypes() {
     return {
       color: PropTypes.string.isRequired,
       flexContainer: PropTypes.shape(Types.flexContainer).isRequired,
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetFlexboxOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.colorValueEl = createRef();
     this.swatchEl = createRef();
 
-    this.onFlexboxInspectIconClick = this.onFlexboxInspectIconClick.bind(this);
     this.setFlexboxColor = this.setFlexboxColor.bind(this);
   }
 
   componentDidMount() {
     const tooltip = this.props.getSwatchColorPickerTooltip();
 
     let previousColor;
     tooltip.addSwatch(this.swatchEl.current, {
@@ -65,38 +63,32 @@ class FlexContainer extends PureComponen
     tooltip.removeSwatch(this.swatchEl.current);
   }
 
   setFlexboxColor() {
     const color = this.colorValueEl.current.textContent;
     this.props.onSetFlexboxOverlayColor(color);
   }
 
-  onFlexboxInspectIconClick(nodeFront) {
-    this.props.setSelectedNode(nodeFront, { reason: "layout-panel" });
-    nodeFront.scrollIntoView().catch(e => console.error(e));
-  }
-
   render() {
     const {
       color,
       flexContainer,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
     } = this.props;
     const { nodeFront } = flexContainer;
 
     return createElement(Fragment, null,
       Rep({
         defaultRep: ElementNode,
         mode: MODE.TINY,
         object: translateNodeFrontToGrip(nodeFront),
         onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
         onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
-        onInspectIconClick: () => this.onFlexboxInspectIconClick(nodeFront),
       }),
       dom.div({
         className: "layout-color-swatch",
         ref: this.swatchEl,
         style: {
           backgroundColor: color,
         },
         title: color,
--- a/devtools/client/inspector/flexbox/components/Header.js
+++ b/devtools/client/inspector/flexbox/components/Header.js
@@ -66,26 +66,24 @@ class Header extends PureComponent {
     }
 
     const {
       flexContainer,
       getSwatchColorPickerTooltip,
       onHideBoxModelHighlighter,
       onSetFlexboxOverlayColor,
       onShowBoxModelHighlighterForNode,
-      setSelectedNode,
     } = this.props;
 
     return FlexContainer({
       flexContainer,
       getSwatchColorPickerTooltip,
       onHideBoxModelHighlighter,
       onSetFlexboxOverlayColor,
       onShowBoxModelHighlighterForNode,
-      setSelectedNode,
     });
   }
 
   renderFlexItemSelector() {
     if (!this.props.flexContainer.flexItemShown) {
       return null;
     }
 
--- a/devtools/client/inspector/layout/components/Accordion.css
+++ b/devtools/client/inspector/layout/components/Accordion.css
@@ -56,9 +56,10 @@
   border-bottom: none;
 }
 
 .arrow {
   vertical-align: middle;
   display: inline-block;
   padding-inline-start: 2px;
   padding-inline-end: 1px;
+  flex-shrink: 0;
 }
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -1,23 +1,30 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #layout-container {
   height: 100%;
   width: 100%;
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: auto;
   min-width: 200px;
 }
 
 #layout-container .accordion ._content {
   padding: 0;
 }
 
+#layout-container .accordion ._header {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 /**
  * Common styles for the layout container
  */
 
 #layout-container li {
   padding: 3px 0;
   -moz-user-select: none;
 }
@@ -84,16 +91,29 @@
  * Flex Container
  */
 
 #layout-flexbox-container {
   display: flex;
   flex-direction: column;
 }
 
+#layout-flexbox-container .flex-header-content:not(.flex-item-shown) {
+  overflow: hidden;
+  display: flex;
+}
+
+#layout-flexbox-container .flex-header-content:not(.flex-item-shown) .objectBox {
+  max-width: calc(100% - 20px);
+  margin-inline-end: 5px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 /**
  * Header
  */
 
 .flex-header {
   display: flex;
   align-items: center;
   height: 32px;
@@ -125,20 +145,25 @@
 
 .flex-item-list {
   border-bottom: 1px solid var(--theme-splitter-color);
   font-size: 12px;
   margin: 0;
   padding-inline-start: 34px;
   padding-top: 5px;
   padding-bottom: 5px;
+  overflow: hidden;
 }
 
 .flex-item-list .devtools-button {
   background-color: transparent;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  inline-size: 100%;
+  text-align: start;
 }
 
 /**
  * Flex Item Selector
  */
 
 #flex-item-selector {
   background-position: right 4px center;