DevTools: Fully support RTL direction in the grid overlay

The DevTools grid overlay was recently modified to support RTL
direction. The fix included the required changes for lines and gaps to
be drawn correctly (see
https://chromium-review.googlesource.com/c/chromium/src/+/2213530).

However it did not include changes for the labels to appear in the right
places (line numbers, line names, area names, track sizes).

This is what this change is about.
In it, I also updated the web test for RTL grids as the expected label
positions were now wrong.

Bug: 1096971
Change-Id: Ib4ed28462ab3bd5ad746d955da4d56db5f95dcfc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2375687
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Cr-Commit-Position: refs/heads/master@{#801730}

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-direction-expected.txt

@@ -362,13 +362,13 @@ rtlGrid{
       "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
-          "x": 48,
+          "x": 98,
           "y": 44,
           "computedSize": 20,
           "authoredSize": "20px"
         },
         {
-          "x": 83,
+          "x": 63,
           "y": 44,
           "computedSize": 50,
           "authoredSize": "50px"
@@ -376,7 +376,7 @@ rtlGrid{
       ],
       "rowTrackSizes": [
         {
-          "x": 38,
+          "x": 108,
           "y": 94,
           "computedSize": 100,
           "authoredSize": "100px"
@@ -434,49 +434,49 @@ rtlGrid{
       ],
       "positiveRowLineNumberPositions": [
         {
-          "x": 38,
+          "x": 108,
           "y": 44
         },
         {
-          "x": 38,
+          "x": 108,
           "y": 144
         }
       ],
       "positiveColumnLineNumberPositions": [
         {
-          "x": 38,
+          "x": 108,
           "y": 44
         },
         {
-          "x": 58,
+          "x": 88,
           "y": 44
         },
         {
-          "x": 108,
+          "x": 38,
           "y": 44
         }
       ],
       "negativeRowLineNumberPositions": [
         {
-          "x": 108,
+          "x": 38,
           "y": 44
         },
         {
-          "x": 108,
+          "x": 38,
           "y": 144
         }
       ],
       "negativeColumnLineNumberPositions": [
         {
-          "x": 38,
+          "x": 108,
           "y": 144
         },
         {
-          "x": 58,
+          "x": 88,
           "y": 144
         },
         {
-          "x": 108,
+          "x": 38,
           "y": 144
         }
       ],
@@ -888,13 +888,13 @@ rtlGridGap{
       "writingMode": "horizontal-tb",
       "columnTrackSizes": [
         {
-          "x": 32,
+          "x": 98,
           "y": 44,
           "computedSize": 20,
           "authoredSize": "20px"
         },
         {
-          "x": 83,
+          "x": 47,
           "y": 44,
           "computedSize": 50,
           "authoredSize": "50px"
@@ -902,7 +902,7 @@ rtlGridGap{
       ],
       "rowTrackSizes": [
         {
-          "x": 22,
+          "x": 108,
           "y": 94,
           "computedSize": 100,
           "authoredSize": "100px"
@@ -966,49 +966,49 @@ rtlGridGap{
       ],
       "positiveRowLineNumberPositions": [
         {
-          "x": 22,
+          "x": 108,
           "y": 44
         },
         {
-          "x": 22,
+          "x": 108,
           "y": 144
         }
       ],
       "positiveColumnLineNumberPositions": [
         {
-          "x": 22,
+          "x": 108,
           "y": 44
         },
         {
-          "x": 50,
+          "x": 80,
           "y": 44
         },
         {
-          "x": 108,
+          "x": 22,
           "y": 44
         }
       ],
       "negativeRowLineNumberPositions": [
         {
-          "x": 108,
+          "x": 22,
           "y": 44
         },
         {
-          "x": 108,
+          "x": 22,
           "y": 144
         }
       ],
       "negativeColumnLineNumberPositions": [
         {
-          "x": 22,
+          "x": 108,
           "y": 144
         },
         {
-          "x": 50,
+          "x": 80,
           "y": 144
         },
         {
-          "x": 108,
+          "x": 22,
           "y": 144
         }
       ],