tabs progress: recreate default webview + search

repo/integrated-titlebar/rendererIndex.cjs

@@ -6,7 +6,7 @@
 
 'use strict';
 
-module.exports = async function (api, db, __exports, __eval) {
+module.exports = async function ({ registry }, db, __exports, __eval) {
   const dragareaSelector = '[style*="-webkit-app-region: drag;"]';
 
   await new Promise((res, rej) => {
@@ -22,20 +22,24 @@ module.exports = async function (api, db, __exports, __eval) {
   });
 
   const tilingMode = await db.get(['tiling']),
-    dragareaHeight = await db.get(['dragarea_height']);
+    dragareaHeight = await db.get(['dragarea_height']),
+    tabsEnabled = await registry.enabled('e1692c29-475e-437b-b7ff-3eee872e1a42');
 
-  const dragarea = document.querySelector(dragareaSelector);
+  if (tabsEnabled) {
-  dragarea.style.top = '2px';
+  } else {
-  dragarea.style.height = tilingMode ? '0' : `${dragareaHeight}px`;
+    const dragarea = document.querySelector(dragareaSelector);
+    dragarea.style.top = '2px';
+    dragarea.style.height = tilingMode ? '0' : `${dragareaHeight}px`;
 
-  document.getElementById('notion').addEventListener('ipc-message', (event) => {
+    document.getElementById('notion').addEventListener('ipc-message', (event) => {
-    switch (event.channel) {
+      switch (event.channel) {
-      case 'notion-enhancer:sidebar-width':
+        case 'notion-enhancer:sidebar-width':
-        dragarea.style.left = event.args[0];
+          dragarea.style.left = event.args[0];
-        break;
+          break;
-      case 'notion-enhancer:panel-width':
+        case 'notion-enhancer:panel-width':
-        dragarea.style.right = event.args[0];
+          dragarea.style.right = event.args[0];
-        break;
+          break;
-    }
+      }
-  });
+    });
+  }
 };

repo/tabs/mod.json

@@ -13,7 +13,9 @@
       "avatar": "https://dragonwocky.me/avatar.jpg"
     }
   ],
-  "css": {},
+  "css": {
+    "frame": ["tabs.css"]
+  },
   "js": {
     "electron": [{ "source": "rendererIndex.cjs", "target": "renderer/index.js" }]
   },

repo/tabs/rendererIndex.cjs

@@ -6,6 +6,140 @@
 
 'use strict';
 
