Bug 93691 – Web Inspector: metrics, geolocation, orientation overrides do not belong to the settings panel

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector (Deprecated)

[Pavel Feldman]

It is very painful to go back and forth between settings and rest of the inspector for the metrics / orientation / location overrides. I think we should move these controls into the drawer (a-la local modifications). Gear icon could contain a submenu linking to Settings / Shortcuts / Overrides and the last one would open the overrides drawer.

[Vivek Galatage]

As discussed over IRC, I thought of recording the discussion here in the bug.

I was exploring the device metrics override settings and found that the settings are applicable through all the pages. But this should be made per page/tab and should be restored upon inspector opening for a particular page only.

Would it make sense to have some of the inspector settings applicable on global scope and some to only local scope? 

Also I was thinking of design approach where it would allow the settings to be categorized as global vs local by providing some interface hooks which then can be integrated with browser vendors "Settings"(in case of chrome, it would be browser settings).

[Alexander Pavlov (apavlov)]

Chromium bug: http://code.google.com/p/chromium/issues/detail?id=137873

[Alexander Pavlov (apavlov)]

Created attachment 168710 [details]
[IMAGE] Screenshot of the suggested Overrides drawer UI

[Alexander Pavlov (apavlov)]

Created attachment 169373 [details]
[IMAGE] Updated screenshot with the new button glyph

[Alexander Pavlov (apavlov)]

Created attachment 171446 [details]
Patch

[Alexander Pavlov (apavlov)]

Created attachment 171458 [details]
[IMAGE] Soft menu popup containing the "Overrides" and "Settings" items (in place of the long-press button)

[Alexander Pavlov (apavlov)]

Created attachment 171466 [details]
[IMAGE] Screenshot with the latest patch

[Alexander Pavlov (apavlov)]

Created attachment 171468 [details]
[IMAGE] Settings redesign proposal

This way we'll be able solve a number of issues and won't need the Settings popup menu

[Vivek Galatage]

(In reply to comment #8)
> Created an attachment (id=171468) [details]
> [IMAGE] Settings redesign proposal
> 
> This way we'll be able solve a number of issues and won't need the Settings popup menu

+1 for the above screenshot. It looks very polished and everything is accessible in convenient manner without any popups.

[Konrad Piascik]

Comment on attachment 171446 [details]
Patch

Agree with Vivek +1 on screenshot
Also I know that there's some changes here to the code moved out of SettingsScreen.js and it would be easier to review/see what was changed if you provided patch which only includes a diff of changes that were made to the override code.  This patch will be a merge of 2 diffs, the removal of code from SettingsScreen/creation of the new File + changes made to the moved code)

[Alexander Pavlov (apavlov)]

(In reply to comment #10)
> (From update of attachment 171446 [details])
> Agree with Vivek +1 on screenshot
> Also I know that there's some changes here to the code moved out of SettingsScreen.js and it would be easier to review/see what was changed if you provided patch which only includes a diff of changes that were made to the override code.  This patch will be a merge of 2 diffs, the removal of code from SettingsScreen/creation of the new File + changes made to the moved code)

This screenshot implies that the extraction of the Overrides tab as a separate drawer view should be reverted. It will remain a "tab" in the Settings, which will be converted into a drawer view.

[Paul Irish]

There's a UI inconsistency here that's bugging me though I'm not entirely sure what the right solution is.

* The console drawer has an icon on the left. It works on all panels (but Console)
* Settings and Overrides drawer have a menu from the same bar's settings cog trigger. They work on all panels.
* Search All Sources drawer has no UI trigger. (Starting it forces the sources tab visibility)
* Local Modifications drawer is unique to sources panel. There is no UI to reveal it other than a context menu item.

The drawer title and close icon placed at the end of the the status bar seems awkward, especially on Elements.
 I wonder if we're missing a more intuitive solution.

[Pavel Feldman]

Comment on attachment 171446 [details]
Patch

Clearing r? as agreed offline.

[Konrad Piascik]

(In reply to comment #13)
> (From update of attachment 171446 [details])
> Clearing r? as agreed offline.

Can you provide a summary of the offline discussion for clarification?

[Alexander Pavlov (apavlov)]

Created attachment 172554 [details]
Patch

[Alexander Pavlov (apavlov)]

Created attachment 172555 [details]
[IMAGE] Screenshot of the Overrides drawer view with patch applied

[Alexander Pavlov (apavlov)]

Created attachment 172556 [details]
[IMAGE] Settings dialog with patch applied

[Alexander Pavlov (apavlov)]

Created attachment 174141 [details]
[PATCH] Fixed Settings/Overrides UI on the Mac platform

[Alexander Pavlov (apavlov)]

(In reply to comment #14)
> (In reply to comment #13)
> > (From update of attachment 171446 [details] [details])
> > Clearing r? as agreed offline.
> 
> Can you provide a summary of the offline discussion for clarification?

No special offline discussion, just polishing the design and making sure it looks good on Mac.

So, we are aware of the drawer view statusbar element being close to the breadcrumbs in the Elements panel, but this issue is orthogonal to the separation of the Settings and Overrides, so this can be fixed in under a separate bug.

[Alexander Pavlov (apavlov)]

Created attachment 174401 [details]
[PATCH] Settings covers the entire DevTools area

[Alexander Pavlov (apavlov)]

Created attachment 174402 [details]
[IMAGE] Screenshot of the Settings dialog covering the entire DevTools contents

This looks a bit weird IMO. I'm trying to think of other ideas...will post some mockups soon.

Created attachment 174408 [details]
Mockup for a dialog-box style for settings

Created attachment 174409 [details]
Mockup for dialog-box style on top of a dark overlay

[Alexander Pavlov (apavlov)]

Created attachment 174614 [details]
[PATCH] Final variation with adjusted Settings layout

[Alexander Pavlov (apavlov)]

Committed r134911: <http://trac.webkit.org/changeset/134911>