Merge pull request #113 from cxw42/v01g

v0.1.16

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabfern",
-  "version": "0.1.15.1337",
+  "version": "0.1.16.1337",
   "description": "Google Chrome extension for displaying, saving, and managing tabs",
   "main": "src/view/main.js",
   "directories": {

tabfern/assets/css/icons.css

@@ -1,59 +1,95 @@
 /* icons.css: Common icon definitions */
 
-.tf-window.tfs-saved > a > i {
-    content: url(/assets/icons/folder-from-jstree-default-dark-32px.png);
+.jstree-themeicon-custom.tf-window.tfs-saved > a > i {
+    background-image: url(/assets/icons/folder-from-jstree-default-dark-32px.png);
 }
 
 /* For Chrome */
-.visible-window-icon, .tf-window.tfs-open > a > i {
-    content: url(/assets/icons/monitor.png);    /* or folder.png? */
+.jstree-themeicon-custom.visible-window-icon,
+.jstree-themeicon-custom.tf-window.tfs-open > a > i {
+    background-image: url(/assets/icons/monitor.png);    /* or folder.png? */
 }
 
-.visible-saved-window-icon, .tf-window.tfs-open.tfs-saved > a > i {
-    content: url(/assets/icons/monitor_add.png);    /* or folder.png? */
+.jstree-themeicon-custom.visible-saved-window-icon, .jstree-themeicon-custom.tf-window.tfs-open.tfs-saved > a > i {
+    background-image: url(/assets/icons/monitor_add.png);    /* or folder.png? */
 }
 
 /* For Firefox */
+/*
 .tf-window.tfs-open.tfs-saved > a > i::before {
-    content: url(/assets/icons/monitor_add.png);    /* or folder.png? */
+    content: url(/assets/icons/monitor_add.png);    * or folder.png? *
 }
 
 .tf-window.tfs-open > a > i::before {
-    content: url(/assets/icons/monitor.png);    /* or folder.png? */
+    content: url(/assets/icons/monitor.png);    * or folder.png? *
 }
+*/
 
 /* Back to cross-browser */
 
-.fff-page /*, .tf-tab > i*/ {
-    content: url(/assets/icons/page_white.png);
+.jstree-themeicon-custom.fff-page /*, .tf-tab > i*/ {
+    background-image: url(/assets/icons/page_white.png);
 }
 
-.fff-page-white-with-red-banner {
-    content: url(/assets/icons/page_white_red_banner.png);
+.jstree-themeicon-custom.fff-monitor-add {
+    background-image: url(/assets/icons/monitor_add.png);
 }
 
-.fff-pencil {
-    content: url(/assets/icons/pencil.png);
+.jstree-themeicon-custom.fff-monitor {
+    background-image: url(/assets/icons/monitor.png);
 }
 
-.fff-cross {
-    content: url(/assets/icons/cross.png);
+.jstree-themeicon-custom.fff-page-white-with-red-banner {
+    background-image: url(/assets/icons/page_white_red_banner.png);
 }
 
-.fff-picture-delete {
-    content: url(/assets/icons/picture_delete.png);
+.jstree-themeicon-custom.fff-pencil, .vakata-context .fff-pencil {
+    background-image: url(/assets/icons/pencil.png);
+}
+
+.jstree-themeicon-custom.fff-cross, .vakata-context .fff-cross {
+    background-image: url(/assets/icons/cross.png);
 }
 
-.fff-text-padding-top {
-    content: url(/assets/icons/text_padding_top.png);
+.jstree-themeicon-custom.fff-picture-delete, .vakata-context .fff-picture-delete {
+    background-image: url(/assets/icons/picture_delete.png);
+}
+
+.jstree-themeicon-custom.fff-text-padding-top,
+.vakata-context .fff-text-padding-top {
+    background-image: url(/assets/icons/text_padding_top.png);
 }
 
 /* Class for icons with no content.  Used in jstree.set_icon() when the
  * icon is actually being set using CSS.
  */
-.clear-icon {
+.jstree-themeicon-custom.clear-icon, .vakata-context .clear-icon {
     /*url(/assets/icons/clear-icon.png);*/
     /*content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQI12NgYGBgAAAABQABXvMqOgAAAABJRU5ErkJggg==);*/
 }
 
+/* Icons for actions, which do use content rather than background-image.
+ * That way we do not have to set the size of the <i> manually. */
+.tf-action-button.fff-pencil {
+    content: url(/assets/icons/pencil.png);
+}
+
+.tf-action-button.fff-picture-delete {
+    content: url(/assets/icons/picture_delete.png);
+}
+
+.tf-action-button.fff-cross {
+    content: url(/assets/icons/cross.png);
+}
+
+/* Background sizes in context menu are different.  TODO fix this --- it is
+ * an ugly hack. */
+.vakata-context .fff-pencil,
+.vakata-context .fff-cross,
+.vakata-context .fff-picture-delete,
+.vakata-context .fff-text-padding-top {
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
 /* vi: set ts=4 sts=4 sw=4 et ai: */

tabfern/js/jstree-actions.js

@@ -124,6 +124,7 @@
 		 * The action object can contain the following keys:
 		 * id       <- string An ID which identifies the action. The same ID can be shared across different nodes
 		 * text     <- string The action's text
+		 * html     <- string The action's html; used in preference to text if both are provided
 		 * class    <- string (a string containing all the classes you want to add to the action (space separated)
 		 * event    <- string The event on which the trigger will be called
 		 * callback <- function that will be called when the action is clicked
@@ -217,7 +218,11 @@
 
 			var action_el = document.createElement("i");
 			action_el.className = action.class;
-			action_el.textContent = action.text;
+			if(action.html) {
+				action_el.innerHTML = action.html;
+			} else {
+				action_el.textContent = action.text || '';
+			}
 
 			// Set up element data-* values, if any
 			if( action_el.dataset && action.dataset &&

tabfern/js/jstree.js

@@ -2477,7 +2477,7 @@
 					node.childNodes[1].childNodes[0].style.backgroundImage = 'url("'+obj.icon+'")';
 					node.childNodes[1].childNodes[0].style.backgroundPosition = 'center center';
 					node.childNodes[1].childNodes[0].style.backgroundSize = 'auto';
-					node.childNodes[1].childNodes[0].className += ' jstree-themeicon-custom';
+					node.childNodes[1].childNodes[0].className += ' jstree-themeicon-custom jstree-url-icon';
 				}
 			}
 
@@ -4712,7 +4712,7 @@
 				this.hide_icon(obj);
 			}
 			else if(icon === true || icon === null || icon === undefined || icon === '') {
-				dom.removeClass('jstree-themeicon-custom ' + old).css("background","").removeAttr("rel");
+				dom.removeClass('jstree-themeicon-custom jstree-url-icon ' + old).css("background","").removeAttr("rel");
 				if(old === false) { this.show_icon(obj); }
 			}
 			else if(icon.indexOf("/") === -1 && icon.indexOf(".") === -1) {
@@ -4722,7 +4722,7 @@
 			}
 			else {
 				dom.removeClass(old).css("background","");
-				dom.addClass('jstree-themeicon-custom').css("background", "url('" + icon + "') center center no-repeat").attr("rel",icon);
+				dom.addClass('jstree-themeicon-custom jstree-url-icon').css("background", "url('" + icon + "') center center no-repeat").attr("rel",icon);
 				if(old === false) { this.show_icon(obj); }
 			}
 			return true;

tabfern/manifest.json

@@ -1,8 +1,8 @@
 {
   "name": "TabFern tab manager and backup tool",
   "short_name": "TabFern",
-  "version": "0.1.15.1337",
-  "version_name": "0.1.15",
+  "version": "0.1.16.1337",
+  "version_name": "0.1.16",
   "offline_enabled": true,
   "manifest_version": 2,
   "minimum_chrome_version": "54",

tabfern/src/common/common.js

@@ -11,7 +11,7 @@ console.log('TabFern common.js loading');
 
 /// The TabFern extension friendly version number.  Displayed in the
 /// title bar of the popup window, so lowercase (no shouting!).
-const TABFERN_VERSION='0.1.15'  //' alpha \u26a0'
+const TABFERN_VERSION='0.1.16'  //' alpha \u26a0'
     // When you change this, also update:
     //  - manifest.json: both the version and version_name
     //  - package.json
@@ -70,7 +70,7 @@ const CFG_DEFAULTS = {
     [CFG_OPEN_TOP_ON_STARTUP]: false,
     [CFG_HIDE_HORIZONTAL_SCROLLBARS]: true,
     [CFG_SKINNY_SCROLLBARS]: false,
-    [CFG_NEW_WINS_AT_TOP]: false,
+    [CFG_NEW_WINS_AT_TOP]: true,
     [CFG_SHOW_TREE_LINES]: false,
     [CFG_CONFIRM_DEL_OF_SAVED]: true,
     [CFG_CONFIRM_DEL_OF_UNSAVED]: false,

tabfern/src/settings/manifest.js

@@ -6,7 +6,7 @@
     // Shortcuts for frequently-used items
     function icon(cls) { return `<i class="${cls}"></i>`; }
     function issue(num) { return `(<a href="https://github.com/cxw42/TabFern/issues/${num|0}">#${num|0}</a>)`; }
-    function brplain(date_str){return `<br/><span class="plain">${date_str}</span>`;}
+    function brplain(text){return `<br/><span class="plain">${text}</span>`;}
 
     let ham = icon('fa fa-bars');
     let gt = icon('fa fa-lg fa-caret-right');
@@ -259,6 +259,19 @@ bar (it will start with "file://")</li>
 
 // }}}2
             // Changelog                                          {{{1
+            {
+                "tab": i18n.get("What's new?"),
+                "group": `Version 0.1.16${brplain('2018-03-08')}`,
+                'group_html':true,
+                "type": "description",
+                "text":
+`<ul>
+<li>The tree will now show the icons for the sites, even on closed windows.
+    Note that you may need to be online to see the icons.  ${issue(83)}</li>
+<li>TabFern won't ask you if you want to delete new tabs or about:blank tabs.
+    Hopefully this saves you a little bit of time.  ${issue(109)}</li>
+</ul>`
+            },
             {
                 "tab": i18n.get("What's new?"),
                 "group": `Version 0.1.15${brplain('2018-02-09')}`,

tabfern/src/view/bundle_tree.js

@@ -2480,7 +2480,7 @@
 					node.childNodes[1].childNodes[0].style.backgroundImage = 'url("'+obj.icon+'")';
 					node.childNodes[1].childNodes[0].style.backgroundPosition = 'center center';
 					node.childNodes[1].childNodes[0].style.backgroundSize = 'auto';
-					node.childNodes[1].childNodes[0].className += ' jstree-themeicon-custom';
+					node.childNodes[1].childNodes[0].className += ' jstree-themeicon-custom jstree-url-icon';
 				}
 			}
 
@@ -4715,7 +4715,7 @@
 				this.hide_icon(obj);
 			}
 			else if(icon === true || icon === null || icon === undefined || icon === '') {
-				dom.removeClass('jstree-themeicon-custom ' + old).css("background","").removeAttr("rel");
+				dom.removeClass('jstree-themeicon-custom jstree-url-icon ' + old).css("background","").removeAttr("rel");
 				if(old === false) { this.show_icon(obj); }
 			}
 			else if(icon.indexOf("/") === -1 && icon.indexOf(".") === -1) {
@@ -4725,7 +4725,7 @@
 			}
 			else {
 				dom.removeClass(old).css("background","");
-				dom.addClass('jstree-themeicon-custom').css("background", "url('" + icon + "') center center no-repeat").attr("rel",icon);
+				dom.addClass('jstree-themeicon-custom jstree-url-icon').css("background", "url('" + icon + "') center center no-repeat").attr("rel",icon);
 				if(old === false) { this.show_icon(obj); }
 			}
 			return true;
@@ -8588,6 +8588,7 @@
 		 * The action object can contain the following keys:
 		 * id       <- string An ID which identifies the action. The same ID can be shared across different nodes
 		 * text     <- string The action's text
+		 * html     <- string The action's html; used in preference to text if both are provided
 		 * class    <- string (a string containing all the classes you want to add to the action (space separated)
 		 * event    <- string The event on which the trigger will be called
 		 * callback <- function that will be called when the action is clicked
@@ -8681,7 +8682,11 @@
 
 			var action_el = document.createElement("i");
 			action_el.className = action.class;
-			action_el.textContent = action.text;
+			if(action.html) {
+				action_el.innerHTML = action.html;
+			} else {
+				action_el.textContent = action.text || '';
+			}
 
 			// Set up element data-* values, if any
 			if( action_el.dataset && action.dataset &&

tabfern/src/view/item_tree.js

@@ -194,7 +194,7 @@
 
         jstreeTypes[K.IT_WIN] = {
             li_attr: { 'class': WIN_CLASS },
-            icon: 'clear-icon',  // We will overlay the actual icon in the CSS
+            //icon: 'clear-icon',  // We will overlay the actual icon in the CSS
         };
 
         jstreeTypes[K.NST_OPEN] = { li_attr: { 'class': OPEN_CLASS } };
@@ -207,6 +207,9 @@
             icon: 'fff-page',   // per-node icons will override this
         };
 
+        // TODO add option for users to create divider items between windows -
+        // e.g., <div style="display:inline-block; width: 100%; height:0px; margin-top:8px; margin-bottom:7px; border-top: 1px solid yellow;"></div>
+
         // The main config
         let jstreeConfig = {
             plugins: ['because', 'wholerow', 'actions',