feat: add "debug" button to easily open debugging window

karma-runner · Feb 3, 2013 · da85aab · da85aab
1 parent 87f0ac0
commit da85aab
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 deletions.
diff --git a/static/client.html b/static/client.html
@@ -40,10 +40,14 @@
       background: #F99;
     }
 
+    #banner {
+      padding: 5px 10px;
+    }
+
     h1 {
       font-size: 1.8em;
       margin: 0;
-      padding: 5px 10px;
+      padding: 0;
     }
 
     ul {
@@ -56,10 +60,51 @@
     li {
       padding: 5px 12px;
     }
+
+    .btn-debug {
+      float: right;
+    }
+
+    .offline .btn-debug {
+      display: none;
+    }
+
+    .btn-debug {
+      -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
+      -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
+      box-shadow:inset 0px 1px 0px 0px #ffffff;
+      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6) );
+      background:-moz-linear-gradient( center top, #ffffff 5%, #f6f6f6 100% );
+      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6');
+      background-color:#ffffff;
+      -moz-border-radius:6px;
+      -webkit-border-radius:6px;
+      border-radius:6px;
+      border:1px solid #dcdcdc;
+      display:inline-block;
+      color:#666666;
+      font-family:arial;
+      font-size:15px;
+      font-weight:bold;
+      padding:6px 24px;
+      text-decoration:none;
+      text-shadow:1px 1px 0px #ffffff;
+    }
+
+    .btn-debug:hover {
+      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff) );
+      background:-moz-linear-gradient( center top, #f6f6f6 5%, #ffffff 100% );
+      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff');
+      background-color:#f6f6f6;
+    }
   </style>
 </head>
 <body>
-  <h1 id="title" class="offline">Testacular - starting</h1>
+  <div id="banner" class="offline">
+    <a href="debug.html" target="_blank" class="btn-debug">DEBUG</a>
+    <h1 id="title">Testacular - starting</h1>
+  </div>
+
   <ul id="browsers"></ul>
 
   <iframe id="context" src="about:blank" width="100%" height="100%"></iframe>

diff --git a/static/testacular.src.js b/static/testacular.src.js
@@ -24,10 +24,11 @@ socket.on('disconnect', function() {
 });
 
 var titleElement = document.getElementById('title');
+var bannerElement = document.getElementById('banner');
 var updateStatus = function(status) {
   return function(param) {
     titleElement.innerHTML = 'Testacular - ' + (param ? status.replace('$', param) : status);
-    titleElement.className = status === 'connected' ? 'online' : 'offline';
+    bannerElement.className = status === 'connected' ? 'online' : 'offline';
   };
 };