diff --git a/addon/data/css/style.css b/addon/data/css/style.css index 1b0571d..ac35f0c 100644 --- a/addon/data/css/style.css +++ b/addon/data/css/style.css @@ -1,3 +1,6 @@ +html, body { + height: 90%; +} .center { text-align: center; } @@ -6,4 +9,45 @@ } .red { background-color: #FF5050; +} + + +/* + * Tabs + */ +.tabs { + position: relative; + height: 100%; + clear: both; + margin: 35px 0 25px; +} +.tab { + float: left; +} +.tabLabel { + background: #eee; + padding: 10px; + border: 1px solid #ccc; + margin-left: -1px; + position: relative; + left: 1px; + top: -20px; +} +.content { + position: absolute; + top: 2px; + left: 0; + right: 0; + bottom: 0; + padding: 20px; + opacity: 0; +} +[type=radio]:checked ~ label { + background: white; + border-bottom: 1px solid white; + z-index: 2; +} +[type=radio]:checked ~ label ~ .content { + z-index: 1; + opacity: 1; } \ No newline at end of file diff --git a/addon/data/html/view.html b/addon/data/html/view.html index 10facf7..8aaa9f4 100644 --- a/addon/data/html/view.html +++ b/addon/data/html/view.html @@ -8,71 +8,90 @@ </head> <body> - <table> - <tr> - <td> - <label>Open <b>now</b>: </label> - </td> - <td> - <input type="text" id="currentCount" disabled size="10" /> - </td> - </tr> - <tr> - <td> - <label>Opened during <b>session</b>: </label> - </td> - <td> - <input type="text" id="sessionCount" disabled size="10" /> - </td> - </tr> - <tr> - <td> - <label>Opened since <b>addon install</b>: </label> - </td> - <td> - <input type="text" id="globalCount" disabled size="10" /> - </td> - </tr> - </table> - <div id="settingsView"> - <div id="settings"> - - <h1 class="center">Settings</h1> - <table> - <tr> - <td> - <label>Enable memory usage tracking?</label> - </td> - <td> - <input id="memoryTrackingPref" type="checkbox" /> - </td> - </tr> - <tr> - <td> - <label>How many <b>seconds</b> between memory data collection?</label> - </td> - <td> - <input id="memoryIntervalPref" type="number" /> - </td> - </tr> - <tr> - <td> - <label>Show memory usage in tab titles?</label> - </td> - <td> - <input id="memoryUsageOnTabTitlesPref" type="checkbox" /> - </td> - </tr> - <!--<tr> - <td> - <label>Show memory usage in separate tab?</label> - </td> - <td> - <input id="memoryUsageInTabPref" type="checkbox" /> - </td> - </tr>--> - </table> + <div class="tabs"> + <div class="tab"> + <input type="radio" id="tab-1" name="tab-group-1" hidden checked /> + <label class="tabLabel" for="tab-1">Counts</label> + <div class="content"> + <table> + <tr> + <td> + <label>Open <b>now</b>: </label> + </td> + <td> + <input type="text" id="currentCount" disabled size="10" /> + </td> + </tr> + <tr> + <td> + <label>Opened during <b>session</b>: </label> + </td> + <td> + <input type="text" id="sessionCount" disabled size="10" /> + </td> + </tr> + <tr> + <td> + <label>Opened since <b>addon install</b>: </label> + </td> + <td> + <input type="text" id="globalCount" disabled size="10" /> + </td> + </tr> + </table> + </div> + </div> + <!-- <div class="tab"> + <input type="radio" id="tab-2" name="tab-group-1" /> + <label class="tabLabel" for="tab-2">Memory usage</label> + <div class="content"> + <p>Stuff for Tab Two</p> + </div> + </div> --> + <div class="tab"> + <input type="radio" id="tab-3" name="tab-group-1" hidden /> + <label class="tabLabel" for="tab-3">Settings</label> + <div class="content"> + <div id="settingsView"> + <div id="settings"> + <table> + <tr> + <td> + <label>Enable memory usage tracking?</label> + </td> + <td> + <input id="memoryTrackingPref" type="checkbox" /> + </td> + </tr> + <tr> + <td> + <label>How many <b>seconds</b> between memory data collection?</label> + </td> + <td> + <input id="memoryIntervalPref" type="number" /> + </td> + </tr> + <tr> + <td> + <label>Show memory usage in tab titles?</label> + </td> + <td> + <input id="memoryUsageOnTabTitlesPref" type="checkbox" /> + </td> + </tr> + <!--<tr> + <td> + <label>Show memory usage in separate tab?</label> + </td> + <td> + <input id="memoryUsageInTabPref" type="checkbox" /> + </td> + </tr>--> + </table> + </div> + </div> + </div> </div> </div> </body> diff --git a/addon/package.json b/addon/package.json index fe0cd0b..58dbc86 100644 --- a/addon/package.json +++ b/addon/package.json @@ -1,32 +1,28 @@ { - "name": "tab-data-addon", - "title": "Tab Data", - "id": "jid1-4ogjq7MUzAiCOw", - "description": "Provides user with tab related stats/data", - "author": "Robert Byrne", - "license": "GNU GPL v3", - "version": "0.2.4", - "permissions": { - "private-browsing": true - }, - "preferences": [ - { - "name": "memoryInterval", - "title": "How many seconds between memory data collection?", - "type": "string", - "value": "10" - }, - { - "name": "memoryTracking", - "title": "Enable memory usage tracking?", - "type": "bool", - "value": true - }, - { - "name": "memoryUsageOnTabTitles", - "title": "Show memory usage in tab titles?", - "type": "bool", - "value": true - } - ] + "name": "tab-data-addon", + "title": "Tab Data", + "id": "jid1-4ogjq7MUzAiCOw", + "description": "Provides user with tab related stats/data", + "author": "Robert Byrne", + "license": "GNU GPL v3", + "version": "0.2.4", + "permissions": { + "private-browsing": true + }, + "preferences": [{ + "name": "memoryInterval", + "title": "How many seconds between memory data collection?", + "type": "string", + "value": "10" + }, { + "name": "memoryTracking", + "title": "Enable memory usage tracking?", + "type": "bool", + "value": true + }, { + "name": "memoryUsageOnTabTitles", + "title": "Show memory usage in tab titles?", + "type": "bool", + "value": true + }] } diff --git a/package.json b/package.json index 8424398..64340c5 100644 --- a/package.json +++ b/package.json @@ -1,29 +1,29 @@ { - "name": "tab-data-firefox", - "version": "0.2.4", - "description": "Firefox addon providing user with tab related stats/data", - "main": "addon/lib/main.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "repository": { - "type": "git", - "url": "https://github.com/bobbyrne01/tab-data-firefox.git" - }, - "author": "Robert Byrne", - "license": "GNU GPL v3", - "bugs": { - "url": "https://github.com/bobbyrne01/tab-data-firefox/issues" - }, - "homepage": "https://github.com/bobbyrne01/tab-data-firefox", - "devDependencies": { - "grunt": "^0.4.5", - "grunt-contrib-csslint": "^0.4.0", - "grunt-contrib-jshint": "^0.11.0", - "grunt-contrib-watch": "^0.6.1", - "grunt-html-validation": "^0.1.18", - "grunt-jsbeautifier": "^0.2.7", - "grunt-notify": "^0.4.1", - "grunt-release": "^0.11.0" - } + "name": "tab-data-firefox", + "version": "0.2.4", + "description": "Firefox addon providing user with tab related stats/data", + "main": "addon/lib/main.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://github.com/bobbyrne01/tab-data-firefox.git" + }, + "author": "Robert Byrne", + "license": "GNU GPL v3", + "bugs": { + "url": "https://github.com/bobbyrne01/tab-data-firefox/issues" + }, + "homepage": "https://github.com/bobbyrne01/tab-data-firefox", + "devDependencies": { + "grunt": "^0.4.5", + "grunt-contrib-csslint": "^0.4.0", + "grunt-contrib-jshint": "^0.11.0", + "grunt-contrib-watch": "^0.6.1", + "grunt-html-validation": "^0.1.18", + "grunt-jsbeautifier": "^0.2.7", + "grunt-notify": "^0.4.1", + "grunt-release": "^0.11.0" + } }