Updated to include external link

Author: maneesht

packages/auth/src/api/index.ts

@@ -198,8 +198,7 @@ export async function _performFetchWithErrorHandling<V>(
   customErrorMap: Partial<ServerErrorMap<ServerError>>,
   fetchFn: () => Promise<Response>
 ): Promise<V> {
-  const authInternal = auth as AuthInternal;
-  authInternal._canInitEmulator = false;
+  (auth as AuthInternal)._canInitEmulator = false;
   const errorMap = { ...SERVER_ERROR_MAP, ...customErrorMap };
   try {
     const networkTimeout = new NetworkTimeout<Response>(auth);

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

@@ -102,17 +102,12 @@ export function connectAuthEmulator(
   authInternal.emulatorConfig = emulatorConfig;
   authInternal.settings.appVerificationDisabledForTesting = true;
 
-  if (!disableWarnings) {
-    if (isCloudWorkstation(host)) {
-      updateEmulatorBanner('Auth', true);
-    } else {
-      emitEmulatorWarning();
-    }
-  }
-
-  // Workaround to get cookies in Firebase Studio
   if (isCloudWorkstation(host)) {
+    updateEmulatorBanner('Auth', true);
+    // Workaround to get cookies in Firebase Studio
     void pingServer(`${protocol}//${host}${portStr}`);
+  } else if (!disableWarnings) {
+    emitEmulatorWarning();
   }
 }
 

packages/auth/src/platform_browser/index.ts

@@ -111,8 +111,6 @@ export function getAuth(app: FirebaseApp = getApp()): Auth {
     }
   }
 
-  updateEmulatorBanner('Auth', false);
-
   const authEmulatorHost = getDefaultEmulatorHost('auth');
   if (authEmulatorHost) {
     connectAuthEmulator(auth, `http://${authEmulatorHost}`);

packages/database/src/api/Database.ts

@@ -333,7 +333,6 @@ export function getDatabase(
     identifier: url
   }) as Database;
   if (!db._instanceStarted) {
-    updateEmulatorBanner('Database', false);
     const emulator = getDefaultEmulatorHostnameAndPort('database');
     if (emulator) {
       connectDatabaseEmulator(db, ...emulator);

packages/firestore/src/util/async_queue_impl.ts

@@ -182,6 +182,7 @@ export class AsyncQueueImpl implements AsyncQueue {
   }
 
   private enqueueInternal<T extends unknown>(op: () => Promise<T>): Promise<T> {
+    console.trace();
     const newTail = this.tail.then(() => {
       this.operationInProgress = true;
       return op()

packages/functions/src/api.ts

@@ -48,7 +48,6 @@ export function getFunctions(
   app: FirebaseApp = getApp(),
   regionOrCustomDomain: string = DEFAULT_REGION
 ): Functions {
-  updateEmulatorBanner('Functions', false);
   // Dependencies
   const functionsProvider: Provider<'functions'> = _getProvider(
     getModularInstance(app),

packages/functions/src/service.ts

@@ -200,7 +200,6 @@ export function httpsCallable<RequestData, ResponseData, StreamData = unknown>(
   name: string,
   options?: HttpsCallableOptions
 ): HttpsCallable<RequestData, ResponseData, StreamData> {
-  updateEmulatorBanner('Functions', functionsInstance.emulatorOrigin !== null);
   const callable = (
     data?: RequestData | null
   ): Promise<HttpsCallableResult> => {
@@ -231,7 +230,6 @@ export function httpsCallableFromURL<
   url: string,
   options?: HttpsCallableOptions
 ): HttpsCallable<RequestData, ResponseData, StreamData> {
-  updateEmulatorBanner('Functions', functionsInstance.emulatorOrigin !== null);
   const callable = (
     data?: RequestData | null
   ): Promise<HttpsCallableResult> => {

packages/storage/src/api.ts

@@ -333,7 +333,6 @@ export function getStorage(
   bucketUrl?: string
 ): FirebaseStorage {
   app = getModularInstance(app);
-  updateEmulatorBanner('Storage', false);
   const storageProvider: Provider<'storage'> = _getProvider(app, STORAGE_TYPE);
   const storageInstance = storageProvider.getImmediate({
     identifier: bucketUrl

packages/storage/src/service.ts

@@ -326,7 +326,6 @@ export class FirebaseStorageImpl implements FirebaseStorage {
     appCheckToken: string | null,
     retry = true
   ): Request<O> {
-    updateEmulatorBanner('Service', this._isUsingEmulator);
     if (!this._deleted) {
       const request = makeRequest(
         requestInfo,

packages/util/src/emulator.ts

@@ -261,6 +261,15 @@ export function updateEmulatorBanner(
     learnMoreLink.style.paddingLeft = '5px';
   }
 
+  function setupOpenExternal(svgElement: SVGElement, id: string): void {
+    svgElement.setAttribute('viewBox', '0 0 16 16');
+    svgElement.setAttribute('fill', 'none');
+    svgElement.setAttribute('id', id);
+    svgElement.style.width = '16px';
+    svgElement.style.marginLeft = '4px';
+    svgElement.innerHTML = `<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6667 12.6667H3.33333V3.33333H8V2H3.33333C2.59333 2 2 2.6 2 3.33333V12.6667C2 13.4 2.59333 14 3.33333 14H12.6667C13.4 14 14 13.4 14 12.6667V8H12.6667V12.6667ZM9.33333 2V3.33333H11.7267L5.17333 9.88667L6.11333 10.8267L12.6667 4.27333V6.66667H14V2H9.33333Z" fill="#212121"/>`;
+  }
+
   function setupDom(): void {
     const banner = getOrCreateEl(bannerId);
     const firebaseTextId = prefixedId('text');
@@ -276,14 +285,27 @@ export function updateEmulatorBanner(
         prependIconId
       ) as HTMLOrSVGElement as SVGElement) ||
       document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const openExternalIconId = prefixedId('openexternal');
+    const openExternalIcon: SVGElement =
+      (document.getElementById(
+        openExternalIconId
+      ) as HTMLOrSVGElement as SVGElement) ||
+      document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     if (banner.created) {
       // update styles
       const bannerEl = banner.element;
       setupBannerStyles(bannerEl);
       setupLinkStyles(learnMoreLink, learnMoreId);
+      setupOpenExternal(openExternalIcon, openExternalIconId);
       const closeBtn = setupCloseBtn();
       setupIconStyles(prependIcon, prependIconId);
-      bannerEl.append(prependIcon, firebaseText, learnMoreLink, closeBtn);
+      bannerEl.append(
+        prependIcon,
+        firebaseText,
+        learnMoreLink,
+        openExternalIcon,
+        closeBtn
+      );
       document.body.appendChild(bannerEl);
     }