Use document.title to display tab count and update info

ui/app.js

@@ -42,6 +42,8 @@ const backendQueryRetryDelay = 2000;
 
 const maxTimeDiff = 30000;
 
+const updateIndicatorMaxDisplayTime = 3000;
+
 const mainTemplate = `
 <home
   v-if="page == 'app'"
@@ -50,7 +52,11 @@ const mainTemplate = `
   :connection="socket"
   :controls="controls"
   :commands="commands"
-  @navigate-to="changeURLHash"></home>
+  @navigate-to="changeURLHash"
+  @tab-opened="tabOpened"
+  @tab-closed="tabClosed"
+  @tab-updated="tabUpdated"
+></home>
 <auth
   v-else-if="page == 'auth'"
   :error="authErr"
@@ -60,6 +66,8 @@ const mainTemplate = `
 `.trim();
 
 function startApp(rootEl) {
+  const pageTitle = document.title;
+
   let uiControlColor = new ControlColor();
 
   new Vue({
@@ -90,7 +98,8 @@ function startApp(rootEl) {
           new telnetctl.Telnet(uiControlColor),
           new sshctl.SSH(uiControlColor)
         ]),
-        commands: new Commands([new telnet.Command(), new ssh.Command()])
+        commands: new Commands([new telnet.Command(), new ssh.Command()]),
+        tabUpdateIndicator: null
       };
     },
     watch: {
@@ -109,6 +118,12 @@ function startApp(rootEl) {
       this.tryInitialAuth();
     },
     methods: {
+      changeTitleInfo(newTitleInfo) {
+        document.title = newTitleInfo + " " + pageTitle;
+      },
+      resetTitleInfo() {
+        document.title = pageTitle;
+      },
       changeURLHash(newHash) {
         window.location.hash = newHash;
       },
@@ -280,6 +295,43 @@ function startApp(rootEl) {
         } catch (e) {
           this.authErr = "Unable to authenticate: " + e;
         }
+      },
+      updateTabTitleInfo(tabs, updated) {
+        if (tabs.length <= 0) {
+          this.resetTitleInfo();
+
+          return;
+        }
+
+        this.changeTitleInfo("(" + tabs.length + (updated ? "*" : "") + ")");
+      },
+      tabOpened(tabs) {
+        if (this.tabUpdateIndicator) {
+          clearTimeout(this.tabUpdateIndicator);
+          this.tabUpdateIndicator = null;
+        }
+
+        this.updateTabTitleInfo(tabs, false);
+      },
+      tabClosed(tabs) {
+        if (this.tabUpdateIndicator) {
+          clearTimeout(this.tabUpdateIndicator);
+          this.tabUpdateIndicator = null;
+        }
+
+        this.updateTabTitleInfo(tabs, false);
+      },
+      tabUpdated(tabs) {
+        if (this.tabUpdateIndicator) {
+          clearTimeout(this.tabUpdateIndicator);
+          this.tabUpdateIndicator = null;
+        }
+
+        this.updateTabTitleInfo(tabs, true);
+
+        this.tabUpdateIndicator = setTimeout(() => {
+          this.updateTabTitleInfo(tabs, false);
+        }, updateIndicatorMaxDisplayTime);
       }
     }
   });

ui/home.vue

@@ -440,6 +440,8 @@ export default {
       this.windows.connect = false;
 
       this.addToTab(data);
+
+      this.$emit("tab-opened", this.tab.tabs);
     },
     async addToTab(data) {
       await this.switchTab(
@@ -498,6 +500,8 @@ export default {
       }
 
       this.removeFromTab(index);
+
+      this.$emit("tab-closed", this.tab.tabs);
     },
     tabStopped(index, reason) {
       if (reason === null) {
@@ -507,7 +511,9 @@ export default {
       }
     },
     tabUpdated(index) {
-      this.tab.tabs[index].indicator.updated = this.tab.current !== index;
+      this.$emit("tab-updated", this.tab.tabs);
+
+      this.tab.tabs[index].indicator.updated = index !== this.tab.current;
     }
   }
 };

ui/widgets/tab_list.vue

@@ -25,7 +25,7 @@
       :class="{
         active: tab === idx,
         error: tabInfo.indicator.error.length > 0,
-        updated: tabInfo.indicator.updated
+        updated: tabInfo.indicator.updated && tab !== idx
       }"
       :style="
         'background: ' +