Bug 1554872 - Refactor renderFlexibiilitySection method to remove disabled complexity eslint rule. r=pbro
authorArun Kumar Mohan <arunmohandm@gmail.com>
Tue, 30 Jul 2019 18:07:54 +0000
changeset 486114 f41abcd887629d7ff73ed7de16625dd4c9148f1a
parent 486113 6e3e96412fd9cf6d5873f8b5fb13cbe151ea9d62
child 486115 c670534d62a7084dfed2ca9a4d422aabc33f1f35
push id36390
push usercbrindusan@mozilla.com
push dateMon, 05 Aug 2019 09:54:13 +0000
treeherdermozilla-central@d681969e4480 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1554872
milestone70.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 1554872 - Refactor renderFlexibiilitySection method to remove disabled complexity eslint rule. r=pbro Differential Revision: https://phabricator.services.mozilla.com/D39623
devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
@@ -6,16 +6,47 @@
 
 const { 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 Types = require("../types");
 
+const getFlexibilityReasons = ({
+  lineGrowthState,
+  computedFlexGrow,
+  computedFlexShrink,
+  grew,
+  shrank,
+}) => {
+  const reasons = [];
+
+  // Tell users whether the item was set to grow or shrink.
+  if (computedFlexGrow && lineGrowthState === "growing") {
+    reasons.push(getStr("flexbox.itemSizing.setToGrow"));
+  }
+  if (computedFlexShrink && lineGrowthState === "shrinking") {
+    reasons.push(getStr("flexbox.itemSizing.setToShrink"));
+  }
+  if (!computedFlexGrow && !grew && !shrank && lineGrowthState === "growing") {
+    reasons.push(getStr("flexbox.itemSizing.notSetToGrow"));
+  }
+  if (
+    !computedFlexShrink &&
+    !grew &&
+    !shrank &&
+    lineGrowthState === "shrinking"
+  ) {
+    reasons.push(getStr("flexbox.itemSizing.notSetToShrink"));
+  }
+
+  return reasons;
+};
+
 class FlexItemSizingProperties extends PureComponent {
   static get propTypes() {
     return {
       flexDirection: PropTypes.string.isRequired,
       flexItem: PropTypes.shape(Types.flexItem).isRequired,
     };
   }
 
@@ -102,17 +133,16 @@ class FlexItemSizingProperties extends P
     const className = "section base";
     return dom.li(
       { className: className + (property ? "" : " no-property") },
       dom.span({ className: "name" }, title, property),
       this.renderSize(mainBaseSize)
     );
   }
 
-  /* eslint-disable complexity */
   renderFlexibilitySection(
     flexItemSizing,
     mainFinalSize,
     properties,
     computedStyle
   ) {
     const { mainDeltaSize, mainBaseSize, lineGrowthState } = flexItemSizing;
 
@@ -128,41 +158,23 @@ class FlexItemSizingProperties extends P
       return null;
     }
 
     const definedFlexGrow = properties["flex-grow"];
     const computedFlexGrow = computedStyle.flexGrow;
     const definedFlexShrink = properties["flex-shrink"];
     const computedFlexShrink = computedStyle.flexShrink;
 
-    const reasons = [];
-
-    // Tell users whether the item was set to grow or shrink.
-    if (computedFlexGrow && lineGrowthState === "growing") {
-      reasons.push(getStr("flexbox.itemSizing.setToGrow"));
-    }
-    if (computedFlexShrink && lineGrowthState === "shrinking") {
-      reasons.push(getStr("flexbox.itemSizing.setToShrink"));
-    }
-    if (
-      !computedFlexGrow &&
-      !grew &&
-      !shrank &&
-      lineGrowthState === "growing"
-    ) {
-      reasons.push(getStr("flexbox.itemSizing.notSetToGrow"));
-    }
-    if (
-      !computedFlexShrink &&
-      !grew &&
-      !shrank &&
-      lineGrowthState === "shrinking"
-    ) {
-      reasons.push(getStr("flexbox.itemSizing.notSetToShrink"));
-    }
+    const reasons = getFlexibilityReasons({
+      lineGrowthState,
+      computedFlexGrow,
+      computedFlexShrink,
+      grew,
+      shrank,
+    });
 
     let property = null;
 
     if (grew && definedFlexGrow && computedFlexGrow) {
       // If the item grew it's normally because it was set to grow (flex-grow is non 0).
       property = this.renderCssProperty("flex-grow", definedFlexGrow);
     } else if (shrank && definedFlexShrink && computedFlexShrink) {
       // If the item shrank it's either because flex-shrink is non 0.
@@ -188,17 +200,16 @@ class FlexItemSizingProperties extends P
         { className: "name" },
         getStr("flexbox.itemSizing.flexibilitySectionHeader"),
         property
       ),
       this.renderSize(mainDeltaSize, true),
       this.renderReasons(reasons)
     );
   }
-  /* eslint-enable complexity */
 
   renderMinimumSizeSection(flexItemSizing, properties, dimension) {
     const { clampState, mainMinSize, mainDeltaSize } = flexItemSizing;
     const grew = mainDeltaSize > 0;
     const shrank = mainDeltaSize < 0;
     const minDimensionValue = properties[`min-${dimension}`];
 
     // We only display the minimum size when the item actually violates that size during