Closed Bug 1499668 Opened 10 months ago Closed 10 months ago

Highlighter canvas coordinates switch from 0,0 top left to 0,0 top right when inspecting RTL nodes

Categories

(DevTools :: Inspector, enhancement, P3)

enhancement

Tracking

(firefox65 fixed)

RESOLVED FIXED
Firefox 65
Tracking Status
firefox65 --- fixed

People

(Reporter: miker, Assigned: miker)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

Highlighter canvas coordinates switch from 0,0 top left to 0,0 top right when inspecting RTL nodes.

This unnecessarily complicates our highlighter code so we should force LTR mode on the canvas to simplify things.

This is particularly important for the Flexbox highlighter due to the number of items we are drawing on the canvas.
I tried all kinds of CSS changes and experiments to get to the bottom of this. 

This is due to an imcompatibility 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.
@gl Assigned to you for review.
Flags: needinfo?(gl)
Now writing mode, RTL etc. are almost right without us adding anything.
(In reply to Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe] from comment #3)
> @gl Assigned to you for review.

No need for these requests. I already see it on phrabicator.
Flags: needinfo?(gl)
Pushed by mratcliffe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/88e1ecec651d
Highlighter canvas coordinates switch from 0,0 top left to 0,0 top right when inspecting RTL nodes r=gl
https://hg.mozilla.org/mozilla-central/rev/88e1ecec651d
Status: ASSIGNED → RESOLVED
Closed: 10 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
I'm not exactly sure why this was marked as a [dt-q] bug. I'll remove it for tracking purposes, but if this is a mistake, please let me know.
Whiteboard: [dt-q]
You need to log in before you can comment on or make changes to this bug.