[rule view] UI for adding new CSS declarations to a declaration block is not discoverable

NEW
Unassigned

Status

DevTools
CSS Rules Inspector
P3
normal
5 years ago
7 days ago

People

(Reporter: jimb, Unassigned, Mentored)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

5 years ago
To add a new declaration to a CSS declaration block, one can click on the closing curly bracket of the block, but that's not very discoverable.

One fix might be to add an "add declaration" item to the context menu, present when right-clicking anywhere in the block.
The cursor goes I when you hover anywhere over near the ending of a block. That is a very big hit area and somewhat clear that this area is for text editing.

May be we can add a tooltip over that area saying "Click to add a rule"

Comment 2

4 years ago
Just clicking around in the empty space in a block triggers the declaration add. I personally find that sufficient.
I'm not against adding more entries in the context menu as Jim suggested. We have almost no menu items right now in the rule-view context menu, so it doesn't hurt.
Plus, people who are used to clicking at the right places will still be able to do it.
It makes the feature more discoverable indeed. And Firebug 2 used to have it too.
Mentor: pbrosset
Component: Developer Tools: Style Editor → Developer Tools: Inspector

Comment 4

3 years ago
Safari's inline editing UI is pretty interesting, and could be a solution for this.

Updated

3 years ago
Component: Developer Tools: Inspector → Developer Tools: CSS Rules Inspector
Priority: -- → P3

Updated

7 days ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.