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);
+ }
+ }
+ }
+ }
+}