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 488751 4a5c07069012762e90459ed1f81c48e0a53f3cd1
parent 488750 58fb697a29d3e0f0411cfe26c1a5af83f233bb93
child 488752 920027e02ee128e0bbe86e824395f006045c1cbc
push id9734
push usershindli@mozilla.com
push dateThu, 30 Aug 2018 12:18:07 +0000
treeherdermozilla-beta@71c71ab3afae [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1478397
milestone63.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 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;
     }