DOM Inspector/Firebug overlay thoughts

edited March 2007 in Stylish
I'm thinking of adding items to DOM Inspector's left side context menu (and hopefully the equivalent in Firebug) that would automatically provide selectors for the selected node. I need to know what you guys think about a few things:

1. What selectors should be provided? Definitely id, class, and element. Really specific attribute selectors (table[width="300"][cellpadding="2"])? Really specific positional selectors (html > body > div > table > tr > td:first-child + td)? Something else?

2. What should be done when a selector is picked?

a) Open the Stylish Add Style dialog with
(selector) { }
If so, should -moz-doc rules be included? If so, which type? If there's already an Add Style dialog open, should it be added to that?

b) Just copy the selector to the clipboard

I'm leaning toward b because it'd be hard to guess what the user intends to do with the selector. And if it works well enough, this could be added to DOMI/Firebug itself.

Comments

  • Posted By: Jason Barnabe (np)1. What selectors should be provided? Definitely id, class, and element. Really specific attribute selectors (table[width="300"][cellpadding="2"])? Really specific positional selectors (html > body > div > table > tr > td:first-child + td)? Something else?
    I'm not really sure how to answer that...coming up with selectors isn't so straight forward. I've always wanted "copy id", "copy class" and "copy attributes" in DOMI though. One to make a specific positional selector would be nice too...for those times when there's no id, class, or attributes.
    Posted By: Jason Barnabe (np)2. What should be done when a selector is picked?
    I'd go with copying it to the clipboard.
  • you should definitely see what wladimir did with the AdblockPlus Element Hiding Helper extension, it does a very good job at the selectors UI (imo need all of the above in #1) and edit checking. but it should have been a part of DOMi (too one off, can't DOMi navigate well, convoluted to fix rule added in error) plus some things are missing (hide all except..).

    i would also go with #2b. usually, there are multiple items on a page needing 'work' and the ideal way would be to select, add to Style, preview, select, add to Style etc. so the DOMi part would fill in an open Style editor. but i realize this kind of interprocess stuff is harder..

    you guys should see if there isn't a way to leverage code.
  • I don't think the Firebug overlay is gonna happen. It doesn't seem set up to allow this kind of thing.
  • It'd be cool for linux users to have the option of copying the selectors to the primary buffer instead of the clipboard. This should be off by default but customizable via options.
  • I'm a Linux user and I don't even know what the primary buffer is.
  • Just a small nit-pick, but with the DOMI overlay in Stylish 0.5a2, it'd be nice if the selectors had the element name's in lowercase (when copying to clipboard and the menu items). Upper case is so 1990's ;p
  • It just takes whatever DOMI tells it the element's name is. Capitalizing doesn't matter in HTML, but if you made up an element called in XHTML and I converted it to foo, the selector wouldn't work.
  • edited March 2007
    So why is it that the XHTML 1.0 Strict source of this userstyles forum is shown as uppercase in DOMI, yet when you view source it's all in lowercase? I don't think I've ever seen lowercase element names in DOMI...it seems to uppercase everything irregardless of the source. I just tried making a new XHTML doc with different cases, and even you're tag in both lower and upper case...no difference. Maybe there's a difference when the XHTML is actually served as application/xhtml+xml instead of text/html, but I'd say that's a extremely rare these days.
  • Yes, it's all in the content type.

    I'm just listening to what DOMI says. Maybe what DOMI says should change.
  • Jason, the primary buffer is like a temporary clipboard. It comes from the most recent selection. Middle-click pastes that buffer. If it's possible to tell firefox that the content has been selected, then that's all that's needed.
  • Sorry to dredge up a slightly old topic, but I'm going to emphasize what Jason says. Doctypes don't matter (that much). The content-type does. Almost all the XHTML pages on the web are being served and parsed as invalid HTML.
  • Posted By: Stupid HeadAlmost all the XHTML pages on the web are being served and parsed as invalid HTML.
    That's exactly why I use HTML 4.01 Strict on my web sites =)
Sign In or Register to comment.