Build with Parcel

.gitignore

@@ -35,3 +35,6 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+
+# Parcel
+.parcel-cache

.parcelrc

@@ -0,0 +1,8 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.inline.css": [
+      "parcel-transformer-css-to-string"
+    ]
+  }
+}

demo/electron-tabs.html

@@ -8,7 +8,7 @@
 
 <tab-group></tab-group>
 
-<script src="../index.js"></script>
+<script src="../dist/electron-tabs.js"></script>
 <script>
   const tabGroup = document.querySelector("tab-group");
   tabGroup.newTab = {

dist/electron-tabs.js

@@ -0,0 +1,382 @@
+var $5580883c37846f86$export$2e2bcd8739ae039 = ".etabs-tabgroup {\n  width: 100%;\n  height: 32px;\n  background-color: #ccc;\n  cursor: default;\n  font: caption;\n  font-size: 14px;\n  -webkit-user-select: none;\n  user-select: none;\n  display: none;\n}\n\n.etabs-tabgroup.visible {\n\tdisplay: block;\n}\n\n.etabs-tabs {\n}\n\n.etabs-tab {\n  display: none;\n  position: relative;\n  color: #333;\n  height: 22px;\n  padding: 6px 8px 4px;\n  border: 1px solid #aaa;\n  border-bottom: none;\n  border-left: none;\n  background: linear-gradient(to bottom, rgba(234,234,234,1) 0%,rgba(204,204,204,1) 100%);\n  font: caption;\n  font-size: 14px;\n  background-color: #ccc;\n  cursor: default;\n}\n\n/* Dragula */\n.etabs-tab.gu-mirror {\n  padding-bottom: 0;\n}\n\n.etabs-tab:first-child {\n  border-left: none;\n}\n\n.etabs-tab.visible {\n  display: inline-block;\n  float: left;\n}\n\n.etabs-tab.active {\n  background: #fff;\n}\n\n.etabs-tab.flash {\n  background: linear-gradient(to bottom, rgba(255,243,170,1) 0%,rgba(255,227,37,1) 100%);\n}\n\n.etabs-buttons {\n  float: left;\n}\n\n.etabs-buttons button {\n  float: left;\n  color: #333;\n  background: none;\n  border: none;\n  font-size: 12px;\n  margin-top: 6px;\n  border-radius: 2px;\n  margin-left: 4px;\n  width: 20px;\n  text-align: center;\n  padding: 4px 0;\n}\n\n.etabs-buttons button:hover {\n  color: #eee;\n  background-color: #aaa;\n}\n\n.etabs-tab-badge {\n  position: absolute;\n  right: 0;\n  top: -7px;\n  background: red;\n  border-radius: 100%;\n  text-align: center;\n  font-size: 10px;\n  padding: 0 5px;\n}\n\n.etabs-tab-badge.hidden {\n  display: none;\n}\n\n.etabs-tab-icon {\n  display: inline-block;\n  height: 16px;\n}\n\n.etabs-tab-icon img {\n  max-width: 16px;\n  max-height: 16px;\n}\n\n.etabs-tab-title {\n  display: inline-block;\n  margin-left: 10px;\n}\n\n.etabs-tab-buttons {\n  display: inline-block;\n  margin-left: 10px;\n}\n\n.etabs-tab-buttons button {\n  display: inline-block;\n  color: #333;\n  background: none;\n  border: none;\n  width: 20px;\n  text-align: center;\n  border-radius: 2px;\n}\n\n.etabs-tab-buttons button:hover {\n  color: #eee;\n  background-color: #aaa;\n}\n\n.etabs-views {\n  position: relative;\n  border-top: 1px solid #aaa;\n  height: calc(100vh - 33px);\n}\n\n.etab-view {\n  position: relative;\n}\n\nwebview {\n  position: absolute;\n  visibility: hidden;\n  width: 100%;\n  height: 100%;\n}\nwebview.visible {\n  visibility: visible;\n}\n";
+
+
+if (!document) throw Error("electron-tabs module must be called in renderer process");
+class $4fa36e821943b400$var$TabGroup extends HTMLElement {
+    constructor(){
+        super();
+        // Options
+        this.options = {
+            closeButtonText: this.getAttribute("close-button-text") || "×",
+            newTabButtonText: this.getAttribute("new-tab-button-text") || "＋",
+            visibilityThreshold: this.getAttribute("visibility-threshold") || 0,
+            tabClass: this.getAttribute("tab-class") || "etabs-tab",
+            viewClass: this.getAttribute("view-class") || "etabs-view"
+        };
+        // Create custom element
+        const shadow = this.attachShadow({
+            mode: "open"
+        });
+        const wrapper = document.createElement("div");
+        wrapper.setAttribute("class", "etabs");
+        const tabgroup = document.createElement("div");
+        tabgroup.setAttribute("class", "etabs-tabgroup");
+        wrapper.appendChild(tabgroup);
+        const tabContainer = document.createElement("div");
+        tabContainer.setAttribute("class", "etabs-tabs");
+        tabgroup.appendChild(tabContainer);
+        this.tabContainer = tabContainer;
+        const buttonContainer = document.createElement("div");
+        buttonContainer.setAttribute("class", "etabs-buttons");
+        tabgroup.appendChild(buttonContainer);
+        this.buttonContainer = buttonContainer;
+        const viewContainer = document.createElement("div");
+        viewContainer.setAttribute("class", "etabs-views");
+        wrapper.appendChild(viewContainer);
+        this.viewContainer = viewContainer;
+        const style = document.createElement("style");
+        style.textContent = $5580883c37846f86$export$2e2bcd8739ae039;
+        shadow.appendChild(style);
+        shadow.appendChild(wrapper);
+        this.tabs = [];
+        this.newTabId = 0;
+        $4fa36e821943b400$var$TabGroupPrivate.initNewTabButton.bind(this)();
+        $4fa36e821943b400$var$TabGroupPrivate.initVisibility.bind(this)();
+        if (typeof this.options.ready === "function") this.options.ready(this);
+    }
+    addTab(args = this.options.newTab) {
+        if (typeof args === "function") args = args(this);
+        let id = this.newTabId;
+        this.newTabId++;
+        let tab = new $4fa36e821943b400$var$Tab(this, id, args);
+        this.tabs.push(tab);
+        // Don't call tab.activate() before a tab is referenced in this.tabs
+        if (args.active === true) tab.activate();
+        this.emit("tab-added", tab, this);
+        return tab;
+    }
+    getTab(id) {
+        for(let i in this.tabs){
+            if (this.tabs[i].id === id) return this.tabs[i];
+        }
+        return null;
+    }
+    getTabByPosition(position) {
+        let fromRight = position < 0;
+        for(let i in this.tabs){
+            if (this.tabs[i].getPosition(fromRight) === position) return this.tabs[i];
+        }
+        return null;
+    }
+    getTabByRelPosition(position) {
+        position = this.getActiveTab().getPosition() + position;
+        if (position <= 0) return null;
+        return this.getTabByPosition(position);
+    }
+    getNextTab() {
+        return this.getTabByRelPosition(1);
+    }
+    getPreviousTab() {
+        return this.getTabByRelPosition(-1);
+    }
+    getTabs() {
+        return this.tabs.slice();
+    }
+    eachTab(fn) {
+        this.getTabs().forEach(fn);
+        return this;
+    }
+    getActiveTab() {
+        if (this.tabs.length === 0) return null;
+        return this.tabs[0];
+    }
+}
+const $4fa36e821943b400$var$TabGroupPrivate = {
+    initNewTabButton: function() {
+        if (!this.options.newTab) return;
+        let button = this.buttonContainer.appendChild(document.createElement("button"));
+        button.classList.add(`${this.options.tabClass}-button-new`);
+        button.innerHTML = this.options.newTabButtonText;
+        button.addEventListener("click", this.addTab.bind(this, undefined), false);
+    },
+    initVisibility: function() {
+        function toggleTabsVisibility(tab, tabGroup) {
+            var visibilityThreshold = this.options.visibilityThreshold;
+            var el = tabGroup.tabContainer.parentNode;
+            if (this.tabs.length >= visibilityThreshold) el.classList.add("visible");
+            else el.classList.remove("visible");
+        }
+        this.on("tab-added", toggleTabsVisibility);
+        this.on("tab-removed", toggleTabsVisibility);
+    },
+    removeTab: function(tab, triggerEvent) {
+        let id = tab.id;
+        for(let i in this.tabs)if (this.tabs[i].id === id) {
+            this.tabs.splice(i, 1);
+            break;
+        }
+        if (triggerEvent) this.emit("tab-removed", tab, this);
+        return this;
+    },
+    setActiveTab: function(tab) {
+        $4fa36e821943b400$var$TabGroupPrivate.removeTab.bind(this)(tab);
+        this.tabs.unshift(tab);
+        this.emit("tab-active", tab, this);
+        return this;
+    },
+    activateRecentTab: function(tab) {
+        if (this.tabs.length > 0) this.tabs[0].activate();
+        return this;
+    }
+};
+class $4fa36e821943b400$var$Tab extends EventTarget {
+    constructor(tabGroup, id, args){
+        super();
+        this.tabGroup = tabGroup;
+        this.id = id;
+        this.title = args.title;
+        this.badge = args.badge;
+        this.iconURL = args.iconURL;
+        this.icon = args.icon;
+        this.closable = args.closable === false ? false : true;
+        this.webviewAttributes = args.webviewAttributes || {};
+        this.webviewAttributes.src = args.src;
+        this.tabElements = {};
+        $4fa36e821943b400$var$TabPrivate.initTab.bind(this)();
+        $4fa36e821943b400$var$TabPrivate.initWebview.bind(this)();
+        if (args.visible !== false) this.show();
+        if (typeof args.ready === "function") args.ready(this);
+    }
+    setTitle(title) {
+        if (this.isClosed) return;
+        let span = this.tabElements.title;
+        span.innerHTML = title;
+        span.title = title;
+        this.title = title;
+        this.emit("title-changed", title, this);
+        return this;
+    }
+    getTitle() {
+        if (this.isClosed) return;
+        return this.title;
+    }
+    setBadge(badge) {
+        if (this.isClosed) return;
+        let span = this.tabElements.badge;
+        this.badge = badge;
+        if (badge) {
+            span.innerHTML = badge;
+            span.classList.remove('hidden');
+        } else span.classList.add('hidden');
+        this.emit("badge-changed", badge, this);
+    }
+    getBadge() {
+        if (this.isClosed) return;
+        return this.badge;
+    }
+    setIcon(iconURL, icon) {
+        if (this.isClosed) return;
+        this.iconURL = iconURL;
+        this.icon = icon;
+        let span = this.tabElements.icon;
+        if (iconURL) {
+            span.innerHTML = `<img src="${iconURL}" />`;
+            this.emit("icon-changed", iconURL, this);
+        } else if (icon) {
+            span.innerHTML = `<i class="${icon}"></i>`;
+            this.emit("icon-changed", icon, this);
+        }
+        return this;
+    }
+    getIcon() {
+        if (this.isClosed) return;
+        if (this.iconURL) return this.iconURL;
+        return this.icon;
+    }
+    setPosition(newPosition) {
+        let tabContainer = this.tabGroup.tabContainer;
+        let tabs = tabContainer.children;
+        let oldPosition = this.getPosition() - 1;
+        if (newPosition < 0) {
+            newPosition += tabContainer.childElementCount;
+            if (newPosition < 0) newPosition = 0;
+        } else {
+            if (newPosition > tabContainer.childElementCount) newPosition = tabContainer.childElementCount;
+            // Make 1 be leftmost position
+            newPosition--;
+        }
+        if (newPosition > oldPosition) newPosition++;
+        tabContainer.insertBefore(tabs[oldPosition], tabs[newPosition]);
+        return this;
+    }
+    getPosition(fromRight) {
+        let position = 0;
+        let tab = this.tab;
+        while((tab = tab.previousSibling) != null)position++;
+        if (fromRight === true) position -= this.tabGroup.tabContainer.childElementCount;
+        if (position >= 0) position++;
+        return position;
+    }
+    activate() {
+        if (this.isClosed) return;
+        let activeTab = this.tabGroup.getActiveTab();
+        if (activeTab) {
+            activeTab.tab.classList.remove("active");
+            activeTab.webview.classList.remove("visible");
+            activeTab.emit("inactive", activeTab);
+        }
+        $4fa36e821943b400$var$TabGroupPrivate.setActiveTab.bind(this.tabGroup)(this);
+        this.tab.classList.add("active");
+        this.webview.classList.add("visible");
+        this.webview.focus();
+        this.emit("active", this);
+        return this;
+    }
+    show(flag) {
+        if (this.isClosed) return;
+        if (flag !== false) {
+            this.tab.classList.add("visible");
+            this.emit("visible", this);
+        } else {
+            this.tab.classList.remove("visible");
+            this.emit("hidden", this);
+        }
+        return this;
+    }
+    hide() {
+        return this.show(false);
+    }
+    flash(flag) {
+        if (this.isClosed) return;
+        if (flag !== false) {
+            this.tab.classList.add("flash");
+            this.emit("flash", this);
+        } else {
+            this.tab.classList.remove("flash");
+            this.emit("unflash", this);
+        }
+        return this;
+    }
+    unflash() {
+        return this.flash(false);
+    }
+    hasClass(classname) {
+        return this.tab.classList.contains(classname);
+    }
+    close(force) {
+        const abortController = new AbortController();
+        const abort = ()=>abortController.abort()
+        ;
+        this.emit("closing", this, abort);
+        const abortSignal = abortController.signal;
+        if (this.isClosed || !this.closable && !force || abortSignal.aborted) return;
+        this.isClosed = true;
+        let tabGroup = this.tabGroup;
+        tabGroup.tabContainer.removeChild(this.tab);
+        tabGroup.viewContainer.removeChild(this.webview);
+        let activeTab = this.tabGroup.getActiveTab();
+        $4fa36e821943b400$var$TabGroupPrivate.removeTab.bind(tabGroup)(this, true);
+        this.emit("close", this);
+        if (activeTab.id === this.id) $4fa36e821943b400$var$TabGroupPrivate.activateRecentTab.bind(tabGroup)();
+    }
+}
+const $4fa36e821943b400$var$TabPrivate = {
+    initTab: function() {
+        let tabClass = this.tabGroup.options.tabClass;
+        // Create tab element
+        let tab = this.tab = document.createElement("div");
+        tab.classList.add(tabClass);
+        for (let el of [
+            "icon",
+            "title",
+            "buttons",
+            "badge"
+        ]){
+            let span = tab.appendChild(document.createElement("span"));
+            span.classList.add(`${tabClass}-${el}`);
+            this.tabElements[el] = span;
+        }
+        this.setTitle(this.title);
+        this.setBadge(this.badge);
+        this.setIcon(this.iconURL, this.icon);
+        $4fa36e821943b400$var$TabPrivate.initTabButtons.bind(this)();
+        $4fa36e821943b400$var$TabPrivate.initTabClickHandler.bind(this)();
+        this.tabGroup.tabContainer.appendChild(this.tab);
+    },
+    initTabButtons: function() {
+        let container = this.tabElements.buttons;
+        let tabClass = this.tabGroup.options.tabClass;
+        if (this.closable) {
+            let button = container.appendChild(document.createElement("button"));
+            button.classList.add(`${tabClass}-button-close`);
+            button.innerHTML = this.tabGroup.options.closeButtonText;
+            button.addEventListener("click", this.close.bind(this, false), false);
+        }
+    },
+    initTabClickHandler: function() {
+        // Mouse up
+        const tabClickHandler = function(e) {
+            if (this.isClosed) return;
+            if (e.which === 2) this.close();
+        };
+        this.tab.addEventListener("mouseup", tabClickHandler.bind(this), false);
+        // Mouse down
+        const tabMouseDownHandler = function(e) {
+            if (this.isClosed) return;
+            if (e.which === 1) {
+                if (e.target.matches("button")) return;
+                this.activate();
+            }
+        };
+        this.tab.addEventListener("mousedown", tabMouseDownHandler.bind(this), false);
+    },
+    initWebview: function() {
+        const webview = this.webview = document.createElement("webview");
+        const tabWebviewDidFinishLoadHandler = function(e) {
+            this.emit("webview-ready", this);
+        };
+        this.webview.addEventListener("did-finish-load", tabWebviewDidFinishLoadHandler.bind(this), false);
+        const tabWebviewDomReadyHandler = function(e) {
+            // Remove this once https://github.com/electron/electron/issues/14474 is fixed
+            webview.blur();
+            webview.focus();
+            this.emit("webview-dom-ready", this);
+        };
+        this.webview.addEventListener("dom-ready", tabWebviewDomReadyHandler.bind(this), false);
+        this.webview.classList.add(this.tabGroup.options.viewClass);
+        if (this.webviewAttributes) {
+            let attrs = this.webviewAttributes;
+            for(let key in attrs){
+                const attr = attrs[key];
+                if (attr === false) continue;
+                this.webview.setAttribute(key, attr);
+            }
+        }
+        this.tabGroup.viewContainer.appendChild(this.webview);
+    }
+};
+/**
+ * This makes the browser EventTarget API work similar to EventEmitter
+ */ const $4fa36e821943b400$var$eventEmitterMixin = {
+    emit (type, ...args) {
+        this.dispatchEvent(new CustomEvent(type, {
+            detail: args
+        }));
+    },
+    on (type, fn) {
+        this.addEventListener(type, ({ detail: detail  })=>fn.apply(this, detail)
+        );
+    },
+    once (type, fn) {
+        this.addEventListener(type, ({ detail: detail  })=>fn.apply(this, detail)
+        , {
+            once: true
+        });
+    }
+};
+Object.assign($4fa36e821943b400$var$TabGroup.prototype, $4fa36e821943b400$var$eventEmitterMixin);
+Object.assign($4fa36e821943b400$var$Tab.prototype, $4fa36e821943b400$var$eventEmitterMixin);
+customElements.define("tab-group", $4fa36e821943b400$var$TabGroup);
+
+
+//# sourceMappingURL=electron-tabs.js.map

package.json

@@ -2,14 +2,16 @@
   "name": "electron-tabs",
   "version": "1.0.0-dev",
   "description": "Simple tabs for Electron applications",
-  "main": "index.js",
+  "source": "src/index.js",
+  "main": "dist/electron-tabs.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/brrd/electron-tabs"
   },
   "scripts": {
     "demo": "electron ./demo",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "watch": "parcel watch",
+    "build": "parcel build"
   },
   "keywords": [
     "electron",
@@ -20,6 +22,10 @@
   "author": "brrd",
   "license": "MIT",
   "devDependencies": {
-    "electron": "^17.1.2"
+    "cssnano": "^5.1.9",
+    "electron": "^17.1.2",
+    "parcel": "^2.5.0",
+    "parcel-transformer-css-to-string": "^0.9.1",
+    "postcss": "^8.4.14"
   }
 }

