[Webkit-unassigned] [Bug 217447] Web Inspector: update styles to use CSS properties with neutral directionality

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=217447

--- Comment #6 from Devin Rousso <drousso at apple.com> ---
Comment on attachment 412390
  --> https://bugs.webkit.org/attachment.cgi?id=412390
Update styles to use CSS properties with neutral directionality

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

Almost there.  A few more changes I think.
 - use shorthands where possible (e.g. `padding-inline` instead of both `padding-inline-start` and `padding-inline-end`)
 - replace `left`/`right` with `inset-inline-start`/`inset-inline-end`

As you've already been doing, please make sure to only modify styles inside `body[dir=___]` rules, as there are some parts of Web Inspector that are intentionally always LTR that probably shouldn't be touched in a large refactoring/renaming patch like this :P

> Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css:40
> +    margin-inline-start: 65px;
> +    margin-inline-end: 55px;

`margin-inline`

> Source/WebInspectorUI/UserInterface/Views/BezierEditor.css:52
>      border-left: 4px solid transparent;
>      border-right: 4px solid transparent;

`border-inline`

> Source/WebInspectorUI/UserInterface/Views/BreakpointPopover.css:82
> +    margin-inline-start: 0;
> +    margin-inline-end: 4px;

`margin-inline`

> Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css:99
> +    margin-inline-start: -5px;
> +    margin-inline-end: 1px;

`margin-inline`

> Source/WebInspectorUI/UserInterface/Views/FindBanner.css:85
> +    margin-inline-start: 6px;
> +    margin-inline-end: -1px;

`margin-inline`

> Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css:141
> +    padding-inline-start: 5px;
> +    padding-inline-end: 1px;

`padding-inline`

> Source/WebInspectorUI/UserInterface/Views/Main.css:561
> +    margin-inline-start: 0.5px;
> +    margin-inline-end: 4px;

`margin-inline`

> Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css:28
> +    margin-inline-start: 8px;
> +    margin-inline-end: 4px;

`margin-inline`

> Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css:54
> +    margin-inline-start: 32px;
> +    margin-inline-end: 3px;

`margin-inline`

> Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css:81
> +    padding-inline-start: 7px;
> +    padding-inline-end: 30px;

`padding-inline`

> Source/WebInspectorUI/UserInterface/Views/QuickConsole.css:89
> +    padding-inline-start: 5px;
> +    padding-inline-end: 1px;

`padding-inline`

> Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css:34
> +    margin-inline-end: var(--tree-outline-icon-margin-end);
> +    margin-inline-start: 0;

`margin-inline`

> Source/WebInspectorUI/UserInterface/Views/ScopeBar.css:128
> +    margin-inline-start: 6px;
> +    margin-inline-end: 2px;

`margin-inline`

> Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css:131
> +    margin-inline-start: 2px;
> +    margin-inline-end: 5px;

`margin-inline`

> Source/WebInspectorUI/UserInterface/Views/TabBar.css:209
> +body:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden)) {

this last selector should be a separate rule
```
    body:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden)) {
        border-inline-end: var(--tab-item-medium-border-style);
    }
```

> Source/WebInspectorUI/UserInterface/Views/TabBar.css:257
> +body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover {

this last selector should be a separate rule
```
    :not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover {
        border-inline-end-color: var(--tab-item-dark-border-color);
    }
```

> Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.css:56
> +    margin-inline-start: 31px;
> +    margin-inline-end: 6px;

`margin-inline`

> Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css:35
>      left: 0;

I think we can change this and the `right: 0;` to `inset-inline-start`

> Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css:60
> +    border-inline-end: var(--record-bar-segment-border-end);
> +    border-inline-start: var(--record-bar-segment-border-start);

`border-inline`

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20201027/02e49a35/attachment-0001.htm>