Developer Tools: Inspector
3 years ago
6 months ago


(Reporter: pbro, Unassigned)


(Depends on: 1 bug, Blocks: 1 bug)

Firefox Tracking Flags

(Not tracked)


(Whiteboard: [creative-tools][devtools-ux])



3 years ago
We need something to put designer-related tools like selecting an element in the page, moving it, resizing it, changing its layout, moving its positioned background-image, editing its border-radius, drop-shadow, transform, etc...

All of these are sometimes better done by modifying the element itself, in the page.
The first example of this is the Geometry Highlighter, which landed hidden because we didn't have a good place to put a button for it.

Here's an idea: have a new mode for the node picker: sticky mode.
Right now, the picker is used for very short amounts of time: turn it on, select an element in the page, which turns it off, and then look at the element representation in the toolbox (modify css rules, etc.).
The idea is to have it stick around in the page: turn it on, select an element: it then remains displayed and its node infobar (the black tooltip that contains the tagname, class, id, dimension) now contains more things:

- a button to close the highlighter
- a button to select another element
- a button to turn the Geometry Highlighter on and start moving the element around,
- and, later, other buttons to: take a screenshot of the element, measure the element, change its border, layout, shadow, transform, etc.

In essence, the idea is to take the highlighter we have today, make it stick around on node selection, take its infobar, and make it the new HUD for designer tools.

The technical complexity is relatively low to achieve this, it's mostly a matter of putting existing things together.

This would play very nicely with the toolbox minimize feature.

Comment 1

3 years ago
Jeff, what do you think?
Flags: needinfo?(jgriffiths)

Comment 2

3 years ago
Oh, I forgot to mention, I wouldn't change the *current* way the highlighter works now, this would have to be enabled through another button the toolbox probably. The main use case of quickly picking elements and then using the toolbox to see/modify them remains unchanged.

Comment 3

3 years ago
Also, the HUD that would contain the buttons for the various tools doesn't necessarily need to be in the nodeinfobar, this is what came to mind as I was thinking about this.
So, to me the important thing to consider is:

* the user has the toolbox minimized, they have two buttons available - the normal inspector/highlighter button and then this new HUD button ( and related key binding )
* the user clicks on the HUD button to launch this new meta-highlighter

From here they can do all the things you you mention - I think measuring and re-sizing are the key bits.

One thing I'm concerned about is targeting the correct node. What do you think about some visual indication of the selector the highlighter is currently targeting?

The second concern is a general one - once we are able to manipulate css state visually, it really starts to matter to me that we synchronize this state properly between tools and in particular that css state changes can be extracted out and saved somehow. I guess the 'as-authored styles' work is key to this.
Flags: needinfo?(jgriffiths)
Whiteboard: [creative-tools]

Comment 5

3 years ago
Making sure this gets UX love.
Whiteboard: [creative-tools] → [creative-tools][devtools-ux]

Comment 6

2 years ago
Inspector bug triage (filter on CLIMBING SHOES).
Severity: normal → enhancement

Comment 7

2 years ago
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3
Blocks: 1333358
No longer depends on: 1333358
FWIW, here's a request on Stack Overflow asking for a sticky element highlighter:

I want this so bad. I think having the "sticky mode" is a key step to a lot of design feature for devtools, as comparing two different element in the page (as, for instance sketch does).
Another way to enable the sticky highlighter would be to add a toggle button besides the hovered or selected element within the node view.

I'd say, the first step here would really just be to make the highlighter sticky. The additional "Designer HUD" features can then be added subsequently.

Patrick, if you think that's a good idea, I'll turn this into a meta-bug and file the related bugs for each related feature.

Flags: needinfo?(pbrosset)

Comment 11

8 months ago
Sure, feel free to file another bug for the sticky mode only. I agree that this can be done in phases.
Flags: needinfo?(pbrosset)
Depends on: 1376205
Summary: Sticky highlighter (aka Designer HUD) → Designer HUD
Depends on: 1376207
Depends on: 1376208
Depends on: 1376209
You need to log in before you can comment on or make changes to this bug.