-module.exports = async function (api, db, __exports, __eval) {
+module.exports = async function ({ env, web, fs }, db, __exports, __eval) {
-  console.log(123);
+  const url = require('url'),
+    electron = require('electron'),
+    electronWindow = electron.remote.getCurrentWindow(),
+    notionIpc = env.notionRequire('helpers/notionIpc');
+
+  class Tab {
+    $notion = web.html`
+      <webview class="notion-webview" partition="persist:notion"
+        preload="file://${fs.notionPath('renderer/preload.js')}"
+        webpreferences="spellcheck=yes, enableremotemodule=yes"
+      ></webview>
+    `;
+    $search = web.html`
+      <webview class="search-webview" partition="persist:notion"
+        preload="file://${fs.notionPath('renderer/search.js')}"
+        src="file:///${fs.notionPath('renderer/search.html')}"
+        webpreferences="spellcheck=no, enableremotemodule=yes"
+      ></webview>
+    `;
+
+    #firstQuery = true;
+    constructor(notionUrl = 'notion://www.notion.so/') {
+      this.navigate(notionUrl);
+
+      this.$notion.addEventListener('dom-ready', () => {
+        this.focusNotion();
+
+        const navigateHistory = (event, cmd) => {
+          const swipe = event === 'swipe',
+            back = swipe ? cmd === 'left' : cmd === 'browser-backward',
+            fwd = swipe ? cmd === 'right' : cmd === 'browser-forward';
+          if (back && this.$notion.canGoBack()) this.$notion.goBack();
+          if (fwd && this.$notion.canGoForward()) this.$notion.goForward();
+        };
+        electronWindow.addListener('app-command', (e, cmd) => navigateHistory('app-cmd', cmd));
+        electronWindow.addListener('swipe', (e, dir) => navigateHistory('swipe', dir));
+
+        this.webContents().addListener('found-in-page', (event, result) => {
+          const matches = result
+            ? { count: result.matches, index: result.activeMatchOrdinal }
+            : { count: 0, index: 0 };
+          notionIpc.sendIndexToSearch(this.$search, 'search:result', matches);
+        });
+
+        notionIpc.proxyAllMainToNotion(this.$notion);
+      });
+
+      notionIpc.receiveIndexFromNotion.addListener(this.$notion, 'search:start', () => {
+        this.startSearch();
+      });
+      notionIpc.receiveIndexFromSearch.addListener(this.$search, 'search:clear', () => {
+        this.clearSearch();
+      });
+      notionIpc.receiveIndexFromNotion.addListener(this.$notion, 'search:stop', () => {
+        this.stopSearch();
+      });
+      notionIpc.receiveIndexFromSearch.addListener(this.$search, 'search:stop', () => {
+        this.stopSearch();
+      });
+      notionIpc.receiveIndexFromNotion.addListener(
+        this.$notion,
+        'search:set-theme',
+        (theme) => {
+          notionIpc.sendIndexToSearch(this.$search, 'search:set-theme', theme);
+        }
+      );
+      notionIpc.receiveIndexFromSearch.addListener(this.$search, 'search:next', (query) => {
+        this.searchNext(query);
+      });
+      notionIpc.receiveIndexFromSearch.addListener(this.$search, 'search:prev', (query) => {
+        this.searchPrev(query);
+      });
+
+      return this;
+    }
+
+    navigate(notionUrl) {
+      this.$notion.src = notionUrl;
+    }
+    webContents() {
+      return electron.remote.webContents.fromId(this.$notion.getWebContentsId());
+    }
+    focusNotion() {
+      document.activeElement?.blur?.();
+      this.$notion.blur();
+      this.$notion.focus();
+    }
+    focusSearch() {
+      document.activeElement?.blur?.();
+      this.$search.blur();
+      this.$search.focus();
+    }
+
+    startSearch() {
+      this.$search.classList.add('search-active');
+      this.focusSearch();
+      notionIpc.sendIndexToSearch(this.$search, 'search:start');
+      notionIpc.sendIndexToNotion(this.$search, 'search:started');
+    }
+    clearSearch() {
+      this.#firstQuery = true;
+      this.webContents().stopFindInPage('clearSelection');
+    }
+    stopSearch() {
+      this.$search.classList.remove('search-active');
+      this.focusNotion();
+      this.clearSearch();
+      notionIpc.sendIndexToSearch(this.$search, 'search:reset');
+      notionIpc.sendIndexToNotion(this.$notion, 'search:stopped');
+    }
+    searchNext(query) {
+      this.webContents().findInPage(query, {
+        forward: true,
+        findNext: !this.#firstQuery,
+      });
+      this.#firstQuery = false;
+    }
+    searchPrev(query) {
+      this.webContents().findInPage(query, {
+        forward: false,
+        findNext: !this.#firstQuery,
+      });
+      this.#firstQuery = false;
+    }
+  }
+
+  window['__start'] = () => {
+    const tab = new Tab(url.parse(window.location.href, true).query.path);
+    web.render(document.body, tab.$search);
+    web.render(document.body, tab.$notion);
+
+    electronWindow.on('focus', () => {
+      tab.$notion.focus();
+    });
+  };
 };

repo/tabs/tabs.css

@@ -0,0 +1,33 @@
+/**
+ * notion-enhancer: tabs
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.search-webview {
+  width: 100%;
+  height: 60px;
+  transition: transform 70ms ease-in;
+  transform: translateY(-100%);
+  pointer-events: none;
+  position: absolute;
+  z-index: 999;
+}
+.search-webview.search-active {
+  transition: transform 70ms ease-out;
+  transform: translateY(0%);
+  pointer-events: auto;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.notion-webview {
+  width: 100%;
+  height: 100%;
+}

repo/theming/client.mjs

@@ -20,7 +20,7 @@ export default async function ({ web, registry, storage, electron }, db) {
     storage
       .set(['theme'], document.querySelector('.notion-dark-theme') ? 'dark' : 'light')
       .then(() => {
-        electron.sendToHost('update-theme');
+        electron.sendMessageToHost('update-theme');
       });
     document.documentElement.classList[
       document.body.classList.contains('dark') ? 'add' : 'remove'

repo/truncated-titles/mod.json

@@ -15,9 +15,7 @@
   "js": {
     "client": ["client.mjs"]
   },
-  "css": {
+  "css": {},
-    "client": ["client.css"]
-  },
   "options": [
     {
       "type": "toggle",