Bug 62853 - Web Inspector: Enable settings screen with settings for console and elements panels.
Summary: Web Inspector: Enable settings screen with settings for console and elements ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Alexander Pavlov (apavlov)
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2011-06-17 03:51 PDT by Alexander Pavlov (apavlov)
Modified: 2011-07-05 01:45 PDT (History)
11 users (show)

See Also:


Attachments
[PATCH] Suggested solution, initial version (33.81 KB, patch)
2011-06-17 11:00 PDT, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
[IMAGE] Screenshot of the Style Settings UI (slides to and from the right edge) (91.16 KB, image/png)
2011-06-17 11:04 PDT, Alexander Pavlov (apavlov)
no flags Details
[PATCH] An iteration after a discussion with pfeldman (35.13 KB, patch)
2011-06-22 07:29 PDT, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
[IMAGE] Screenshot for patch 98169 (the pane replaces the style data (and vice versa) when the gearbox 2-state button is clicked) (86.43 KB, image/png)
2011-06-22 07:34 PDT, Alexander Pavlov (apavlov)
no flags Details
[IMAGE] Settings panel in Opera Dragonfly (81.45 KB, image/png)
2011-06-27 13:53 PDT, Pavel Feldman
no flags Details
[PATCH] (Wip) Reusing shortcuts help screen, screenshot to follow. (26.14 KB, patch)
2011-07-01 04:27 PDT, Pavel Feldman
no flags Details | Formatted Diff | Diff
[IMAGE] Screenshot with patch applied. (78.18 KB, image/png)
2011-07-01 05:13 PDT, Pavel Feldman
no flags Details
[PATCH] Wip MacOS looking nice. (25.44 KB, patch)
2011-07-04 03:32 PDT, Pavel Feldman
no flags Details | Formatted Diff | Diff
Patch (64.55 KB, patch)
2011-07-04 07:34 PDT, Pavel Feldman
no flags Details | Formatted Diff | Diff
Patch (20.35 KB, patch)
2011-07-04 10:25 PDT, Pavel Feldman
yurys: review+
Details | Formatted Diff | Diff
[IMAGE] Screenshot with patch applied. (72.81 KB, image/png)
2011-07-04 10:26 PDT, Pavel Feldman
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Alexander Pavlov (apavlov) 2011-06-17 03:51:31 PDT
Users should be able to inspect CSS rules whose selectors employ pseudoclasses like :active, :hover, :focus, :visited.
Comment 1 Alexander Pavlov (apavlov) 2011-06-17 11:00:33 PDT
Created attachment 97620 [details]
[PATCH] Suggested solution, initial version
Comment 2 Alexander Pavlov (apavlov) 2011-06-17 11:04:06 PDT
Created attachment 97621 [details]
[IMAGE] Screenshot of the Style Settings UI (slides to and from the right edge)
Comment 3 Alexander Pavlov (apavlov) 2011-06-17 11:05:55 PDT
I need to mention that the UI is still highly debatable, and thus all the new strings have NOT been added to localizedStrings.js.
Comment 4 Pavel Feldman 2011-06-17 11:09:37 PDT
I'd remove all the borders and use a gray / dark gray background color.  Horizontal lines are enough to separate the sections. Look at the Safari Preferences (say Bookmars tab) for inspiration.

Or you can make it a bit more web-friendly looking as in Chrome's preferences.
Comment 5 Pavel Feldman 2011-06-17 11:22:27 PDT
Some comments after applying the patch:

- Remove the title
- Gear should toggle the settings pane
- Speed up animation
- There is a nested scrollbar base in docked mode, scrollbar does not disappear on settings close
- Esc should close it

