Bug 1498115 - Part 1: Remove the FlexboxContainerProperties component. r=pbro
☠☠ backed out by 4228a1200fdc ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 15 Nov 2018 10:02:44 -0500
changeset 503023 06b4d9761d46e8e9d56589f17c3f78aee6f78644
parent 503022 4f32bb864539fde4affbcecb5b45e1b2d61591c5
child 503024 ad62c3439651910289415eb6b1c23b2173e66a10
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
bugs1498115
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 1498115 - Part 1: Remove the FlexboxContainerProperties component. r=pbro
devtools/client/inspector/flexbox/components/FlexContainerProperties.js
devtools/client/inspector/flexbox/components/Flexbox.js
devtools/client/inspector/flexbox/components/moz.build
devtools/client/locales/en-US/layout.properties
devtools/client/themes/layout.css
deleted file mode 100644
--- a/devtools/client/inspector/flexbox/components/FlexContainerProperties.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/* 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/. */
-
-"use strict";
-
-const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
-const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { getStr } = require("devtools/client/inspector/layout/utils/l10n");
-
-const ComputedProperty = createFactory(require("devtools/client/inspector/layout/components/ComputedProperty"));
-
-const Types = require("../types");
-
-class FlexContainerProperties extends PureComponent {
-  static get propTypes() {
-    return {
-      properties: PropTypes.shape(Types.flexContainerProperties).isRequired,
-    };
-  }
-
-  render() {
-    const { properties } =  this.props;
-
-    return (
-      dom.div(
-        {
-          id: "flex-container-properties",
-          className: "flexbox-container",
-        },
-        dom.div({ className: "layout-properties-header" },
-          getStr("flexbox.flexContainerProperties")
-        ),
-        dom.div(
-          {
-            className: "layout-properties-wrapper devtools-monospace",
-            tabIndex: 0,
-          },
-          Object.entries(properties).map(([name, value]) => ComputedProperty({
-            key: name,
-            name,
-            value,
-          }))
-        )
-      )
-    );
-  }
-}
-
-module.exports = FlexContainerProperties;
--- a/devtools/client/inspector/flexbox/components/Flexbox.js
+++ b/devtools/client/inspector/flexbox/components/Flexbox.js
@@ -9,19 +9,16 @@ const {
   createFactory,
   Fragment,
   PureComponent,
 } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { getStr } = require("devtools/client/inspector/layout/utils/l10n");
 
-loader.lazyGetter(this, "FlexContainerProperties", function() {
-  return createFactory(require("./FlexContainerProperties"));
-});
 loader.lazyGetter(this, "FlexItemList", function() {
   return createFactory(require("./FlexItemList"));
 });
 loader.lazyGetter(this, "FlexItemSizingOutline", function() {
   return createFactory(require("./FlexItemSizingOutline"));
 });
 loader.lazyGetter(this, "FlexItemSizingProperties", function() {
   return createFactory(require("./FlexItemSizingProperties"));
@@ -41,22 +38,16 @@ class Flexbox extends PureComponent {
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetFlexboxOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onToggleFlexboxHighlighter: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
-  renderFlexContainerProperties() {
-    return FlexContainerProperties({
-      properties: this.props.flexContainer.properties,
-    });
-  }
-
   renderFlexItemList() {
     const {
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       setSelectedNode,
     } = this.props;
     const { flexItems } = this.props.flexContainer;
 
@@ -128,15 +119,14 @@ class Flexbox extends PureComponent {
           onHideBoxModelHighlighter,
           onSetFlexboxOverlayColor,
           onShowBoxModelHighlighterForNode,
           onToggleFlexboxHighlighter,
           setSelectedNode,
         }),
         !flexItemShown && flexItems.length > 0 ? this.renderFlexItemList() : null,
         flexItemShown ? this.renderFlexItemSizing() : null,
-        !flexItemShown ? this.renderFlexContainerProperties() : null
       )
     );
   }
 }
 
 module.exports = Flexbox;
--- a/devtools/client/inspector/flexbox/components/moz.build
+++ b/devtools/client/inspector/flexbox/components/moz.build
@@ -2,16 +2,15 @@
 # vim: set filetype=python:
 # 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/.
 
 DevToolsModules(
     'Flexbox.js',
     'FlexContainer.js',
-    'FlexContainerProperties.js',
     'FlexItem.js',
     'FlexItemList.js',
     'FlexItemSelector.js',
     'FlexItemSizingOutline.js',
     'FlexItemSizingProperties.js',
     'Header.js',
 )
--- a/devtools/client/locales/en-US/layout.properties
+++ b/devtools/client/locales/en-US/layout.properties
@@ -16,20 +16,16 @@ flexbox.flexContainer=Flex Container
 # LOCALIZATION NOTE) (flexbox.flexItemOf): The accordion header for the Flexbox panel
 # when a flex item is selected. %s represents the flex container selector.
 flexbox.flexItemOf=Flex Item of %S
 
 # LOCALIZATION NOTE (flexbox.noFlexboxeOnThisPage): In the case where there are no CSS
 # flex containers to display.
 flexbox.noFlexboxeOnThisPage=Select a Flex container or item to continue.
 
-# LOCALIZATION NOTE (flexbox.flexContainerProperties): Header for the flex container
-# properties in the Flexbox panel.
-flexbox.flexContainerProperties=Flex Container Properties
-
 # LOCALIZATION NOTE (flexbox.itemSizing.baseSizeSectionHeader): Header label displayed
 # at the start of the flex item sizing Base Size section.
 flexbox.itemSizing.baseSizeSectionHeader=Base Size
 
 # LOCALIZATION NOTE (flexbox.itemSizing.flexibilitySectionHeader): Header label displayed
 # at the start of the flex item sizing Flexibility section.
 flexbox.itemSizing.flexibilitySectionHeader=Flexibility
 
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -440,30 +440,16 @@
 .flex-item-sizing .reasons li {
   grid-column: 1 / 3;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
 /**
- * Flex Container Properties
- */
-
-#flex-container-properties {
-  border-block-start: 1px solid var(--theme-splitter-color);
-  margin-bottom: 5px;
-}
-
-#flex-container-properties .layout-properties-header {
-  padding: 5px 0;
-  padding-inline-start: 20px;
-}
-
-/**
  * Grid Container
  */
 
 #layout-grid-container {
   display: flex;
   flex-direction: column;
   padding: 5px;
 }