Here's a tool (add-on) I've been using to help with theme work. It gives you CSS computed values for a range of elements rather than making you click through one element at a time in DOM Inspector.
I first made this back for Fx3.5 when I had to redo all the rules for primary toolbarbuttons to stop everything from moving around when you entered or left customization mode. I needed a report of styling before and after rewriting to make sure nothing changed in all the different toolbar modes, and this tool was a huge help with that.
It's deeply flawed in some ways, which is why I haven't released it, but I still find it useful from time to time, and I resurrected it for use in Australis work and made some improvements, so I'll just toss it out here.
The documentation is in the source, read comments at the top of domtreeproperties.js. There's a to-do list showing completed items and issues still to be addressed. Patches welcome.
To use:
1. Install the domtreeproperties.xpi add-on from http://mcdavis.dreamhosters.com/domtreeproperties/ , restart the browser.
2. Open Scratchpad with shift-F4.
3. In Scratchpad, set environment to browser.
4. Should now have window.dtp defined for the main browser window.
5. Make API calls on it, such as window.dtp.reportMBPById("search-container").
6. Evaluate that with ^L (evaluate and show).
Because of lazy initialization in Firefox UI, you sometimes have to make the same call several times in a row (just reexecute it) before the target element fully instantiates (three times for the search box, because its several popups need to be constructed) and you get the results you're after.
http://mcdavis.dreamhosters.com/domtreeproperties/
computed styles reporting tool
- mcdavis
- Posts: 3195
- Joined: December 9th, 2005, 5:51 am
computed styles reporting tool
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
- mcdavis
- Posts: 3195
- Joined: December 9th, 2005, 5:51 am
Re: computed styles reporting tool
Here's an example of using it with an element that has no id, just a class.
In Scratchpad:
which gives
In Scratchpad:
Code: Select all
dtp.reportMBP(
window.document.getElementById("panel-3-2").querySelector(".devtools-responsiveui-toolbar"),
{collapsedTags: ["menupopup"]}
)
which gives
Code: Select all
Partial DOM Tree margin border-width padding
==================================================================================== ========= ============ =======
toolbar.devtools-responsiveui-toolbar 10 0 10 0 0 0
toolbarbutton.devtools-responsiveui-toolbarbutton.devtools-responsiveui-close 0 0 3 4 3 4
image.toolbarbutton-icon 0 0 0
label.toolbarbutton-text 0 0 0
menulist.devtools-responsiveui-menulist 2 4 2 4 2 0
hbox.menulist-label-box 1 1 0
image.menulist-icon 0 0 0
label.menulist-label 0 0 0 1 0 0
dropmarker.menulist-dropmarker 0 2 1 1 1 1
image.dropmarker-icon 0 0 0
menupopup [+] 0 1 2 2 2 2
toolbarbutton.devtools-responsiveui-toolbarbutton.devtools-responsiveui-rotate 0 1 3
image.toolbarbutton-icon 0 0 0
label.toolbarbutton-text 0 0 0
toolbarbutton.devtools-responsiveui-toolbarbutton.devtools-responsiveui-touch 0 1 3
image.toolbarbutton-icon 0 0 0
label.toolbarbutton-text 0 0 0
toolbarbutton.devtools-responsiveui-toolbarbutton.devtools-responsiveui-screenshot 0 1 3
image.toolbarbutton-icon 0 0 0
label.toolbarbutton-text 0 0 0
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
- patrickjdempsey
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: computed styles reporting tool
Man, this sounds like a really cool thing to add to DOMi.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
- mcdavis
- Posts: 3195
- Joined: December 9th, 2005, 5:51 am
Re: computed styles reporting tool
patrickjdempsey wrote:Man, this sounds like a really cool thing to add to DOMi.
I would love that. I agree, it would be a natural. (Although DOMi is looking a little unmaintained these days ...)
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
- mcdavis
- Posts: 3195
- Joined: December 9th, 2005, 5:51 am
Re: computed styles reporting tool
Updated to fix a bug with reporting box height and box width with non-XUL elements. The following command used to not work, but now it does.
Code: Select all
dtp.reportById('save-page-button',{wantedProperties:['margin','border-width','padding','height','width','h','w']})
Partial DOM Tree margin border-width padding height width h w
============================================================================= =============== ============ ======= ====== ====== == ==
toolbarbutton#save-page-button.toolbarbutton-1.chromeclass-toolbar-additional 6 0 0 0 1 0 6 0 6 77.4px 89.3px 77 89
image.toolbarbutton-icon 4 21.65 4 21.65 0 0 32px 32px 32 32
label.toolbarbutton-text 2 0 0 0 0 0 auto auto 0 0
label.toolbarbutton-multiline-text 2 0 0 0 0 0 26.4px 53px 26 53
#text
span 0 0 0 auto auto 15 0
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
- mcdavis
- Posts: 3195
- Joined: December 9th, 2005, 5:51 am
Re: computed styles reporting tool
Updated to allow reporting of a single element, via new API flag solo:true, without regard to and while ignoring its children. This lets you get data for top-level/high-in-the-tree elements that have a lot of children, such as #main-window, without having to process all their children.
domtreeproperties.0.1.20140616.0127beta.xpi
In Scratchpad:
domtreeproperties.0.1.20140616.0127beta.xpi
In Scratchpad:
Code: Select all
dtp.reportById('main-window',{solo:true,wantedProperties:['margin','border-width','padding','height','width','h','w','display','visibility','-moz-appearance','position','z-index','top','right','bottom','left','background-color','background-image','-moz-binding','min-height','max-height','min-width','max-width']})
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed