I wanted to open things up for feedback on a new feature page. For context,
using Nightly, if you right-click on a page element and select "Inspect
Element" from the context menu(*) you'll see everything on the page go dim
except for the element you're inspecting. Somewhere near the element you're
inspecting is the "infobar" which tells you the tag name, ID and classes
associated with the selected page element.
We want to add a bit of interactivity to the infobar for some very common
things that people want to do when they're working on page styling. The most
important part of this is being able to "lock in" pseudo-classes like
"hover" on the element, since for some pseudo-classes there's no other way
to inspect the styles.
With that preamble, the feature page is here:
https://wiki.mozilla.org/DevTools/Features/RichInfobar
and I'd be happy to hear any suggestions you have.
Kevin
--
Kevin Dangoor
work: http://mozilla.com/
email: kdan...@mozilla.com <k...@blazingthings.com>
blog: http://www.BlueSkyOnMars.com
First, whenever I click on a style sheet a new window is opened with the style sheet. I very quickly had three open windows showing the same style sheet. My desktop would be easier to manage if the you didn't open more than one copy of each sheet.
Also, it's hard to find the information in the style sheet. Saying "screen.css:37" is helpful, but give line numbers in the displayed file or highlight the line (or preferably both).
> I've tried the tools several times, and they keep getting more useful. The
> style pop-up window that shows where each attribute comes from will be very
> helpful, but there are some annoyances.
>
The tools are definitely getting there, but there are a good number of
patches still to land.
> First, whenever I click on a style sheet a new window is opened with the
> style sheet. I very quickly had three open windows showing the same style
> sheet. My desktop would be easier to manage if the you didn't open more than
> one copy of each sheet.
>
> Also, it's hard to find the information in the style sheet. Saying
> "screen.css:37" is helpful, but give line numbers in the displayed file or
> highlight the line (or preferably both).
>
Where we're ultimately going with that is to open the Style Editor when you
click that link. It's all a question of timing, because the Style Editor
hasn't landed yet, so we certainly couldn't link over to it yet!
- In the HTML window it is very hard using the keyboard to move trough
elements. It feels more natural to me(on Windows XP) to left click to close
the sub-tree, right to open it, and up and down move to the next visible
element(just like in firebug).
- The idea of having a caption next to the inspected element is very cool,
but if I scroll down the page it should point to the direction that element
is(just like in a map).
- There should be a button of disabling the "lights out feature" and the
dashed border(or an ption to only show it upon hovering the item in the HTML
window), because let's face it in real development you care about how the
element looks with it's sorroundings and it's impossible to design or work
on a web design currently.
- In the console it would be nice to have a trace for errors or at least the
file and the line an error has occured at
Keep working on this, I really like the direction this is going and having
this directly in the browser gives it a lot more power than a normal addon.
Regards,