Bug 1499668 - Highlighter canvas coordinates switch from 0,0 top left to 0,0 top right when inspecting RTL nodes r=gl

I tried all kinds of CSS changes and experiments to get to the bottom of this.

This is due to an incompatibility between the flexbox API and `devtools/shared/layout/dom-matrix-2d.js::getWritingModeMatrix()`.

Take the following flexbox item:

```
 ______________________________
| ___                          |
||   |                         |
||___|                         |
|______________________________|
```

In LTR mode the coordinates would be something like 5, 10, 25, 35 (x1, y1, x2, y2).

Now let's look at RTL mode:

```
 ______________________________
|                          ___ |
|                         |   ||
|                         |___||
|______________________________|

```
In RTL mode the coordinates would be something like 85, 10, 105, 35 (x1, y1, x2, y2).

getWritingModeMatrix() flips the canvas in RTL mode naively assuming that this will flip our overlay. This causes 2 problems:

1. 0,0 moves from the top left to the top right, complicating our calculations.
2. The flexbox API returns coordinates relative to the top left of the canvas and not the top right.

Similar issues are caused by setting writing modes that results in flipping and rotating the canvas in similar ways.

In a nutshell rotating the canvas actually complicates our calculations instead of simplifying them.

This patch adds two named parameters to allow opting out of writing mode and RTL calculations.

Differential Revision: https://phabricator.services.mozilla.com/D9390

--HG--
extra : moz-landing-system : lando

devtools/server/actors/highlighters/flexbox.js

@@ -66,6 +66,18 @@ const JUSTIFY_CONTENT = "justify-content";
  * - showAlignment(isShown)
  *     @param  {Boolean} isShown
  *     Shows the alignment in the flexbox highlighter.
+ *
+ * Structure:
+ * <div class="highlighter-container">
+ *   <div id="flexbox-root" class="flexbox-root">
+ *     <canvas id="flexbox-canvas"
+ *             class="flexbox-canvas"
+ *             width="4096"
+ *             height="4096"
+ *             hidden="true">
+ *     </canvas>
+ *   </div>
+ * </div>
  */
 class FlexboxHighlighter extends AutoRefreshHighlighter {
   constructor(highlighterEnv) {
@@ -683,8 +695,10 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
     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);
+    const { currentMatrix, hasNodeTransformations } =
+      getCurrentMatrix(this.currentNode, this.win, {
+        ignoreWritingModeAndTextDirection: true,
+      });
     this.currentMatrix = currentMatrix;
     this.hasNodeTransformations = hasNodeTransformations;
 

devtools/server/actors/highlighters/utils/canvas.js

@@ -284,13 +284,16 @@ function getBoundsFromPoints(points) {
  *         The current element.
  * @param  {Window} window
  *         The window object.
+ * @param  {Object} [options.ignoreWritingModeAndTextDirection=false]
+ *                  Avoid transforming the current matrix to match the text direction
+ *                  and writing mode.
  * @return {Object} An object with the following properties:
  *         - {Array} currentMatrix
  *           The current matrix.
  *         - {Boolean} hasNodeTransformations
  *           true if the node has transformed and false otherwise.
  */
-function getCurrentMatrix(element, window) {
+function getCurrentMatrix(element, window, { ignoreWritingModeAndTextDirection } = {}) {
   const computedStyle = getComputedStyle(element);
 
   const paddingTop = parseFloat(computedStyle.paddingTop);
@@ -329,9 +332,12 @@ function getCurrentMatrix(element, window) {
     width: element.offsetWidth - borderLeft - borderRight - paddingLeft - paddingRight,
     height: element.offsetHeight - borderTop - borderBottom - paddingTop - paddingBottom,
   };
-  const writingModeMatrix = getWritingModeMatrix(size, computedStyle);
-  if (!isIdentity(writingModeMatrix)) {
-    currentMatrix = multiply(currentMatrix, writingModeMatrix);
+
+  if (!ignoreWritingModeAndTextDirection) {
+    const writingModeMatrix = getWritingModeMatrix(size, computedStyle);
+    if (!isIdentity(writingModeMatrix)) {
+      currentMatrix = multiply(currentMatrix, writingModeMatrix);
+    }
   }
 
   return { currentMatrix, hasNodeTransformations };