368783 - Reduce clutter and improve usability for CSS Style Rules

Status: RESOLVED INCOMPLETE

(Other Applications :: DOM Inspector, defect)

Description

[Michael Gall]

User-Agent:       Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9a2pre) Gecko/20070131 Minefield/3.0a2pre
Build Identifier: 

Currently the interface for CSS style rules is overly complicated. It doesn't need the 2 panel interface. This adds an unnecessary amount clicking to find information on each node. To make matters worse, if you switch between nodes you need to repeat the process to view the details again.

This can be fixed by providing all data in a single page view.

Reproducible: Always

Comment 1

[Shawn Wilsher :sdwilsh]

Could you give a few more details on what you are proposing?

Comment 2

[Michael Gall]

Attachment: Screenshot of proposed view

Comment 3

[Shawn Wilsher :sdwilsh]

I'm not so sure I'm seeing the big difference.  Could you possibly explain it please?

Comment 4

[Michael Gall]

Basically, rather than forcing the user to click on the top panel to get any information on the applied styles, the information is all there as soon as they select the node. It reduces a large amount of navigation, especially if you are checking the styles for a large amount of styles.

I've uploaded a prototype of it at http://wakeless.net/wp-content/uploads/cssinspector.xpi be warned that it doesn't have any of the editing functionality hooked up at this stage.

Comment 5

[timeless]

offhand i think you've lost a few attributes that used to be in the top section (priority/weight, important, some toggles).

otherwise, my biggest complaint is that your font sizes are too big. they're a couple points bigger than the heading (object - css style rules).

how do i get the full url for a css sheet? and how do i do this using a keyboard?

Comment 6

[Benjamin Hawkes-Lewis]

The button menu offering a choice of "DOM Node", "Box Model", "XBL Bindings", "CSS Style Rules", "Computed Style", and "JavaScript Object" needs to be placed in the tab cycle to enable keyboard access.
The element names and CSS style property names and values are not currently being read by Window-Eyes, even though one can tab from property to property. Only the link text for the stylesheet links is read.

Comment 7

[Shawn Wilsher :sdwilsh]

(In reply to comment #6)
> The button menu offering a choice of "DOM Node", "Box Model", "XBL Bindings",
> "CSS Style Rules", "Computed Style", and "JavaScript Object" needs to be placed
> in the tab cycle to enable keyboard access.

That's a different bug (probably un-filed)

> The element names and CSS style property names and values are not currently
> being read by Window-Eyes, even though one can tab from property to property.
> Only the link text for the stylesheet links is read.

Is that existing behavior, or is that with this patched (or both)?

Comment 8

[Aaron Leventhal]

If it's done in HTML, I suggest making each section such as 
#search   meyerweb.css
into an <h1>
This will make navigation much easier for screen reader users.

Or, make those HTML table captions, with the data from each section a separate HTML table. 

Comment 9

[Firefox Bug Husbandry Bot]

Bulk close. This component is no longer supported or maintained.

https://bugzilla.mozilla.org/show_bug.cgi?id=1499023

Comment 10

[Firefox Bug Husbandry Bot]

Bulk close. This component is no longer supported or maintained.

https://bugzilla.mozilla.org/show_bug.cgi?id=1499023