Commits

Jop de Klein committed 7861f27

* Added snap.debugger * Implemented cleaner way of converting result of getElementsByTagName to array

Comments (0)

Files changed (6)

+.snap-debugbar {
+    position: absolute;
+	top: 0;
+	left: 0;
+    width: 100%;
+	padding: 10px;
+    background: #eee;
+    border-bottom: 1px solid #999;
+	display: none;
+}
         <script type="text/javascript" src="js/lib/sizzle-852d3d0a60de709e83b6/sizzle.js"></script>
         
         <script type="text/javascript" src="js/snap.js"></script>
+        <script type="text/javascript" src="js/snap.debugger.js"></script>
         <script type="text/javascript" src="js/snap.utils.js"></script>
         <script type="text/javascript" src="js/snap.backend.js"></script>
         <script type="text/javascript" src="js/snap.snapshot.js"></script>
         <script type="text/javascript" src="js/snap.comparator.js"></script>
         <script type="text/javascript" src="js/snap.report.js"></script>
         
+        <link rel="stylesheet" href="css/debug.css" type="text/css"/>
+        
         <script type="text/javascript">
             window.onload = function () {
                 snap.boot({
     </head>
     
     <body>
-        <button onclick="snap.saveSnapshot(snap.createSnapshot());">save</button>
-        <button onclick="snap.showDifferences();">compare</button>
-        <hr/>
         <div id="testElement" style="background: #fff; color: red; height: 20px">hello world</div>
         <div style="color: blue">hello world</div>
         
         <a href="http://google.com" style="color: blue">Red link</a>
         
         <div style="padding: 10px; height: 2em">
-            <div style="color: red">hello world</div>
+            <div style="color: blue">hello world</div>
         </div>
-        <div style="color: green">hello world</div>
+        <div style="color: brown">hello world</div>
         <div style="color: black">hello world</div>
         <div style="color: green">hello world</div>
         <div style="color: blue">hello world</div>

js/snap.debugger.js

+var snap = window.snap || {};
+
+(function (ns) {
+    
+    ns.debugger = function (options) {
+        var that = {};
+
+        var debugBar;
+        
+        var _generateActionButton = function (func, label) {
+            return '<button onclick="snap.' + func + ';">' + label + '</button>';
+        };
+        var _drawDebugBar = function () {
+            var container = document.createElement('div');
+            var debugBarHTML = '<div class="snap-debugbar"> \
+                    <h1>Snap Debugger</h1> \
+                    <div class="actions"> \
+            ';
+            
+            debugBarHTML += _generateActionButton('saveSnapshot(snap.createSnapshot())', 'save snapshot');
+            debugBarHTML += _generateActionButton('showDifferences()', 'compare snapshot');
+            
+            debugBarHTML += '</div></div>';
+            container.innerHTML = debugBarHTML;
+            document.body.appendChild(container);
+            debugBar = container.firstChild;
+        };
+        _drawDebugBar();
+        
+        that.show = function () {
+            debugBar.style.display = 'block';
+        };
+        
+        that.hide = function () {
+            debugBar.style.display = 'none';
+        };
+
+        return that; //singleton
+    };
+    
+}(snap));

js/snap.iterator.js

         };
         
         var _getDescendantsByTagName = function (element) {
-            var elementsArray = [];
             var elements = element.getElementsByTagName('*');
-            
+
             // Convert collection to array
-            for (var i=0; i < elements.length; i++) {
-                elementsArray.push(elements[i]);
-            }
-            
-            return elementsArray;
+            return Array.prototype.slice.apply(elements);
         };
         
         var _getNodesByCSSSelector = function (elements) {
 var snap = window.snap || {};
 
 (function (ns) {
+
+    ns.console = window.console || {
+        'warn': function () {},
+        'error': function () {}
+    };
     
     ns.settings = {
         'styleExcludes': [
         ],
         'styleIncludes': [],
         'elements': [],
+        'debug': true,
         'errorClass': 'snap-error'
     };
     
+    
     ns.boot = function (options) {
         ns.utils.extendSettings(ns.settings, options);
         
+        if (ns.settings.debug) {
+            ns.debugger = ns.debugger(); // singleton
+            ns.debugger.show();
+        }
+        
         return true;
     };
     
-    ns.console = window.console || {
-        'warn': function () {},
-        'error': function () {}
-    };
     
     ns.createSnapshot = function (root) {
         var iterator = snap.iterator({
         <script type="text/javascript" src="../js/lib/sizzle-852d3d0a60de709e83b6/sizzle.js"></script> <!-- CSS Selector Library -->
         
         <script type="text/javascript" src="../js/snap.js"></script>
+        <script type="text/javascript" src="../js/snap.debugger.js"></script>
         <script type="text/javascript" src="../js/snap.utils.js"></script>
         <script type="text/javascript" src="../js/snap.backend.js"></script>
         <script type="text/javascript" src="../js/snap.snapshot.js"></script>
         <script type="text/javascript" src="../js/snap.comparator.js"></script>
         <script type="text/javascript" src="../js/snap.report.js"></script>
         
+        <link rel="stylesheet" href="../css/debug.css" type="text/css"/>
+        
         <script type="text/javascript" src="lib/qunit.js"></script>
         <script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
         <link rel="stylesheet" href="lib/qunit.css" type="text/css"/>