Bug 1478397 - Part 3: Return the computed style properties and flex item sizing information from the FlexItemActor. r=rcaliman
authorGabriel Luong <gabriel.luong@gmail.com>
Tue, 28 Aug 2018 10:43:40 -0400
changeset 481861 4a5c07069012762e90459ed1f81c48e0a53f3cd1
parent 481860 58fb697a29d3e0f0411cfe26c1a5af83f233bb93
child 481862 920027e02ee128e0bbe86e824395f006045c1cbc
push id232
push userfmarier@mozilla.com
push dateWed, 05 Sep 2018 20:45:54 +0000
reviewersrcaliman
bugs1478397
milestone63.0a1
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
devtools/client/inspector/flexbox/types.js
devtools/server/actors/layout.js
devtools/shared/fronts/layout.js
--- a/devtools/client/inspector/flexbox/flexbox.js
+++ b/devtools/client/inspector/flexbox/flexbox.js
@@ -333,32 +333,35 @@ class FlexboxInspector {
 
     const highlighted = this._highlighters &&
       containerNodeFront == this.highlighters.flexboxHighlighterShown;
 
     // Fetch the flex items for the given flex container and the flex item NodeFronts.
     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.
           return;
         }
       }
 
       flexItems.push({
-        actorID: item.actorID,
+        actorID: flexItemFront.actorID,
+        flexItemSizing: flexItemFront.flexItemSizing,
         nodeFront: itemNodeFront,
+        properties: flexItemFront.properties,
       });
     }
 
     const currentUrl = this.inspector.target.url;
     // Get the hostname, if there is no hostname, fall back on protocol
     // ex: `data:` uri, and `about:` pages
     const hostname = parseURL(currentUrl).hostname || parseURL(currentUrl).protocol;
     const customColors = await this.getCustomFlexboxColors();
--- a/devtools/client/inspector/flexbox/types.js
+++ b/devtools/client/inspector/flexbox/types.js
@@ -9,19 +9,25 @@ const PropTypes = require("devtools/clie
 /**
  * A flex item data.
  */
 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,
+
 };
 
 /**
  * A flex container data.
  */
 exports.flexbox = {
 
   // The actor ID of the flex container.
--- a/devtools/server/actors/layout.js
+++ b/devtools/server/actors/layout.js
@@ -97,55 +97,87 @@ const FlexboxActor = ActorClassWithSpec(
     if (!flex) {
       return [];
     }
 
     const flexItemActors = [];
 
     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,
+        }));
       }
     }
 
     return flexItemActors;
   },
 });
 
 /**
  * The FlexItemActor provides information about a flex items' data.
  */
 const FlexItemActor = ActorClassWithSpec(flexItemSpec, {
   /**
    * @param  {FlexboxActor} flexboxActor
    *         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;
   },
 
   form(detail) {
     if (detail === "actorid") {
       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
     // ActorID so we avoid the client from doing another round trip to get it in many
     // cases.
     if (this.walker.hasNode(this.element)) {
       form.nodeActorID = this.walker.getNode(this.element).actorID;
     }
--- a/devtools/shared/fronts/layout.js
+++ b/devtools/shared/fronts/layout.js
@@ -46,26 +46,40 @@ const FlexItemFront = FrontClassWithSpec
     if (detail === "actorid") {
       this.actorID = form;
       return;
     }
     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.
    */
   get nodeFront() {
     if (!this._form.nodeActorID) {
       return null;
     }
 
     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, {
   form: function(form, detail) {
     if (detail === "actorid") {
       this.actorID = form;
       return;
     }