1.16.0

Add settings verticalTabs

README.md

@@ -544,6 +544,7 @@ Some functionalities are also available when you're using original pdf viewer, b
 | settings.omnibarSuggestionTimeout | 200 | Timeout duration before Omnibar suggestion URLs are queried, in milliseconds. Helps prevent unnecessary HTTP requests and API rate-limiting. |
 | settings.focusFirstCandidate | false | Whether to focus first candidate of matched result in Omnibar. |
 | settings.tabsThreshold | 100 | When total of opened tabs exceeds the number, Omnibar will be used for choosing tabs. |
+| settings.verticalTabs | true | Whether to show tab pickers vertically aligned. |
 | settings.clickableSelector | "" | Extra CSS selector to pick elements for hints mode, such as "\*.jfk-button, \*.goog-flat-menu-button". |
 | settings.clickablePat | /(https?|thunder|magnet):\/\/\S+/ig | A regex to detect clickable links from text, you could use `O` to open them. |
 | settings.editableSelector | div.CodeMirror-scroll,div.ace_content | CSS selector for additional editable elements. |

README_CN.md

@@ -532,6 +532,7 @@ Surfingkeys默认使用[这个markdown分析器](https://github.com/chjj/marked)
 | settings.omnibarSuggestionTimeout | 200 | 设置触发搜索引擎提示的超时，当按键过去设定毫秒后才发起搜索引擎提示的请求，这样避免每次按键就触发请求。|
 | settings.focusFirstCandidate | false | 是否在搜索栏下面自动选择第一个匹配的结果。 |
 | settings.tabsThreshold | 100 | 当打开标签页的数量超过设定值时，使用搜索栏来查找标签页。 |
+| settings.verticalTabs | true | 是否纵向排列标签选择栏。 |
 | settings.clickableSelector | "" | 自定义CSS selector用于f键选择无法检测到的可点击元素，例如"\*.jfk-button, \*.goog-flat-menu-button"。 |
 | settings.clickablePat | /(https?|thunder|magnet):\/\/\S+/ig | 用于检测文字中可点击链接的正则表达式，你可以按`O`打开检测到的链接。|
 | settings.editableSelector | div.CodeMirror-scroll,div.ace_content | 额外CSS selector以自定义可编辑元素。|

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Surfingkeys",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Map your keys for web surfing, expand your browser with javascript and keyboard.",
   "main": "background.js",
   "directories": {

src/content_scripts/common/runtime.js

@@ -83,6 +83,7 @@ var runtime = (function() {
             startToShowEmoji: 2,
             stealFocusOnLoad: true,
             tabsThreshold: 100,
+            verticalTabs: true,
             textAnchorPat: /(^[\n\r\s]*\S{3,}|\b\S{4,})/g,
             ignoredFrameHosts: ["https://tpc.googlesyndication.com"],
             scrollFriction: 0,

src/content_scripts/ui/frontend.css

@@ -284,24 +284,45 @@ kbd {
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
     background: #000;
     overflow: auto;
     z-index: 2147483000;
 }
-div.sk_tab {
+#sk_tabs.horizontal {
+    width: 100%;
+}
+#sk_tabs.horizontal div.sk_tab {
     display: inline-grid;
+}
+#sk_tabs.horizontal div.sk_tab_hint {
+    float:right;
+}
+#sk_tabs.vertical div.sk_tab_title {
+    min-width: 100pt;
+    max-width: 60vw;
+}
+#sk_tabs.vertical div.sk_tab_hint {
+    position: fixed;
+    left: 80pt;
+}
+#sk_tabs.vertical div.tab_rocket {
+    margin: 6px;
+    display: inline-block;
+    padding: 0px 2px 0px 2px;
+    opacity: 0;
+}
+div.sk_tab {
     vertical-align: bottom;
     justify-items: center;
     border-radius: 3px;
     margin: 1px;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DAE6F5), color-stop(100%,#B0CCEF));
     box-shadow: 0px 3px 7px 0px rgba(245, 245, 0, 0.3);
+    padding-top: 2px;
+    border-top: solid 1px black;
 }
 div.sk_tab_wrap {
     display: inline-block;
-    padding-top: 2px;
-    border-top: solid 1px black;
 }
 div.sk_tab_icon {
     display: inline-block;
@@ -330,7 +351,6 @@ div.sk_tab_url {
 }
 div.sk_tab_hint {
     display: inline-block;
-    float:right;
     font-size: 10pt;
     font-weight: bold;
     padding: 0px 2px 0px 2px;

src/content_scripts/ui/frontend.js

@@ -255,10 +255,14 @@ const Front = (function() {
         var hintLabels = hints.genLabels(tabs.length - 1);
         var j = 0;
         const unitWidth = window.innerWidth / tabs.length - 2;
+        const verticalTabs = runtime.conf.verticalTabs;
+        _tabs.className = verticalTabs ? "vertical" : "horizontal";
         tabs.forEach(function(t, i) {
             var tab = document.createElement('div');
             tab.setAttribute('class', 'sk_tab');
-            tab.style.width = unitWidth + 'px';
+            if (!verticalTabs) {
+                tab.style.width = unitWidth + 'px';
+            }
             if (t.active === false) {
                 setSanitizedContent(tab, `<div class=sk_tab_hint>${hintLabels[j]}</div><div class=sk_tab_wrap><div class=sk_tab_icon><img/></div><div class=sk_tab_title>${htmlEncode(t.title)}</div></div>`);
                 const tabHint = tab.querySelector("div.sk_tab_hint");
@@ -270,7 +274,11 @@ const Front = (function() {
                 tab.style.boxShadow = "0px 3px 7px 0px rgba(245, 245, 0, 0.9)";
             }
             attachFaviconToImgSrc(t, tab.querySelector("img"));
-            tab.querySelector("div.sk_tab_title").style.width = (unitWidth - 24) + 'px';
+            if (verticalTabs) {
+                tab.append(createElementWithContent('div', '🚀', {class: "tab_rocket"}));
+            } else {
+                tab.querySelector("div.sk_tab_title").style.width = (unitWidth - 24) + 'px';
+            }
             _tabs.append(tab);
         });
     };