firefox-devtools / photon Goto Github PK

Maybe also cover popup editors, maybe that's a separate section.

For the Debugger Source List, or the Inspector DOM, for instance.

We use some smaller icons in certain places. We should explain what their specs are, and where they should be used.

Be sure to note:

• What we currently do.
• What we would like to do.
• Some philosophies behind it.

Cover the usage of the tree component in perf-html.

Flexbox, Grid, Computed Layout, info-bars

To avoid confusion.

Possibly to Visuals, possibly to Patterns...

Stuff like hover states on rows, or editable cells/values.

To syncronise work with the DevTools Photon Docs and the UI Library I would like to start a phase of decision making with a focus of the basic building blocks, starting with Typography.
Let's aim to document the aspirational state of DevTools, documenting what is current and making adjustments to reflect our proposed improvements.

The main purpose here is to capture the ideas as perhaps concluding the typography of DevTools will never be achieved in a GitHub Issue. We only need to be happy to the point that UI components can be created with a degree of assurance. It is OK to make amends to these base elements after we conclude here as I'm sure we will after seeing how they affect the layout of DevTools once committed.

I'm going to start the ball rolling with my initial audit and welcome all feedback and suggetsions to ensure we cover all bases with a view to homogenizing when appropriate.

Sans-serif (Segoe UI, San Francisco, Ubuntu...)

Monospace (Consolas, Menlo...)

My idea with the name convention is that we can refer to the type styles like "Sans Beta" and "Mono Alpha", keeping it loose so we're not declaring specific faces or sizes etc. Open to ideas of course!

I think due to the nature of DevTools, and the frequency of 11px and 12px sizes (so far) attempting to declare a sort of scaling ratio might not be appropriate or even possible, but again this is all open for discussion.

Maybe we provide rules for these type styles to provide some additoinal direction i.e:

Mono Beta: To be used when displaying large amounts (or the potetial of large amounts) of code.
Sans Delta Italic: Only to be used as placeholder text for input fields.

I've provided a little cluster of UI elements here to illustrate what we currently have declared above:

@violasong @fvsch

Which ones DevTools uses in particular, and when, and why.

Mostly for Network, but perhaps also for the Application Panel, and maybe the Console?

Things to note:

• Accordions are usually in the sidebar. Maybe they should have another page.
• Something about Buttons in the accordions that I don't remember.
• Also, the Collapse Panel button sometimes flips direction, but sometimes doesn't.

Mostly for the Inspector, but could also be used in the Debugger or Style Editor...

Complete the section including:

• Usage
• Types
• Styles
• Behaviours

As seen in the chevron menu.
Note: there may not be any extra stuff we need there. 🙂

Discuss the amount of animation required (if any) in DevTools UI with examples.
Discuss Standardization of animation, e.g sidebar toggle icons animation behavioural differenecs within each tab.

• Overview of background, including last year's redesign
• Principles not already covered in main design system
• Include links to other parts of Design System that are relevant (especially those we change for DevTools stuff)

This isn't DevTools specific, but we might as well tackle it.

Should cover Main and sub-toolbars, in addition to focus styling, and perhaps styling for dropdown menus in toolbars.

Note: this might need to be split into multiple pages, but let's start with this for now.

As seen between panels, to let them resize.

Search Bars, Filters, multi-field values (CSS)
Also, multi-line input area (Scratchpad/Console).

As seen in Markup View, could also be used in Debugger Source Breakpoints...