Bug 168581 – Web Inspector: RTL: hierarchical path components need spacing and icon adjustments

• Component: Web Inspector
• Status: RESOLVED FIXED

[Blaze Burg]

The chevron is the obvious thing but there is some other margin/padding/offsets.

[Blaze Burg]

Created attachment 302108 [details]
collapsed elements tab - LTR

[Blaze Burg]

Created attachment 302109 [details]
collapsed elements tab - RTL

[Blaze Burg]

Created attachment 302110 [details]
resources tab - LTR

[Blaze Burg]

Created attachment 302111 [details]
resources tab - RTL

[Blaze Burg]

To Test:

- Select a deeply nested element in Elements tab to see collapsed path components
- Select a subresource in Resources tab
- Click on collapsed and full path components to verify <select> position

Did not test:
- Text-only path components - where are these used?

[Blaze Burg]

Created attachment 302113 [details]
Patch

[Matt Baker]

(In reply to comment #5)
> To Test:
> 
> - Select a deeply nested element in Elements tab to see collapsed path
> components
> - Select a subresource in Resources tab
> - Click on collapsed and full path components to verify <select> position
> 
> Did not test:
> - Text-only path components - where are these used?

It's used by the execution context path component, in the console.

[Matt Baker]

Created attachment 302159 [details]
[Image] Execution context path component

Shown on pages with workers.

LTR v RTL

[Blaze Burg]

(In reply to comment #8)
> Created attachment 302159 [details]
> [Image] Execution context path component
> 
> Shown on pages with workers.
> 
> LTR v RTL

I'll apply this patch again and add an after screenshot.

[Blaze Burg]

Created attachment 302207 [details]
execution context list (RTL)

Looks correct to me. Please review.

[Matt Baker]

Comment on attachment 302113 [details]
Patch

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

Looks good, r+ with nits

> Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css:65
> +.hierarchical-path-component > :matches(.icon, .selector-arrows) {

Nice cleanup.

> Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css:159
> +    transform: rotate(180deg);

Nit: I think `transform: scaleX(-1)` better expresses the transformation being done here (horizontal flip). It happens that the result is identical for now, but a flip would be more future proof.

[Blaze Burg]

Committed r212688: <http://trac.webkit.org/changeset/212688>