Bug 67793 – Web Inspector: settings pane doesn't fit in with the inspector

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

[Oliver Hunt]

I just noticed that the inspector has acquired a new settings pane, and thought I'd document my thoughts on it.  Alas they aren't positive, but i'm hoping that this is merely an intermediate UI being used during bring-up of a well designed interface.

* The basic theme and style of the entire pane clashes with the inspector, rather than fitting in cleanly
  - We don't use black overlays anywhere else in webkit
  - We don't use yellow for highlights anywhere else
* The layout leaves large gaps, and feels unbalanced
* The font sizes and styles don't seem to be used anywhere else in the inspector
* The masthead doesn't look good
  - The close button is oversized, and the cross looks off-centered
  - The font used for Settings is bigger than any other font i've seen anywhere in the inspector
* I can interact with elements of the inspector that are out side of the bounds of the settings pane

Like I said above, i'm hoping that this is merely a transitionary look, because currently it actually looks bad :-(

[Pavel Feldman]

> Like I said above, i'm hoping that this is merely a transitionary look, because currently it actually looks bad :-(

Same UI is used for keyboard shortcuts screen (press ? while in the inspector). I'll follow up on the UI with our designers. If you have suggestions / or even better a mock, please attach it to the bug.

The general problem is that we will anyway need to create new type / layout in the inspector UI for settings. These settings will need to work across platforms and ports. There is no way we make them look consistent within Chrome and Safari on Mac and on Windows at a time. That's why we used something completely off the standard looks. Bug again, suggestions are welcome.