I was kinda expecting settings to replace the actual section content. That way you would have no scrollbar issues and the UI would be more consistent. You could animate existing section content to height 0 and then roll settings out vertically (as an idea)
Comment 6 Alexander Pavlov (apavlov) 2011-06-17 15:27:58 PDT
(In reply to comment #5)
> Some comments after applying the patch:
> 
> - Remove the title

Easy to do

> - Gear should toggle the settings pane

Currently I have a pane cover the entire sidebar and inhibiting user interaction with it while the settings pane is active. Do we want the settings pane to behave exactly as the new styles pane content (i.e. not interfere with other sibling panes and the sidebar in general)?

> - Speed up animation

Easy to do

> - There is a nested scrollbar base in docked mode, scrollbar does not disappear on settings close

I never saw this artifact in the docked mode (and I barely understand what it's all about) but I'll investigate.

> - Esc should close it

Should it commit or cancel the changes made? I know it to be the Apple approach that when a settings window is closed, all tweaked settings get applied regardless.

> I was kinda expecting settings to replace the actual section content. That way you would have no scrollbar issues and the UI would be more consistent. You could animate existing section content to height 0 and then roll settings out vertically (as an idea)

While learning stuff about the 2D/3D transforms, I found out that 3D transforms do not work in all browser setups (e.g. one article mentions that Chrome currently supports 3D CSS transforms only with accelerated compositing enabled (for which you may need to tweak your browser config)), so I decided to stick to 2D. If you feel a 3D transform is more appropriate in our case, I'm fine with using it instead. But, as we figured during a discussion, a short/collapsed Styles pane does not look like a good candidate for a replacement by the settings pane. In this case we'd need to do something similar to what you suggest above.
Comment 7 Oliver Hunt 2011-06-19 20:48:02 PDT
Could the settings sheet be made to match the rest of the inspector a bit more?
Comment 8 Alexander Pavlov (apavlov) 2011-06-22 07:29:23 PDT
Created attachment 98169 [details]
[PATCH] An iteration after a discussion with pfeldman
Comment 9 Alexander Pavlov (apavlov) 2011-06-22 07:34:05 PDT
Created attachment 98171 [details]
[IMAGE] Screenshot for patch 98169 (the pane replaces the style data (and vice versa) when the gearbox 2-state button is clicked)
Comment 10 Oliver Hunt 2011-06-23 10:31:55 PDT
Still not really a fan of the UI for this
Comment 11 Pavel Feldman 2011-06-27 13:53:43 PDT
Created attachment 98778 [details]
[IMAGE] Settings panel in Opera Dragonfly

I can't think of anything more user friendly that this one. Except for I would make it in a settings-per-panel manner. That way options would be both: discoverable and contextual.
Comment 12 Timothy Hatcher 2011-06-27 14:15:34 PDT
I prefer https://bug-62853-attachments.webkit.org/attachment.cgi?id=98171 over what Opera does.
Comment 13 Pavel Feldman 2011-07-01 04:27:00 PDT
Created attachment 99456 [details]
[PATCH] (Wip) Reusing shortcuts help screen, screenshot to follow.
Comment 14 Pavel Feldman 2011-07-01 05:13:08 PDT
Created attachment 99459 [details]
[IMAGE] Screenshot with patch applied.

The reasons I like it this way:
- It is consistent with the help screen, so no new UI concepts
- We tend to get too many "gear" icons all over the place (see Elements panel)
- Not always there is a gear icon (Word wrap in DOM view and XHR logging are toggles in the context menus)
- Having settings centralized increase their discoverability

What do you think?
Comment 15 Pavel Feldman 2011-07-04 03:32:21 PDT
Created attachment 99612 [details]
[PATCH] Wip MacOS looking nice.
Comment 16 Pavel Feldman 2011-07-04 07:34:12 PDT
Created attachment 99629 [details]
Patch
Comment 17 Pavel Feldman 2011-07-04 10:25:02 PDT
Created attachment 99643 [details]
Patch
Comment 18 Pavel Feldman 2011-07-04 10:26:27 PDT
Created attachment 99644 [details]
[IMAGE] Screenshot with patch applied.
Comment 19 Yury Semikhatsky 2011-07-05 01:26:29 PDT
Comment on attachment 99643 [details]
Patch

The change looks good to me. Please make sure that everyone is OK with the design.
Comment 20 Pavel Feldman 2011-07-05 01:45:16 PDT
Committed r90387: <http://trac.webkit.org/changeset/90387>