Bug 1521547 - Add container getter to flexbox highlighter to make the code easier to understand r=pbro
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Mon, 21 Jan 2019 17:07:14 +0000
changeset 514737 53d1b01b992467d1ab77ab9023444098280ba7a6
parent 514736 f851b150476a2259413390d4510f27ed62a1d1c2
child 514738 a115176a8faa34bb59da329fc5d458f5ab7f9267
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1521547
milestone66.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 1521547 - Add container getter to flexbox highlighter to make the code easier to understand r=pbro This is simply to make the code easier to read (it simply adds a `get container => this.currentNode` to make things easier to read) so it doesn't require any familiarity with the code itself. Differential Revision: https://phabricator.services.mozilla.com/D17135
devtools/server/actors/highlighters/flexbox.js
--- a/devtools/server/actors/highlighters/flexbox.js
+++ b/devtools/server/actors/highlighters/flexbox.js
@@ -186,16 +186,20 @@ class FlexboxHighlighter extends AutoRef
   get canvas() {
     return this.getElement("canvas");
   }
 
   get color() {
     return this.options.color || DEFAULT_COLOR;
   }
 
+  get container() {
+    return this.currentNode;
+  }
+
   get ctx() {
     return this.canvas.getCanvasContext("2d");
   }
 
   getElement(id) {
     return this.markup.getElement(this.ID_CLASS_PREFIX + id);
   }
 
