computed styles reporting tool

Discuss application theming and theme development.
Post Reply
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

computed styles reporting tool

Post by mcdavis »

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/
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: computed styles reporting tool

Post by mcdavis »

Here's an example of using it with an element that has no id, just a class.

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
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: computed styles reporting tool

Post by patrickjdempsey »

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/
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: computed styles reporting tool

Post by mcdavis »

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
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: computed styles reporting tool

Post by mcdavis »

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
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: computed styles reporting tool

Post by mcdavis »

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:

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
Post Reply