⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 248991 in webkit


Ignore:
Timestamp:
Aug 21, 2019, 7:33:40 PM (7 years ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: RTL: DOM outline in Elements tab should be LTR
​https://bugs.webkit.org/show_bug.cgi?id=200601

Reviewed by Timothy Hatcher.

Make DOM outlines in Console and Elements tab always LTR,
and unsure that Left and Right arrow keys continue working correctly.

  • UserInterface/Base/Main.js:

(WI.resolveLayoutDirectionForElement): Added.
The existing WI.resolvedLayoutDirection function returns the value of the root DOM element.
The newly added resolveLayoutDirectionForElement function returns the correct value for any element,
including elements with dir=ltr inside of <body dir=rtl>.

  • UserInterface/Views/DOMTreeOutline.css:

(.tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded):
(.tree-outline.dom li:not(.editing)):
(.tree-outline.dom li.editing):
(.tree-outline.dom li .pseudo-class-indicator):
(.tree-outline.dom.single-node li):
(.tree-outline.dom li.parent):
(.tree-outline.dom li .html-tag.close):
(.tree-outline.dom li.parent::before):
(.tree-outline.dom li.parent.shadow::after):
Remove RTL logic.

  • UserInterface/Views/DOMTreeOutline.js:
  • UserInterface/Views/TreeOutline.js:

(WI.TreeOutline.prototype._treeKeyDown):
Make Left and Right arrow keys work correctly for LTR DOM outlines inside of the global RTL.

Location:
trunk/Source/WebInspectorUI
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r248943 r248991  
     12019-08-21  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: RTL: DOM outline in Elements tab should be LTR
     4        https://bugs.webkit.org/show_bug.cgi?id=200601
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        Make DOM outlines in Console and Elements tab always LTR,
     9        and unsure that Left and Right arrow keys continue working correctly.
     10
     11        * UserInterface/Base/Main.js:
     12        (WI.resolveLayoutDirectionForElement): Added.
     13        The existing WI.resolvedLayoutDirection function returns the value of the root DOM element.
     14        The newly added resolveLayoutDirectionForElement function returns the correct value for any element,
     15        including elements with `dir=ltr` inside of `<body dir=rtl>`.
     16
     17        * UserInterface/Views/DOMTreeOutline.css:
     18        (.tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded):
     19        (.tree-outline.dom li:not(.editing)):
     20        (.tree-outline.dom li.editing):
     21        (.tree-outline.dom li .pseudo-class-indicator):
     22        (.tree-outline.dom.single-node li):
     23        (.tree-outline.dom li.parent):
     24        (.tree-outline.dom li .html-tag.close):
     25        (.tree-outline.dom li.parent::before):
     26        (.tree-outline.dom li.parent.shadow::after):
     27        Remove RTL logic.
     28
     29        * UserInterface/Views/DOMTreeOutline.js:
     30        * UserInterface/Views/TreeOutline.js:
     31        (WI.TreeOutline.prototype._treeKeyDown):
     32        Make Left and Right arrow keys work correctly for LTR DOM outlines inside of the global RTL.
     33
    1342019-08-21  Devin Rousso  <drousso@apple.com>
    235

  • trunk/Source/WebInspectorUI/UserInterface/Base/Main.js

    r248773 r248991  
    27102710};
    27112711
     2712WI.resolveLayoutDirectionForElement = function(element)
     2713{
     2714    let layoutDirection = WI.resolvedLayoutDirection();
     2715
     2716    // Global LTR never includes RTL containers. Return early.
     2717    if (layoutDirection === WI.LayoutDirection.LTR)
     2718        return layoutDirection;
     2719
     2720    let style = getComputedStyle(element);
     2721    return style.direction;
     2722};
     2723
    27122724WI.setLayoutDirection = function(value)
    27132725{

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css

    r248287 r248991  
    102102}
    103103
    104 body[dir=ltr] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
     104.tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
    105105    border-left-width: var(--sublist-border-width-start);
    106 }
    107 
    108 body[dir=rtl] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
    109     border-right-width: var(--sublist-border-width-start);
    110106}
    111107
    … …  
    123119
    124120.tree-outline.dom li:not(.editing) {
    125     -webkit-padding-start: var(--item-padding-start);
    126     -webkit-padding-end: var(--item-padding-end);
     121    padding-left: var(--item-padding-start);
     122    padding-right: var(--item-padding-end);
    127123}
    128124
    129125.tree-outline.dom li.editing {
    130     -webkit-margin-start: var(--item-padding-start);
    131     -webkit-margin-end: var(--item-padding-end);
     126    margin-left: var(--item-padding-start);
     127    margin-right: var(--item-padding-end);
    132128}
    133129
    … …  
    143139}
    144140
    145 body[dir=ltr] .tree-outline.dom li .pseudo-class-indicator {
     141.tree-outline.dom li .pseudo-class-indicator {
    146142    left: var(--item-pseudo-class-indicator-start);
    147 }
    148 
    149 body[dir=rtl] .tree-outline.dom li .pseudo-class-indicator {
    150     right: var(--item-pseudo-class-indicator-start);
    151143}
    152144
    … …  
    156148
    157149.tree-outline.dom.single-node li {
    158     -webkit-padding-start: 2px;
     150    padding-left: 2px;
    159151}
    160152
    … …  
    168160
    169161.tree-outline.dom li.parent {
    170     -webkit-margin-start: -15px;
     162    margin-left: -15px;
    171163    line-height: 13px;
    172164}
    173165
    174166.tree-outline.dom li .html-tag.close {
    175     -webkit-margin-start: calc(-1 * var(--sublist-margin-start) - var(--sublist-border-width-start));
     167    margin-left: calc(-1 * var(--sublist-margin-start) - var(--sublist-border-width-start));
    176168}
    177169
    … …  
    190182    width: 13px;
    191183    height: 13px;
    192     -webkit-padding-end: 2px;
     184    padding-right: 2px;
    193185    content: "";
    194186    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
    … …  
    197189}
    198190
    199 body[dir=ltr] .tree-outline.dom li.parent::before {
     191.tree-outline.dom li.parent::before {
    200192    float: left;
    201 }
    202 
    203 body[dir=rtl] .tree-outline.dom li.parent::before {
    204     float: right;
    205     transform: scaleX(-1);
    206193}
    207194
    … …  
    239226    height: 1.2em;
    240227    margin-top: -13px;
    241     -webkit-margin-start: -2px;
     228    margin-left: -2px;
    242229    content: "";
    243230    background-color: hsla(0, 0%, 90%, 0.5);

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js

    r247053 r248991  
    4545
    4646        this.element.classList.add("dom", WI.SyntaxHighlightedStyleClassName);
     47        this.element.dir = "ltr";
    4748
    4849        if (showLastSelected)

  • trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js

    r248537 r248991  
    599599            return;
    600600
    601         let isRTL = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL;
     601        let isRTL = WI.resolveLayoutDirectionForElement(this.element) === WI.LayoutDirection.RTL;
    602602        let expandKeyIdentifier = isRTL ? "Left" : "Right";
    603603        let collapseKeyIdentifier = isRTL ? "Right" : "Left";
Note: See TracChangeset for help on using the changeset viewer.