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 489115 ed70a55e2721cc9e84a05ecec3b67ef296f15950
parent 489114 b01876f4f16eddbcfdc203e99f32356a81763863
child 489116 623c34a2c9dcceebe35432602b0ca47eb8ea9869
push id246
push userfmarier@mozilla.com
push dateSat, 13 Oct 2018 00:15:40 +0000
reviewersrcaliman
bugs1490101
milestone64.0a1
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;