Bug 168222 - Web Inspector: add DebugUI setting to manually override UI layout direction
Summary: Web Inspector: add DebugUI setting to manually override UI layout direction
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: BJ Burg
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-02-12 22:29 PST by BJ Burg
Modified: 2017-02-16 10:35 PST (History)
5 users (show)

See Also:


Attachments
Proposed Fix (7.64 KB, patch)
2017-02-12 22:36 PST, BJ Burg
no flags Details | Formatted Diff | Diff
PATCH v2 (7.86 KB, patch)
2017-02-13 18:50 PST, BJ Burg
joepeck: review+
Details | Formatted Diff | Diff
[Screenshot] After - DebugUI turned on (335.13 KB, image/png)
2017-02-16 10:33 PST, BJ Burg
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description BJ Burg 2017-02-12 22:29:29 PST
Let's see how messed up everything is!
Comment 1 BJ Burg 2017-02-12 22:36:29 PST
Created attachment 301333 [details]
Proposed Fix
Comment 2 Devin Rousso 2017-02-13 01:16:09 PST
Comment on attachment 301333 [details]
Proposed Fix

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

> Source/WebInspectorUI/UserInterface/Base/Main.js:2144
> +    if (!allowedValues.has(value))

I think you can express this simpler as `Object.values(WebInspector.LayoutDirection).includes(value)`.  This way it will also support future changes to WI.LayoutDirection (although I think that's probably not going to happen).

> Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:202
> +                let options = new Map()

While I am not against this style, I personally would find it clearer to just use the nested array syntax:

let options = new Map([
    [WebInspector.LayoutDirection.System, WebInspector.unlocalizedString("System Default")],
    [WebInspector.LayoutDirection.LTR, WebInspector.unlocalizedString("Left to Right (LTR)")],
    [WebInspector.LayoutDirection.RTL, WebInspector.unlocalizedString("Right to Left (RTL)")]
]);

> Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:207
> +                for (var [setting, label] of options) {

NIT: let instead of var
Also, I think the name "value" or "key" is better than "setting", as the latter implies it's a WebInspector.Setting object.

> Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:208
> +                    let option = select.createChild("option");

OK now I'm confused.  Are we using `createChild` or are we trying to avoid it?  In some patches I've done in the past I've been told to use `element.appendChild(document.createElement(...))`.
Comment 3 Joseph Pecoraro 2017-02-13 10:56:22 PST
> > Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:208
> > +                    let option = select.createChild("option");
> 
> OK now I'm confused.  Are we using `createChild` or are we trying to avoid
> it?  In some patches I've done in the past I've been told to use
> `element.appendChild(document.createElement(...))`.

I would rather we just use the pure DOM methods. But I have no reasoning other then clarity and personal preference.
Comment 4 Matt Baker 2017-02-13 12:55:12 PST
(In reply to comment #3)
> > > Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:208
> > > +                    let option = select.createChild("option");
> > 
> > OK now I'm confused.  Are we using `createChild` or are we trying to avoid
> > it?  In some patches I've done in the past I've been told to use
> > `element.appendChild(document.createElement(...))`.
> 
> I would rather we just use the pure DOM methods. But I have no reasoning
> other then clarity and personal preference.

I agree that using createChild makes the code less clear, for a fairly insignificant increase in convenience. We should strike it from the code base, IMO.
Comment 5 BJ Burg 2017-02-13 15:09:58 PST
(In reply to comment #2)
> Comment on attachment 301333 [details]
> Proposed Fix
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=301333&action=review
> 
> > Source/WebInspectorUI/UserInterface/Base/Main.js:2144
> > +    if (!allowedValues.has(value))
> 
> I think you can express this simpler as
> `Object.values(WebInspector.LayoutDirection).includes(value)`.  This way it
> will also support future changes to WI.LayoutDirection (although I think
> that's probably not going to happen).
> 
> > Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:202
> > +                let options = new Map()
> 
> While I am not against this style, I personally would find it clearer to
> just use the nested array syntax:
> 
> let options = new Map([
>     [WebInspector.LayoutDirection.System,
> WebInspector.unlocalizedString("System Default")],
>     [WebInspector.LayoutDirection.LTR, WebInspector.unlocalizedString("Left
> to Right (LTR)")],
>     [WebInspector.LayoutDirection.RTL, WebInspector.unlocalizedString("Right
> to Left (RTL)")]
> ]);
> 
> > Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:207
> > +                for (var [setting, label] of options) {
> 
> NIT: let instead of var
> Also, I think the name "value" or "key" is better than "setting", as the
> latter implies it's a WebInspector.Setting object.
> 
> > Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:208
> > +                    let option = select.createChild("option");
> 
> OK now I'm confused.  Are we using `createChild` or are we trying to avoid
> it?  In some patches I've done in the past I've been told to use
> `element.appendChild(document.createElement(...))`.

This was copy-pasted from the above code. Let's clean up the entire file at once and not stall this feature.
Comment 6 BJ Burg 2017-02-13 18:33:32 PST
<rdar://problem/30456742>
Comment 7 BJ Burg 2017-02-13 18:42:54 PST
Comment on attachment 301333 [details]
Proposed Fix

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

>> Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:202
>> +                let options = new Map()
> 
> While I am not against this style, I personally would find it clearer to just use the nested array syntax:
> 
> let options = new Map([
>     [WebInspector.LayoutDirection.System, WebInspector.unlocalizedString("System Default")],
>     [WebInspector.LayoutDirection.LTR, WebInspector.unlocalizedString("Left to Right (LTR)")],
>     [WebInspector.LayoutDirection.RTL, WebInspector.unlocalizedString("Right to Left (RTL)")]
> ]);

OK

>> Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:207
>> +                for (var [setting, label] of options) {
> 
> NIT: let instead of var
> Also, I think the name "value" or "key" is better than "setting", as the latter implies it's a WebInspector.Setting object.

OK (though i think it's less clear locally)

>> Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:208
>> +                    let option = select.createChild("option");
> 
> OK now I'm confused.  Are we using `createChild` or are we trying to avoid it?  In some patches I've done in the past I've been told to use `element.appendChild(document.createElement(...))`.

I'll switch it.
Comment 8 BJ Burg 2017-02-13 18:50:04 PST
Created attachment 301436 [details]
PATCH v2
Comment 9 Joseph Pecoraro 2017-02-14 11:27:16 PST
Comment on attachment 301436 [details]
PATCH v2

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

r=me

> Source/WebInspectorUI/UserInterface/Base/Main.js:54
> +}

Nit: Semicolon

> Source/WebInspectorUI/UserInterface/Base/Main.js:2135
> +}

Nit: Semicolon

> Source/WebInspectorUI/UserInterface/Base/Main.js:2146
> +    window.location.reload();

Just `location.reload()` is fine.

> Source/WebInspectorUI/UserInterface/Base/Main.js:2147
> +}

Nit: Semicolon
Comment 10 BJ Burg 2017-02-16 10:24:24 PST
(In reply to comment #9)
> Comment on attachment 301436 [details]
> PATCH v2
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=301436&action=review
> 
> r=me
> 
> > Source/WebInspectorUI/UserInterface/Base/Main.js:54
> > +}
> 
> Nit: Semicolon
> 
> > Source/WebInspectorUI/UserInterface/Base/Main.js:2135
> > +}
> 
> Nit: Semicolon
> 
> > Source/WebInspectorUI/UserInterface/Base/Main.js:2146
> > +    window.location.reload();
> 
> Just `location.reload()` is fine.

I really, really prefer using `window` to avoid needing to whitelist more global variables in my brain and in ESLint. We tend to use window.location in most places. And, in many places `location` is shadowed by a local variable.

> 
> > Source/WebInspectorUI/UserInterface/Base/Main.js:2147
> > +}
> 
> Nit: Semicolon
Comment 11 BJ Burg 2017-02-16 10:31:42 PST
To test:
 - Go to settings tabs
 - Toggle DebugUI in engineering build (Cmd-Shift-Opt + D)
 - Use the select to change layout direction value

Expected Behavior:
 - Turning DebugUI on should make the setting appear immediately.
 - Turning DebugUI back off should make the setting disappear immediately.
 - Changing the value should cause the inspector frontend to reload immediately.
 - The reloaded UI should have the specified layout direction.
Comment 12 BJ Burg 2017-02-16 10:33:32 PST
Created attachment 301784 [details]
[Screenshot] After - DebugUI turned on
Comment 13 BJ Burg 2017-02-16 10:35:35 PST
Committed r212445: <http://trac.webkit.org/changeset/212445>