Add Emulator Overlay

.changeset/three-singers-wonder.md

@@ -0,0 +1,7 @@
+---
+"@firebase/auth": patch
+"@firebase/firestore": patch
+"@firebase/util": patch
+---
+
+Add Emulator Overlay

common/api-review/util.api.md

@@ -482,6 +482,9 @@ export interface Subscribe<T> {
 // @public (undocumented)
 export type Unsubscribe = () => void;
 
+// @public
+export function updateEmulatorBanner(name: string, isRunningEmulator: boolean): void;
+
 // Warning: (ae-missing-release-tag) "validateArgCount" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public

packages/auth/src/api/index.ts

@@ -19,7 +19,8 @@ import {
   FirebaseError,
   isCloudflareWorker,
   isCloudWorkstation,
-  querystring
+  querystring,
+  updateEmulatorBanner
 } from '@firebase/util';
 
 import { AuthErrorCode, NamedErrorParams } from '../core/errors';
@@ -198,7 +199,9 @@ export async function _performFetchWithErrorHandling<V>(
   customErrorMap: Partial<ServerErrorMap<ServerError>>,
   fetchFn: () => Promise<Response>
 ): Promise<V> {
-  (auth as AuthInternal)._canInitEmulator = false;
+  const authInternal = auth as AuthInternal;
+  updateEmulatorBanner('Auth', authInternal.emulatorConfig !== null);
+  authInternal._canInitEmulator = false;
   const errorMap = { ...SERVER_ERROR_MAP, ...customErrorMap };
   try {
     const networkTimeout = new NetworkTimeout<Response>(auth);

packages/auth/src/core/auth/emulator.ts

@@ -18,7 +18,12 @@ import { Auth } from '../../model/public_types';
 import { AuthErrorCode } from '../errors';
 import { _assert } from '../util/assert';
 import { _castAuth } from './auth_impl';
-import { deepEqual, isCloudWorkstation, pingServer } from '@firebase/util';
+import {
+  deepEqual,
+  isCloudWorkstation,
+  pingServer,
+  updateEmulatorBanner
+} from '@firebase/util';
 
 /**
  * Changes the {@link Auth} instance to communicate with the Firebase Auth Emulator, instead of production
@@ -97,13 +102,14 @@ export function connectAuthEmulator(
   authInternal.emulatorConfig = emulatorConfig;
   authInternal.settings.appVerificationDisabledForTesting = true;
 
-  if (!disableWarnings) {
+  if (!disableWarnings && !isCloudWorkstation(host)) {
     emitEmulatorWarning();
   }
 
   // Workaround to get cookies in Firebase Studio
   if (isCloudWorkstation(host)) {
     void pingServer(`${protocol}//${host}${portStr}`);
+    updateEmulatorBanner('Auth', true);
   }
 }
 

packages/firestore/src/lite-api/database.ts

@@ -28,6 +28,7 @@ import {
   EmulatorMockTokenOptions,
   getDefaultEmulatorHostnameAndPort,
   isCloudWorkstation,
+  updateEmulatorBanner,
   pingServer
 } from '@firebase/util';
 
@@ -142,6 +143,11 @@ export class Firestore implements FirestoreService {
 
   _freezeSettings(): FirestoreSettingsImpl {
     this._settingsFrozen = true;
+    updateEmulatorBanner(
+      'Firestore',
+      (this._settings as PrivateSettings).emulatorOptions !== null &&
+        (this._settings as PrivateSettings).emulatorOptions !== undefined
+    );
     return this._settings;
   }
 
@@ -334,9 +340,7 @@ export function connectFirestoreEmulator(
     emulatorOptions: firestore._getEmulatorOptions()
   };
   const newHostSetting = `${host}:${port}`;
-  if (useSsl) {
-    void pingServer(`https://${newHostSetting}`);
-  }
+
   if (settings.host !== DEFAULT_HOST && settings.host !== newHostSetting) {
     logWarn(
       'Host has been set in both settings() and connectFirestoreEmulator(), emulator host ' +
@@ -357,6 +361,11 @@ export function connectFirestoreEmulator(
 
   firestore._setSettings(newConfig);
 
+  if (useSsl) {
+    void pingServer(`https://${newHostSetting}`);
+    updateEmulatorBanner('firestore', true);
+  }
+
   if (options.mockUserToken) {
     let token: string;
     let user: User;

packages/util/src/emulator.ts

@@ -140,3 +140,99 @@ export function createMockUserToken(
     signature
   ].join('.');
 }
+
+interface EmulatorStatuses {
+  [name: string]: boolean;
+}
+const emulatorStatus: EmulatorStatuses = {};
+
+// Checks whether any products are running on an emulator
+function areRunningEmulator(): boolean {
+  let runningEmulator = false;
+  for (const key of Object.keys(emulatorStatus)) {
+    if (emulatorStatus[key]) {
+      runningEmulator = true;
+    }
+  }
+  return runningEmulator;
+}
+
+function getOrCreateEl(id: string): { created: boolean; element: HTMLElement } {
+  let parentDiv = document.getElementById(id);
+  let created = false;
+  if (!parentDiv) {
+    parentDiv = document.createElement('div');
+    parentDiv.setAttribute('id', id);
+    created = true;
+  }
+  return { created, element: parentDiv };
+}
+
+/**
+ * Updates Emulator Banner. Primarily used for Firebase Studio
+ * @param name
+ * @param isRunningEmulator
+ * @public
+ */
+export function updateEmulatorBanner(
+  name: string,
+  isRunningEmulator: boolean
+): void {
+  if (
+    typeof window === 'undefined' ||
+    typeof document === 'undefined' ||
+    emulatorStatus[name] === isRunningEmulator
+  ) {
+    return;
+  }
+
+  emulatorStatus[name] = isRunningEmulator;
+  const bannerId = '__firebase__banner';
+  if (!areRunningEmulator()) {
+    tearDown();
+    return;
+  }
+
+  function tearDown(): void {
+    const element = document.getElementById(bannerId);
+    if (element) {
+      element.remove();
+    }
+  }
+
+  function setupDom(): void {
+    const banner = getOrCreateEl(bannerId);
+    const firebaseText: HTMLSpanElement =
+      document.getElementById('__firebase__text') ||
+      document.createElement('span');
+    if (banner.created) {
+      // update styles
+      const bannerEl = banner.element;
+      bannerEl.style.display = 'flex';
+      bannerEl.style.background = '#7faaf0';
+      bannerEl.style.position = 'absolute';
+      bannerEl.style.bottom = '5px';
+      bannerEl.style.left = '5px';
+      bannerEl.style.padding = '.5em';
+      bannerEl.style.borderRadius = '5px';
+      bannerEl.style.alignContent = 'center';
+      const closeBtn = document.createElement('span');
+      closeBtn.style.cursor = 'pointer';
+      closeBtn.style.paddingLeft = '5px';
+      closeBtn.innerHTML = ' ×';
+      closeBtn.onclick = () => {
+        tearDown();
+      };
+      bannerEl.appendChild(firebaseText);
+      bannerEl.appendChild(closeBtn);
+      document.body.appendChild(banner.element);
+    }
+    firebaseText.setAttribute('id', '__firebase__text');
+    firebaseText.innerText = 'Running in this workspace';
+  }
+  if (document.readyState === 'loading') {
+    window.addEventListener('DOMContentLoaded', setupDom);
+  } else {
+    setupDom();
+  }
+}