Bug 1478397 - Part 3: Return the computed style properties and flex item sizing information from the FlexItemActor. r=rcaliman

devtools/client/inspector/flexbox/flexbox.js

@@ -338,12 +338,13 @@ class FlexboxInspector {
     const flexItems = [];
     const flexItemFronts = await flexboxFront.getFlexItems();
 
-    for (const item of flexItemFronts) {
-      let itemNodeFront = item.nodeFront;
+    for (const flexItemFront of flexItemFronts) {
+      let itemNodeFront = flexItemFront.nodeFront;
 
       if (!itemNodeFront) {
         try {
-          itemNodeFront = await this.walker.getNodeFromActor(item.actorID, ["element"]);
+          itemNodeFront = await this.walker.getNodeFromActor(flexItemFront.actorID,
+            ["element"]);
         } catch (e) {
           // This call might fail if called asynchrously after the toolbox is finished
           // closing.
@@ -352,8 +353,10 @@ class FlexboxInspector {
       }
 
       flexItems.push({
-        actorID: item.actorID,
+        actorID: flexItemFront.actorID,
+        flexItemSizing: flexItemFront.flexItemSizing,
         nodeFront: itemNodeFront,
+        properties: flexItemFront.properties,
       });
     }
 

devtools/client/inspector/flexbox/types.js

@@ -14,9 +14,15 @@ const flexItem = exports.flexItem = {
   // The actor ID of the flex item.
   actorID: PropTypes.string,
 
+  // The flex item sizing data.
+  flexItemSizing: PropTypes.object,
+
   // The NodeFront of the flex item.
   nodeFront: PropTypes.object,
 
+  // The computed style properties of the flex item.
+  properties: PropTypes.object,
+
 };
 
 /**

devtools/server/actors/layout.js

@@ -102,7 +102,14 @@ const FlexboxActor = ActorClassWithSpec(flexboxSpec, {
 
     for (const line of flex.getLines()) {
       for (const item of line.getItems()) {
-        flexItemActors.push(new FlexItemActor(this, item.node));
+        flexItemActors.push(new FlexItemActor(this, item.node, {
+          crossMaxSize: item.crossMaxSize,
+          crossMinSize: item.crossMinSize,
+          mainBaseSize: item.mainBaseSize,
+          mainDeltaSize: item.mainDeltaSize,
+          mainMaxSize: item.mainMaxSize,
+          mainMinSize: item.mainMinSize,
+        }));
       }
     }
 
@@ -119,18 +126,24 @@ const FlexItemActor = ActorClassWithSpec(flexItemSpec, {
    *         The FlexboxActor instance.
    * @param  {DOMNode} element
    *         The flex item element.
+   * @param  {Object} flexItemSizing
+   *         The flex item sizing data.
    */
-  initialize(flexboxActor, element) {
+  initialize(flexboxActor, element, flexItemSizing) {
     Actor.prototype.initialize.call(this, flexboxActor.conn);
 
+    this.containerEl = flexboxActor.containerEl;
     this.element = element;
+    this.flexItemSizing = flexItemSizing;
     this.walker = flexboxActor.walker;
   },
 
   destroy() {
     Actor.prototype.destroy.call(this);
 
+    this.containerEl = null;
     this.element = null;
+    this.flexItemSizing = null;
     this.walker = null;
   },
 
@@ -139,8 +152,27 @@ const FlexItemActor = ActorClassWithSpec(flexItemSpec, {
       return this.actorID;
     }
 
+    const { flexDirection } = CssLogic.getComputedStyle(this.containerEl);
+    const styles = CssLogic.getComputedStyle(this.element);
+    const clientRect = this.element.getBoundingClientRect();
+    const dimension = flexDirection.startsWith("row") ? "width" : "height";
+
     const form = {
       actor: this.actorID,
+      // The flex item sizing data.
+      flexItemSizing: this.flexItemSizing,
+      // The computed style properties of the flex item.
+      properties: {
+        "flex-basis": styles.flexBasis,
+        "flex-grow": styles.flexGrow,
+        "flex-shrink": styles.flexShrink,
+        // min-width/height computed style.
+        [`min-${dimension}`]: styles[`min-${dimension}`],
+        // max-width/height computed style.
+        [`max-${dimension}`]: styles[`max-${dimension}`],
+        // Computed width/height of the flex item element.
+        [dimension]: parseFloat(clientRect[dimension.toLowerCase()].toPrecision(6)),
+      },
     };
 
     // If the WalkerActor already knows the flex item element, then also return its

devtools/shared/fronts/layout.js

@@ -50,6 +50,13 @@ const FlexItemFront = FrontClassWithSpec(flexItemSpec, {
     this._form = form;
   },
 
+  /**
+   * Get the flex item sizing data.
+   */
+  get flexItemSizing() {
+    return this._form.flexItemSizing;
+  },
+
   /**
    * In some cases, the FlexItemActor already knows the NodeActor ID of the node where the
    * flex item is located. In such cases, this getter returns the NodeFront for it.
@@ -61,6 +68,13 @@ const FlexItemFront = FrontClassWithSpec(flexItemSpec, {
 
     return this.conn.getActor(this._form.nodeActorID);
   },
+
+  /**
+   * Get the computed style properties for the flex item.
+   */
+  get properties() {
+    return this._form.properties;
+  },
 });
 
 const GridFront = FrontClassWithSpec(gridSpec, {