From da85aab927edd1614e4e05b136dee834344aa3cb Mon Sep 17 00:00:00 2001 From: Vojta Jina Date: Sun, 3 Feb 2013 00:25:06 -0800 Subject: [PATCH] feat: add "debug" button to easily open debugging window --- static/client.html | 49 ++++++++++++++++++++++++++++++++++++++-- static/testacular.src.js | 3 ++- 2 files changed, 49 insertions(+), 3 deletions(-) diff --git a/static/client.html b/static/client.html index 56d2a64c5..b565a5ce2 100644 --- 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; + } -

Testacular - starting

+ + diff --git a/static/testacular.src.js b/static/testacular.src.js index f58cda4d3..fc9422894 100644 --- 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'; }; };