Reduce clutter and improve usability for CSS Style Rules

NEW
Unassigned

Status

Other Applications
DOM Inspector
12 years ago
6 years ago

People

(Reporter: Michael Gall, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

12 years ago
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
Could you give a few more details on what you are proposing?
(Reporter)

Comment 2

12 years ago
Created attachment 253441 [details]
Screenshot of proposed view
I'm not so sure I'm seeing the big difference.  Could you possibly explain it please?
(Reporter)

Comment 4

12 years ago
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

12 years ago
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

12 years ago
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.
(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

12 years ago
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. 
Assignee: dom-inspector → nobody
QA Contact: timeless → dom-inspector
Status: UNCONFIRMED → NEW
Ever confirmed: true
You need to log in before you can comment on or make changes to this bug.