src/index.js

@@ -1,156 +1,4 @@
-// TODO: move into a CSS file
+import styles from "./style.inline.css";
-// We need a bundler here :-/
-const css = `
-.etabs-tabgroup {
-  width: 100%;
-  height: 32px;
-  background-color: #ccc;
-  cursor: default;
-  font: caption;
-  font-size: 14px;
-  -webkit-user-select: none;
-  user-select: none;
-  display: none;
-}
-
-.etabs-tabgroup.visible {
-	display: block;
-}
-
-.etabs-tabs {
-}
-
-.etabs-tab {
-  display: none;
-  position: relative;
-  color: #333;
-  height: 22px;
-  padding: 6px 8px 4px;
-  border: 1px solid #aaa;
-  border-bottom: none;
-  border-left: none;
-  background: linear-gradient(to bottom, rgba(234,234,234,1) 0%,rgba(204,204,204,1) 100%);
-  font: caption;
-  font-size: 14px;
-  background-color: #ccc;
-  cursor: default;
-}
-
-/* Dragula */
-.etabs-tab.gu-mirror {
-  padding-bottom: 0;
-}
-
-.etabs-tab:first-child {
-  border-left: none;
-}
-
-.etabs-tab.visible {
-  display: inline-block;
-  float: left;
-}
-
-.etabs-tab.active {
-  background: #fff;
-}
-
-.etabs-tab.flash {
-  background: linear-gradient(to bottom, rgba(255,243,170,1) 0%,rgba(255,227,37,1) 100%);
-}
-
-.etabs-buttons {
-  float: left;
-}
-
-.etabs-buttons button {
-  float: left;
-  color: #333;
-  background: none;
-  border: none;
-  font-size: 12px;
-  margin-top: 6px;
-  border-radius: 2px;
-  margin-left: 4px;
-  width: 20px;
-  text-align: center;
-  padding: 4px 0;
-}
-
-.etabs-buttons button:hover {
-  color: #eee;
-  background-color: #aaa;
-}
-
-.etabs-tab-badge {
-  position: absolute;
-  right: 0;
-  top: -7px;
-  background: red;
-  border-radius: 100%;
-  text-align: center;
-  font-size: 10px;
-  padding: 0 5px;
-}
-
-.etabs-tab-badge.hidden {
-  display: none;
-}
-
-.etabs-tab-icon {
-  display: inline-block;
-  height: 16px;
-}
-
-.etabs-tab-icon img {
-  max-width: 16px;
-  max-height: 16px;
-}
-
-.etabs-tab-title {
-  display: inline-block;
-  margin-left: 10px;
-}
-
-.etabs-tab-buttons {
-  display: inline-block;
-  margin-left: 10px;
-}
-
-.etabs-tab-buttons button {
-  display: inline-block;
-  color: #333;
-  background: none;
-  border: none;
-  width: 20px;
-  text-align: center;
-  border-radius: 2px;
-}
-
-.etabs-tab-buttons button:hover {
-  color: #eee;
-  background-color: #aaa;
-}
-
-.etabs-views {
-  position: relative;
-  border-top: 1px solid #aaa;
-  height: calc(100vh - 33px);
-}
-
-.etab-view {
-  position: relative;
-}
-
-webview {
-  position: absolute;
-  visibility: hidden;
-  width: 100%;
-  height: 100%;
-}
-webview.visible {
-  visibility: visible;
-}
-`
 
 if (!document) {
   throw Error("electron-tabs module must be called in renderer process");
@@ -196,12 +44,8 @@ class TabGroup extends HTMLElement {
     wrapper.appendChild(viewContainer);
     this.viewContainer = viewContainer;
 
-    // const style = document.createElement("link");
-    // style.setAttribute("rel", "stylesheet");
-    // style.setAttribute("href", "style.css");
-
     const style = document.createElement("style");
-    style.textContent = css;
+    style.textContent = styles;
 
     shadow.appendChild(style);
     shadow.appendChild(wrapper);

src/style.inline.css

@@ -0,0 +1,149 @@
+.etabs-tabgroup {
+  width: 100%;
+  height: 32px;
+  background-color: #ccc;
+  cursor: default;
+  font: caption;
+  font-size: 14px;
+  -webkit-user-select: none;
+  user-select: none;
+  display: none;
+}
+
+.etabs-tabgroup.visible {
+	display: block;
+}
+
+.etabs-tabs {
+}
+
+.etabs-tab {
+  display: none;
+  position: relative;
+  color: #333;
+  height: 22px;
+  padding: 6px 8px 4px;
+  border: 1px solid #aaa;
+  border-bottom: none;
+  border-left: none;
+  background: linear-gradient(to bottom, rgba(234,234,234,1) 0%,rgba(204,204,204,1) 100%);
+  font: caption;
+  font-size: 14px;
+  background-color: #ccc;
+  cursor: default;
+}
+
+/* Dragula */
+.etabs-tab.gu-mirror {
+  padding-bottom: 0;
+}
+
+.etabs-tab:first-child {
+  border-left: none;
+}
+
+.etabs-tab.visible {
+  display: inline-block;
+  float: left;
+}
+
+.etabs-tab.active {
+  background: #fff;
+}
+
+.etabs-tab.flash {
+  background: linear-gradient(to bottom, rgba(255,243,170,1) 0%,rgba(255,227,37,1) 100%);
+}
+
+.etabs-buttons {
+  float: left;
+}
+
+.etabs-buttons button {
+  float: left;
+  color: #333;
+  background: none;
+  border: none;
+  font-size: 12px;
+  margin-top: 6px;
+  border-radius: 2px;
+  margin-left: 4px;
+  width: 20px;
+  text-align: center;
+  padding: 4px 0;
+}
+
+.etabs-buttons button:hover {
+  color: #eee;
+  background-color: #aaa;
+}
+
+.etabs-tab-badge {
+  position: absolute;
+  right: 0;
+  top: -7px;
+  background: red;
+  border-radius: 100%;
+  text-align: center;
+  font-size: 10px;
+  padding: 0 5px;
+}
+
+.etabs-tab-badge.hidden {
+  display: none;
+}
+
+.etabs-tab-icon {
+  display: inline-block;
+  height: 16px;
+}
+
+.etabs-tab-icon img {
+  max-width: 16px;
+  max-height: 16px;
+}
+
+.etabs-tab-title {
+  display: inline-block;
+  margin-left: 10px;
+}
+
+.etabs-tab-buttons {
+  display: inline-block;
+  margin-left: 10px;
+}
+
+.etabs-tab-buttons button {
+  display: inline-block;
+  color: #333;
+  background: none;
+  border: none;
+  width: 20px;
+  text-align: center;
+  border-radius: 2px;
+}
+
+.etabs-tab-buttons button:hover {
+  color: #eee;
+  background-color: #aaa;
+}
+
+.etabs-views {
+  position: relative;
+  border-top: 1px solid #aaa;
+  height: calc(100vh - 33px);
+}
+
+.etab-view {
+  position: relative;
+}
+
+webview {
+  position: absolute;
+  visibility: hidden;
+  width: 100%;
+  height: 100%;
+}
+webview.visible {
+  visibility: visible;
+}