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

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Jim Blandy :jimb]

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.

Comment 1

[Girish Sharma [:Optimizer]]

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

[Jonathan Allard]

Just clicking around in the empty space in a block triggers the declaration add. I personally find that sufficient.

Comment 3

[Patrick Brosset <:pbro>]

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.

Comment 4

[Tim Nguyen :ntim]

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

Comment 5

[Paarmita Bhargava]

Hey, I could work on it. Can you please help in which file do I need to make changes for it?