From 70222f799c29847305249c288bf24a3fe8474cca Mon Sep 17 00:00:00 2001 From: Dave Pedu Date: Fri, 13 Feb 2015 16:26:39 -0800 Subject: [PATCH] Fix some stuff, convert css to Sass --- .gitignore | 2 + background.js | 4 +- build_css.sh | 3 + popup.js | 50 +++++------- style.css | 209 ++++++++++++++++++++++++-------------------------- style.scss | 166 +++++++++++++++++++++++++++++++++++++++ 6 files changed, 293 insertions(+), 141 deletions(-) create mode 100644 .gitignore create mode 100755 build_css.sh create mode 100644 style.scss diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..fa41dd2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.sass-cache +style.css.map diff --git a/background.js b/background.js index 8c5db8c..784e39d 100644 --- a/background.js +++ b/background.js @@ -170,6 +170,8 @@ _tabbro_ = function() { url:win.tabs[0].url }, function(ev) { var newwindowid = ev.id + win.id = newwindowid + // Open the rest of the tabs in this group if(moreTabsToOpen.length>0) { @@ -519,7 +521,7 @@ _tabbro_ = function() { var thetab = bro.t_getTab(tabid) - if(thetab.sticky) { + if(thetab && thetab.sticky) { // If the tab is sticky, we only mark it as closed thetab.id = null } else { diff --git a/build_css.sh b/build_css.sh new file mode 100755 index 0000000..06127c6 --- /dev/null +++ b/build_css.sh @@ -0,0 +1,3 @@ +#!/bin/sh + +sass --sourcemap=auto ./style.scss:./style.css --watch diff --git a/popup.js b/popup.js index 741b967..f2013d9 100644 --- a/popup.js +++ b/popup.js @@ -68,7 +68,7 @@ function renderTree(data) { } function renderWindow(windowdata, winnum) { - var win = element('li', {class:(windowdata.sticky?"sticky":"")}); + var win = element('li', {class:(windowdata.sticky?"sticky":"")+(windowdata.id==null?" unloaded":" loaded")}); var label = element('span', {class:"name-line", _parent:win}) var label_icon = element('span', {class:"name-icon", _parent:label, _html:(windowdata.sticky?' ':'')}) @@ -112,19 +112,20 @@ function renderWindow(windowdata, winnum) { var options = element('div', {class:"options", _parent:win}) - var stickunstick = element('a', { - class:"unstick"+(windowdata.sticky?" stuck":""), - _onclick: function() { - //console.log("Stuck window #"+winnum) - tabbro.ui_stick_window(winnum) - repaint() - }, - href: "#", - title: (windowdata.sticky?"Unstick tab":"Stick window"), - _html:(windowdata.sticky?'':''), - _parent:options - }) - + if(windowdata.id!=null) { + var stickunstick = element('a', { + class:"unstick"+(windowdata.sticky?" stuck":""), + _onclick: function() { + //console.log("Stuck window #"+winnum) + tabbro.ui_stick_window(winnum) + repaint() + }, + href: "#", + title: (windowdata.sticky?"Unstick tab":"Stick window"), + _html:(windowdata.sticky?'':''), + _parent:options + }) + } var deletewindow = element('a', { class:"delete", @@ -139,20 +140,6 @@ function renderWindow(windowdata, winnum) { _parent:options }) - /*var rename = element('a', { - class:"rename", - _onclick: function() { - //console.log("Open window #"+winnum) - //tabbro.ui_open_window(winnum) - repaint() - }, - href: "#", - title: "Info", - _html:'', - _parent:options - })*/ - - var opennew = element('a', { class:"open", _onclick: function() { @@ -177,7 +164,11 @@ function renderWindow(windowdata, winnum) { } function renderTab(tabdata, tabnum, winnum) { + console.log("renderTab("+tabdata+", "+tabnum+", "+winnum+")") + console.log(tabdata) + var tab = element('li', {class:"clearfix"}) + if(tabdata.icon && tabdata.icon.substr(0, 9)!="chrome://") { tab.style.backgroundImage = "url(\""+tabdata.icon+"\")"; } else { @@ -186,7 +177,7 @@ function renderTab(tabdata, tabnum, winnum) { var label = element('span', {class:"name-line", _parent:tab}) var label_icon = element('span', {class:"name-icon", _parent:label, _html:(tabdata.sticky?' ':'')}) - var label_name = element('span', {class:"name-string", _parent:label, _html:tabdata.title}) + var label_name = element('span', {class:"name-string", _parent:label, _html:tabdata.title.trim()==""?"(No title)":tabdata.title}) var options = element('div', {class:"options", _parent:tab}) @@ -203,7 +194,6 @@ function renderTab(tabdata, tabnum, winnum) { _parent:options }) - var deletetab = element('a', { class:"delete", _onclick: function() { diff --git a/style.css b/style.css index 1349946..4587326 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,8 @@ /* RESET */ +@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400); * { - box-sizing: border-box; -} + box-sizing: border-box; } + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -15,136 +16,124 @@ article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + body { - line-height: 1; -} + line-height: 1; } + ol, ul { - list-style: none; -} + list-style: none; } + blockquote, q { - quotes: none; -} + quotes: none; } + blockquote:before, blockquote:after, q:before, q:after { - content: ''; - content: none; -} + content: ''; + content: none; } + table { - border-collapse: collapse; - border-spacing: 0; -} + border-collapse: collapse; + border-spacing: 0; } + /* CLEARFIX */ .clearfix:after { - visibility: hidden; - display: block; - font-size: 0; - content: " "; - clear: both; - height: 0; -} -.clearfix { display: inline-block; } -* html .clearfix { height: 1%; } -.clearfix { display: block; } + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; } + +.clearfix { + display: inline-block; } + +* html .clearfix { + height: 1%; } + +.clearfix { + display: block; } /* FONTS */ -@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400); - - /* STYLES */ - /* GLOBAL */ body { - width: 420px; - height: auto; - padding: 5px 0px; - margin: 0; - font-family: Open sans; - font-size: 12px; - max-height: 700px; - overflow-y: auto; -} -@-webkit-keyframes nopenopenope { - 0% { - left: 0px; - } - 25% { - left: -10px; - } - 75% { - left: 10px; - } - 100% { - left: 0px; - } -} -.nope { - position: relative; - -webkit-animation: nopenopenope .15s linear 0s 3 normal; -} + width: 420px; + height: auto; + padding: 5px 0px; + margin: 0; + font-family: Open sans; + font-size: 12px; + max-height: 700px; + overflow-y: auto; } +@-webkit-keyframes nopenopenope { + 0% { + left: 0px; } + 25% { + left: -10px; } + 75% { + left: 10px; } + 100% { + left: 0px; } } +.nope { + position: relative; + -webkit-animation: nopenopenope .15s linear 0s 3 normal; } /* Options panel appears on hove */ .options { - position: absolute; - top: -3px; - right: 10px; - display: none; - background-color: #fff; - padding: 3px; - border: 1px solid #aaa; -} -.options a { - font-size: 20px; - padding: 3px; -} -li:hover>.options, li:hover>span>.options { - display: block; -} - + position: absolute; + top: 3px; + right: 0px; + display: none; + padding: 0px; + font-size: 16px; } + .options a { + padding: 0px 3px; + color: #888; } + .options a.delete { + position: relative; + bottom: 1px; } + .options a:hover { + color: #000; } +li:hover > .options, li:hover > span > .options { + display: block; } /* MAIN TREE */ -ul#root { - -} -ul#root > li:nth-child(2n) { - background-color: rgba(0,0,0,0.05); -} -ul#root > li > span { +ul#root li { + position: relative; + padding: 5px 0px; } +ul#root > li { + padding-bottom: 0px; + border-bottom: 1px solid #888; } + ul#root > li:last-child { + border-bottom: 0px; } + ul#root > li > span { display: block; padding: 0px 10px 5px 10px; - font-weight: bold; -} -ul#root li { - position: relative; - padding: 5px 0px; -} -ul#root > li { - padding-bottom: 0px; - border-bottom: 1px solid #888; -} -ul#root > li:last-child { - border-bottom: 0px; -} -ul#root > li > ul > li { + font-weight: bold; } + ul#root > li:nth-child(2n) { + background-color: rgba(0, 0, 0, 0.05); } + ul#root > li.unloaded span.name-line { + font-style: italic; + color: #AAA; } + ul#root > li > ul > li { padding-left: 40px; background-repeat: no-repeat; background-size: 16px 16px; - background-position: 20px center; -} -ul#root > li > ul > li > span { - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - display: block; -} -ul#root > li > ul > li:nth-child(2n+1) { - background-color: rgba(0,0,0,0.05); -} + background-position: 20px center; } + ul#root > li > ul > li > span { + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; } + ul#root > li > ul > li:nth-child(2n+1) { + background-color: rgba(0, 0, 0, 0.05); } + +/*# sourceMappingURL=style.css.map */ diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..03d47a7 --- /dev/null +++ b/style.scss @@ -0,0 +1,166 @@ +/* RESET */ +* { + box-sizing: border-box; +} +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* CLEARFIX */ +.clearfix:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; +} +.clearfix { display: inline-block; } +* html .clearfix { height: 1%; } +.clearfix { display: block; } + +/* FONTS */ +@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400); + + +/* STYLES */ + +/* GLOBAL */ +body { + width: 420px; + height: auto; + padding: 5px 0px; + margin: 0; + font-family: Open sans; + font-size: 12px; + max-height: 700px; + overflow-y: auto; +} +@-webkit-keyframes nopenopenope { + 0% { + left: 0px; + } + 25% { + left: -10px; + } + 75% { + left: 10px; + } + 100% { + left: 0px; + } +} +.nope { + position: relative; + -webkit-animation: nopenopenope .15s linear 0s 3 normal; +} + + +/* Options panel appears on hove */ +.options { + position: absolute; + top: 3px; + right: 0px; + display: none; + padding: 0px; + + font-size: 16px; + a { + padding: 0px 3px; + color: #888; + + &.delete { + position: relative; + bottom: 1px; + } + &:hover { + color: #000; + } + } +} + +li:hover>.options, li:hover>span>.options { + display: block; +} + + + +/* MAIN TREE */ +ul#root { + li { + position: relative; + padding: 5px 0px; + } + &>li { + padding-bottom: 0px; + border-bottom: 1px solid #888; + &:last-child { + border-bottom: 0px; + } + &> span { + display: block; + padding: 0px 10px 5px 10px; + font-weight: bold; + } + &:nth-child(2n) { + background-color: rgba(0,0,0,0.05); + } + &.unloaded { + span.name-line { + font-style: italic; + color: #AAA; + } + } + &>ul { + &>li { + padding-left: 40px; + background-repeat: no-repeat; + background-size: 16px 16px; + background-position: 20px center; + &>span { + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; + } + &:nth-child(2n+1) { + background-color: rgba(0,0,0,0.05); + } + } + } + } +}