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