_ff-addon-snippet-PrettyPrintFromVariableViewConsoleLog - Instead of cDump, do Services.appShell.hiddenDOMWindow.console.log or console.info then can view absoultely everything in VariableViewer in Browser Console. However cannot make file of it and diff so I am creating this snippet that prints the current variable dump in VariableViewer into a…

_ff-addon-snippet-PrettyPrintFromVariableViewConsoleLog.js

function takeToTabTheCurViewVar() { //whatever var is currently showing is printed to tab
    var opts = {
        title: 'inaugral',
        maxDepth: 0,
        varName: 'window'
    };
    
    var me = Services.wm.getMostRecentWindow(null);
    var console = Services.appShell.hiddenDOMWindow.console;
    
    var cWin = Services.wm.getMostRecentWindow('navigator:browser');
    if (!cWin) {
        Cu.reportError('no recent browser with tabs found. cannot cDump. aborted.');
        return; //note: this will error out as we are not in a function right now
    }
    
    var webconsole = Services.wm.getMostRecentWindow('devtools:webconsole');
    var frameElement = webconsole.document.querySelector('.iframe-variablesview');
    var fdoc = frameElement.contentDocument; //frame document
    var variables = fdoc.querySelector('#variables');
    
    var initVbox = variables.querySelector('.variables-view-scope'); //is only one of this //main vbox that holds everything including head
    
    
    var initGlobal = true;
    var finalDiv = jsonToDOM(['div', {},
                                       dig(initVbox, 0)
                             ], cWin.document, referenceNodes); //todo:should open new tab first and then use its cWin.document
    
    
    
    var dig = function(targ, cDepth, plain_enumable) { //fed targ must be vbox with first child hbox.title and two vbox'es one for enum and one for nonenum
        var json;
        var hbox_title = targ.childNodes[0]; //targ.querySelector('hbox:first-of-type');
        var arrow = targ.childNodes[0];// hbox_title.querySelector('.arrow');
        var arrowClass = arrow.getAttribute('class');
        if (!arrowClass || arrowClass != 'arrow') {  //i dont set arrow to true if it has arrow class because i need it later on to sim click on it to get deeper key val pairs
            arrow = null;
        } else {
            if (!arrow.hasAttribute('open')) {
                arrow.click(); //must open it because on first open it loads in the properties, but man then ill have to wait for the properties to populate, crap... well i think this because i remember seeing promise somewhere in VariableViewer.jsm //never mind check this throughly and glanced at utils.js with ctrl+f cant find promise //but there was a timeout in emptySoon so im still iffy, need to do trial, if it turns out its there then i need to go through and open up all at maxDepth then wait have to figure out how to ident when done and then go through and print to tab :todo:
            }
        }
        var enums = targ.querySelector('.variables-view-element-details, .enum');
        var nonenums = targ.querySelector('.variables-view-element-details, .nonenum');
        var init = initGlobal; //note: do this so this func can know if its init, need to know when get to init's enum and nonenum vboxes, these first vboxes have like a parent arrow wrap with no plan_name in its first hbox
        initGlobal = false;
        
        if (arrow && cDepth < opts.maxDepth) {
            if (init) {
                var plain_name = opts.varName;
                var plain_value = targ.querySelector('hbox:first-of-type label.name');
            } else {
                var plain_name = 'todo:';
                var plain_value = 'todo:';
            }
            json = ['table', {},
                    ['tr', {},
                     ['th', {colspan:3},
                      plain_value + ' - ' + plain_name + ' - Enumerable: ' + enums.childNodes.length + ' - NonEnumerable: ' + nonenums.childNodes.length
                     ]
                    ],
                    ['tr', {},
                     ['th', {},
                      'KEY'
                     ],
                     ['th', {},
                      'VALUE'
                     ],
                     ['th', {},
                      'ENUMABLE'
                     ]
                    ]
                   ];
            var enumsVbox = enums.childNodes[0];
            var nonenumsVbox = nonenums.childNodes[0];
            if (init) {
                enumsVbox = enums.childNodes[1]; //the vbox[class="variables-view-element-details enum"
                nonenumsVbox = nonenums.childNodes[1]; //the vbox[class="variables-view-element-details nonenum"
            }
            for (var i=0; i<enumsVbox.childNodes.length; i++) { //the childNodes of enumsVbox and nonenumsVbox should be identical to that of initVbox in that first hbox holds the plain_name and arrow etc
                dig(enumsVbox.childNodes[i], cDepth + 1, 1);
            }
            for (var i=0; i<nonenumsVbox.childNodes.length; i++) {
                dig(nonenumsVbox.childNodes[i], cDepth + 1, 1);
            }
        } else {
            if (init) {
                //not possible to get here if its variables-view-scope because only objects get the varViewer
                me.alert('error: should not get here 46584');
            } else {
                var plain_key = 'todo:';
                var plain_value = 'todo:';
            }
            json = ['tr', {},
                            ['td', {},
                                     plain_key
                            ],
                            ['td', {},
                                     plain_value
                            ],
                            ['td', {},
                                     plain_enumable
                            ]
                   ];
            if (arrow) {
                json[3].push(['span', {class:depth-reached-but-can-go-deeper},
                              '[+]'
                             ]);
            }
        }
    };
    

}

takeToTabTheCurViewVar();

README

Rev1

This is the style sheet version

Rev2

Updated the description and file name, had forgot to do this in Rev1.

Rev3

I abandoned the style sheet version for now I just want to get it working and plan on adding the style sheet in the end.

• Work in Porgress

MXR Resources:
http://mxr.mozilla.org/mozilla-release/source/browser/devtools/shared/widgets/VariablesView.jsm#2139
http://mxr.mozilla.org/mozilla-release/source/toolkit/devtools/webconsole/utils.js#469

Pretty Print Demo:
http://james.padolsey.com/demos/prettyprint/