@@ -297,34 +301,34 @@ class FlexboxHighlighter extends AutoRef
    * The AutoRefreshHighlighter's _hasMoved method returns true only if the
    * element's quads have changed. Override it so it also returns true if the
    * flex container and its flex items have changed.
    */
   _hasMoved() {
     const hasMoved = AutoRefreshHighlighter.prototype._hasMoved.call(this);
 
     if (!this.computedStyle) {
-      this.computedStyle = getComputedStyle(this.currentNode);
+      this.computedStyle = getComputedStyle(this.container);
     }
 
-    const flex = this.currentNode.getAsFlexContainer();
+    const flex = this.container.getAsFlexContainer();
 
     const oldCrossAxisDirection = this.crossAxisDirection;
     this.crossAxisDirection = flex ? flex.crossAxisDirection : null;
     const newCrossAxisDirection = this.crossAxisDirection;
 
     const oldMainAxisDirection = this.mainAxisDirection;
     this.mainAxisDirection = flex ? flex.mainAxisDirection : null;
     const newMainAxisDirection = this.mainAxisDirection;
 
     // Concatenate the axes to simplify conditionals.
     this.axes = `${this.mainAxisDirection} ${this.crossAxisDirection}`;
 
     const oldFlexData = this.flexData;
-    this.flexData = getFlexData(this.currentNode);
+    this.flexData = getFlexData(this.container);
     const hasFlexDataChanged = compareFlexData(oldFlexData, this.flexData);
 
     const oldAlignItems = this.alignItemsValue;
     this.alignItemsValue = this.computedStyle.alignItems;
     const newAlignItems = this.alignItemsValue;
 
     const oldFlexDirection = this.flexDirection;
     this.flexDirection = this.computedStyle.flexDirection;
@@ -510,17 +514,17 @@ class FlexboxHighlighter extends AutoRef
   }
 
   renderFlexContainer() {
     if (!this.currentQuads.content || !this.currentQuads.content[0]) {
       return;
     }
 
     const { devicePixelRatio } = this.win;
-    const containerQuad = getUntransformedQuad(this.currentNode, "content");
+    const containerQuad = getUntransformedQuad(this.container, "content");
     const { width, height } = containerQuad.getBounds();
 
     this.setupCanvas({
       lineDash: FLEXBOX_LINES_PROPERTIES.alignItems.lineDash,
       lineWidthMultiplier: 2,
     });
 
     this.ctx.fillStyle = this.getFlexContainerPattern(devicePixelRatio);
@@ -566,17 +570,17 @@ class FlexboxHighlighter extends AutoRef
   renderFlexLines() {
     if (!this.flexData || !this.currentQuads.content || !this.currentQuads.content[0]) {
       return;
     }
 
     const lineWidth = getDisplayPixelRatio(this.win);
     const options = { matrix: this.currentMatrix };
     const { width: containerWidth, height: containerHeight } =
-      getUntransformedQuad(this.currentNode, "content").getBounds();
+      getUntransformedQuad(this.container, "content").getBounds();
 
     this.setupCanvas({
       useContainerScrollOffsets: true,
     });
 
     for (const flexLine of this.flexData.lines) {
       const { crossStart, crossSize } = flexLine;
 
@@ -648,17 +652,17 @@ class FlexboxHighlighter extends AutoRef
    * Clear the whole alignment container along the main axis for each flex item.
    */
   renderJustifyContent() {
     if (!this.flexData || !this.currentQuads.content || !this.currentQuads.content[0]) {
       return;
     }
 
     const { width: containerWidth, height: containerHeight } =
-      getUntransformedQuad(this.currentNode, "content").getBounds();
+      getUntransformedQuad(this.container, "content").getBounds();
 
     this.setupCanvas({
       lineDash: FLEXBOX_LINES_PROPERTIES.alignItems.lineDash,
       offset: (getDisplayPixelRatio(this.win) / 2) % 1,
       skipLineAndStroke: true,
       useContainerScrollOffsets: true,
     });
 
@@ -758,31 +762,31 @@ class FlexboxHighlighter extends AutoRef
       lineDash = null,
       lineWidthMultiplier = 1,
       offset = (getDisplayPixelRatio(this.win) / 2) % 1,
       skipLineAndStroke = false,
       useContainerScrollOffsets = false }) {
     const { devicePixelRatio } = this.win;
     const lineWidth = getDisplayPixelRatio(this.win);
     const zoom = getCurrentZoom(this.win);
-    const style = getComputedStyle(this.currentNode);
+    const style = getComputedStyle(this.container);
     const position = style.position;
     let offsetX = this._canvasPosition.x;
     let offsetY = this._canvasPosition.y;
 
     if (useContainerScrollOffsets) {
-      offsetX += this.currentNode.scrollLeft / zoom;
-      offsetY += this.currentNode.scrollTop / zoom;
+      offsetX += this.container.scrollLeft / zoom;
+      offsetY += this.container.scrollTop / zoom;
     }
 
     // If the flexbox container is position:fixed we need to subtract the scroll
     // positions of all ancestral elements.
     if (position === "fixed") {
       const { scrollLeft, scrollTop } =
-        getAbsoluteScrollOffsetsForNode(this.currentNode);
+        getAbsoluteScrollOffsetsForNode(this.container);
       offsetX -= scrollLeft / zoom;
       offsetY -= scrollTop / zoom;
     }
 
     const canvasX = Math.round(offsetX * devicePixelRatio * zoom);
     const canvasY = Math.round(offsetY * devicePixelRatio * zoom);
 
     this.ctx.save();
@@ -811,17 +815,17 @@ class FlexboxHighlighter extends AutoRef
     const { width, height } = this._winDimensions;
 
     // Updates the <canvas> element's position and size.
     // It also clear the <canvas>'s drawing context.
     updateCanvasElement(this.canvas, this._canvasPosition, this.win.devicePixelRatio);
 
     // Update the current matrix used in our canvas' rendering
     const { currentMatrix, hasNodeTransformations } =
-      getCurrentMatrix(this.currentNode, this.win, {
+      getCurrentMatrix(this.container, this.win, {
         ignoreWritingModeAndTextDirection: true,
       });
     this.currentMatrix = currentMatrix;
     this.hasNodeTransformations = hasNodeTransformations;
 
     this.renderFlexContainer();
     this.renderFlexLines();
     this.renderJustifyContent();