Set favicon color based on build status & support dark mode favicon

Author: siggisim

app/favicon/BUILD.bazel

@@ -0,0 +1,10 @@
+load("@npm_bazel_typescript//:index.bzl", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_library(
+    name = "favicon",
+    srcs = glob(["*.ts"]),
+    deps = [
+    ],
+)

app/favicon/favicon.ts

@@ -0,0 +1,41 @@
+export enum IconType {
+  Default,
+  Success,
+  Failure,
+  InProgress,
+  Unknown,
+}
+
+class FaviconService {
+  getDefaultFavicon() {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)')?.matches) {
+      return "/favicon/favicon_white.svg"
+    }
+    return "/favicon/favicon_black.svg";
+  }
+
+  getFaviconForType(type: IconType) {
+    switch (type) {
+      case IconType.Success:
+        return "/favicon/favicon_green.svg"
+      case IconType.Failure:
+        return "/favicon/favicon_red.svg"
+      case IconType.InProgress:
+        return "/favicon/favicon_blue.svg"
+      case IconType.Unknown:
+        return "/favicon/favicon_grey.svg"
+      default:
+        return this.getDefaultFavicon();
+    }
+  }
+
+  setFaviconForType(type: IconType) {
+    document.getElementById("favicon")?.setAttribute("href", this.getFaviconForType(type))
+  }
+
+  setDefaultFavicon() {
+    this.setFaviconForType(IconType.Default);
+  }
+}
+
+export default new FaviconService();

app/invocation/BUILD

@@ -9,6 +9,7 @@ ts_library(
         "//app/auth",
         "//app/capabilities",
         "//app/docs",
+        "//app/favicon",
         "//app/format",
         "//app/router",
         "//app/service",

app/invocation/invocation.tsx

@@ -4,6 +4,7 @@ import moment from 'moment';
 import rpcService from '../service/rpc_service'
 import authService, { User } from '../auth/auth_service';
 import capabilities from '../capabilities/capabilities';
+import faviconService from '../favicon/favicon';
 
 import InvocationModel from './invocation_model'
 
@@ -85,13 +86,13 @@ export default class InvocationComponent extends React.Component {
         showInProgressScreen = response.invocation[0].event.length == 0;
         this.fetchUpdatedProgress();
       }
-
       this.setState({
         inProgress: showInProgressScreen,
         model: InvocationModel.modelFromInvocations(response.invocation as invocation.Invocation[]),
         loading: false
       });
       document.title = `${this.state.model.getUser(true)} ${this.state.model.getCommand()} ${this.state.model.getPattern()} | BuildBuddy`;
+      faviconService.setFaviconForType(this.state.model.getFaviconType());
     }).catch((error: any) => {
       console.error(error);
       this.setState({

app/invocation/invocation_model.tsx

@@ -4,6 +4,7 @@ import { invocation } from '../../proto/invocation_ts_proto';
 import { build_event_stream } from '../../proto/build_event_stream_ts_proto';
 import { command_line } from '../../proto/command_line_ts_proto';
 import format from '../format/format';
+import { IconType } from '../favicon/favicon';
 
 export default class InvocationModel {
   invocations: invocation.Invocation[] = [];
@@ -298,6 +299,20 @@ export default class InvocationModel {
     return this.finished.exitCode.code == 0 ? "success" : "failure";
   }
 
+  getFaviconType() {
+    let invocationStatus = this.invocations.find(() => true)?.invocationStatus;
+    if (invocationStatus == invocation.Invocation.InvocationStatus.DISCONNECTED_INVOCATION_STATUS) {
+      return IconType.Unknown;
+    }
+    if (!this.started) {
+      return IconType.Unknown;
+    }
+    if (!this.finished) {
+      return IconType.InProgress;
+    }
+    return this.finished.exitCode.code == 0 ? IconType.Success : IconType.Failure;
+  }
+
   getStatusIcon() {
     let invocationStatus = this.invocations.find(() => true)?.invocationStatus;
     if (invocationStatus == invocation.Invocation.InvocationStatus.DISCONNECTED_INVOCATION_STATUS) {

app/root/BUILD.bazel

@@ -9,6 +9,7 @@ ts_library(
         "//app/auth",
         "//app/capabilities",
         "//app/docs",
+        "//app/favicon",
         "//app/footer",
         "//app/invocation",
         "//app/menu",

app/root/root.tsx

@@ -7,6 +7,7 @@ import capabilities from '../capabilities/capabilities'
 import router, { Path } from '../router/router';
 import authService, { AuthService } from '../auth/auth_service';
 import { User } from '../auth/auth_service';
+import faviconService from '../favicon/favicon';
 
 const viewModeKey = "VIEW_MODE";
 const denseModeValue = "DENSE";
@@ -38,9 +39,13 @@ export default class RootComponent extends React.Component {
     authService.userStream.addListener(AuthService.userEventName, (user: User) => {
       this.setState({ ...this.state, user })
     });
+    faviconService.setDefaultFavicon();
   }
 
   handlePathChange() {
+    if (this.state.path != window.location.pathname) {
+      faviconService.setDefaultFavicon();
+    }
     this.setState({
       hash: window.location.hash,
       path: window.location.pathname,