Open Bug 1170617 Opened 6 years ago Updated 2 years ago

Consolidate the table styles across the developer tools

Categories

(DevTools :: Shared Components, defect)

defect
Not set
normal

Tracking

(Not tracked)

People

(Reporter: gl, Unassigned)

References

Details

(Whiteboard: [devtools-ux])

Attachments

(2 files)

In 1165576, the netmonitor theme was refreshed to https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/DarkTheme-Network@2x.png [1].

There are still some tweaks that can be done to further improve the UX.

- The text font color should be grey like the tabs which is easier on the eyes. See mockup [1]. 

- The reload button isn't clear that it is a button because of the dark background in the button

- The background colors should be adjusted to the colors used in the mockup (@shorlander?) [1]

[1] https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/DarkTheme-Network@2x.png
Flags: needinfo?(shorlander)
See Also: → 1165576
Depends on: 1165576
(In reply to Gabriel Luong [:gl] from comment #0)
> In 1165576, the netmonitor theme was refreshed to
> https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/
> DarkTheme-Network@2x.png [1].
> 
> There are still some tweaks that can be done to further improve the UX.
> 
> - The text font color should be grey like the tabs which is easier on the
> eyes. See mockup [1]. 
Yes, we should use var(--theme-body-color) (gray) here.

> - The reload button isn't clear that it is a button because of the dark
> background in the button
You are definitively right here.

> - The background colors should be adjusted to the colors used in the mockup
> (@shorlander?) [1]
>
> [1]
> https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/
> DarkTheme-Network@2x.png
FYI, I couldn't find this color anywhere here : https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors 
var(--theme-sidebar-background) is probably the nearest color here.
Whiteboard: [devtools-ux]
Flags: needinfo?(shorlander) → needinfo?(hholmes)
Tim's comments make sense to me. Tim, did you mean to assign this bug to me, or was there additional information you needed from me?
(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #2)
> Tim's comments make sense to me. Tim, did you mean to assign this bug to me,
> or was there additional information you needed from me?

Can you give a quick review of the Storage Inspector and Network monitor table styles ? There are some inconsistencies (text alignment, border around cells, ...), and it'd be nice if those were gone (and which styles we want to make common).
Attached image spec-sheet.png
Attached a side-by-side comparison of the current table in the Network Monitor and my design suggestions. (I also tweaked some background colors and such).

The broad strokes of the spec sheet are just that I think we should opt for some less-dramatic background colors for the table and everything should left-align to clean it up.
Flags: needinfo?(hholmes)
See-Also'ing two bugs that felt really relevant while I was designing, at least.
Repurposing this bug, we have a lot of different table styles across the developer tools:
- The performance tool and the memory tool table styles
- the storage inspector table
- the netmonitor table.
Component: Developer Tools: Netmonitor → Developer Tools: Shared Components
Summary: Tweak the new Netmonitor theme refresh → Consolidate the table styles across the developer tools
For bug 1134073, there's some discussion about how one might want to be able to add/remove columns in a table.
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.