Web Inspector: RTL: DOM outline in Elements tab should be LTR

[Nikita Vasilyev]

Created attachment 375985 [details]
[Image] Bug

Currently, HTML is garbled.

A few examples:

    <div id="flatpage" class="flatpages">

shown as:

    <"div id="flatpage" class="flatpages">

---
 
    <link href="https://static.npmjs.com/assets/cjz3o4s010001df74sudx2ja9/apos-
      minified/anon-cjz3o4s010001df74sudx2ja9.css" rel="stylesheet">

shown as:

    link href="https://static.npmjs.com/assets/cjz3o4s010001df74sudx2ja9/apos->
      <"minified/anon-cjz3o4s010001df74sudx2ja9.css" rel="stylesheet

[Nikita Vasilyev]

Created attachment 376551 [details]
Patch

[Nikita Vasilyev]

Created attachment 376553 [details]
[Image] With patch applied

[Timothy Hatcher]

Comment on attachment 376551 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=376551&action=review

> Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js:47
> +        this.element.dir = "ltr";

Set this in CSS instead?

[Nikita Vasilyev]

Comment on attachment 376551 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=376551&action=review

>> Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js:47
>> +        this.element.dir = "ltr";
> 
> Set this in CSS instead?

I set this as an attribute because there are CSS selectors that depend on it. For example, there's one that "unmirrors" disclosure triangles:

body[dir=rtl] [dir=ltr] .tree-outline .item .disclosure-button {
    transform: unset;
}

[WebKit Commit Bot]

Comment on attachment 376551 [details]
Patch

Clearing flags on attachment: 376551

Committed r248991: <https://trac.webkit.org/changeset/248991>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/54583339>