Retrieve the page favicons from the browser and display it on the tab selector

src/actions/icons.js

@@ -4,11 +4,12 @@
 
 // @flow
 import type { Action, ThunkAction } from 'firefox-profiler/types';
+import sha1 from 'firefox-profiler/utils/sha1';
 
-export function iconHasLoaded(icon: string): Action {
+export function iconHasLoaded(iconWithClassName: [string, string]): Action {
   return {
     type: 'ICON_HAS_LOADED',
-    icon,
+    iconWithClassName,
   };
 }
 
@@ -21,24 +22,27 @@ export function iconIsInError(icon: string): Action {
 
 const icons: Set<string> = new Set();
 
-type IconRequestResult = 'loaded' | 'error' | 'cached';
+type IconRequestResult =
+  | {| type: 'error' | 'cached' |}
+  | {| type: 'loaded', iconWithClassName: [string, string] |};
 
-function _getIcon(icon: string): Promise<IconRequestResult> {
+async function _getIcon(icon: string): Promise<IconRequestResult> {
   if (icons.has(icon)) {
-    return Promise.resolve('cached');
+    return Promise.resolve({ type: 'cached' });
   }
 
   icons.add(icon);
+  const className = await _classNameFromUrl(icon);
 
   const result = new Promise((resolve) => {
     const image = new Image();
     image.src = icon;
     image.referrerPolicy = 'no-referrer';
     image.onload = () => {
-      resolve('loaded');
+      resolve({ type: 'loaded', iconWithClassName: [icon, className] });
     };
     image.onerror = () => {
-      resolve('error');
+      resolve({ type: 'error' });
     };
   });
 
@@ -48,9 +52,9 @@ function _getIcon(icon: string): Promise<IconRequestResult> {
 export function iconStartLoading(icon: string): ThunkAction<Promise<void>> {
   return (dispatch) => {
     return _getIcon(icon).then((result) => {
-      switch (result) {
+      switch (result.type) {
         case 'loaded':
-          dispatch(iconHasLoaded(icon));
+          dispatch(iconHasLoaded(result.iconWithClassName));
           break;
         case 'error':
           dispatch(iconIsInError(icon));
@@ -59,8 +63,17 @@ export function iconStartLoading(icon: string): ThunkAction<Promise<void>> {
           // nothing to do
           break;
         default:
-          throw new Error(`Unknown icon load result ${result}`);
+          throw new Error(`Unknown icon load result ${result.type}`);
       }
     });
   };
 }
+
+/**
+ * Transforms a URL into a valid CSS class name.
+ */
+async function _classNameFromUrl(url): Promise<string> {
+  return url.startsWith('data:image/')
+    ? 'dataUrl' + (await sha1(url))
+    : url.replace(/[/:.+>< ~()#,]/g, '_');
+}

src/actions/receive-profile.js

@@ -90,6 +90,7 @@ import type {
   InnerWindowID,
   Pid,
   OriginsTimelineRoot,
+  PageList,
 } from 'firefox-profiler/types';
 
 import type {
@@ -279,6 +280,10 @@ export function finalizeProfileView(
         await doSymbolicateProfile(dispatch, profile, symbolStore);
       }
     }
+
+    if (browserConnection && pages && pages.length > 0) {
+      await retrievePageFaviconsFromBrowser(dispatch, pages, browserConnection);
+    }
   };
 }
 
@@ -1017,6 +1022,36 @@ export async function doSymbolicateProfile(
   dispatch(doneSymbolicating());
 }
 
+export async function retrievePageFaviconsFromBrowser(
+  dispatch: Dispatch,
+  pages: PageList,
+  browserConnection: BrowserConnection
+) {
+  const newPages = [...pages];
+
+  await browserConnection
+    .getPageFavicons(newPages.map((p) => p.url))
+    .then((favicons) => {
+      if (newPages.length !== favicons.length) {
+        // It appears that an error occurred since the pages and favicons arrays
+        // have different lengths. Return early without doing anything.
+        return;
+      }
+
+      for (let index = 0; index < favicons.length; index++) {
+        newPages[index] = {
+          ...newPages[index],
+          favicon: favicons[index],
+        };
+      }
+    });
+
+  dispatch({
+    type: 'UPDATE_PAGES',
+    newPages,
+  });
+}
+
 // From a BrowserConnectionStatus, this unwraps the included browserConnection
 // when possible.
 export function unwrapBrowserConnection(

src/app-logic/browser-connection.js

@@ -11,6 +11,7 @@ import {
   getSymbolTableViaWebChannel,
   queryWebChannelVersionViaWebChannel,
   querySymbolicationApiViaWebChannel,
+  getPageFaviconsViaWebChannel,
 } from './web-channel';
 import type { Milliseconds } from 'firefox-profiler/types';
 
@@ -68,6 +69,8 @@ export interface BrowserConnection {
     debugName: string,
     breakpadId: string
   ): Promise<SymbolTableAsTuple>;
+
+  getPageFavicons(pageUrls: Array<string>): Promise<Array<string | null>>;
 }
 
 /**
@@ -81,12 +84,14 @@ class BrowserConnectionImpl implements BrowserConnection {
   _webChannelSupportsGetProfileAndSymbolication: boolean;
   _webChannelSupportsGetExternalPowerTracks: boolean;
   _webChannelSupportsGetExternalMarkers: boolean;
+  _webChannelSupportsGetPageFavicons: boolean;
   _geckoProfiler: $GeckoProfiler | void;
 
   constructor(webChannelVersion: number) {
     this._webChannelSupportsGetProfileAndSymbolication = webChannelVersion >= 1;
     this._webChannelSupportsGetExternalPowerTracks = webChannelVersion >= 2;
     this._webChannelSupportsGetExternalMarkers = webChannelVersion >= 3;
+    this._webChannelSupportsGetPageFavicons = webChannelVersion >= 4;
   }
 
   // Only called when we must obtain the profile from the browser, i.e. if we
@@ -181,6 +186,17 @@ class BrowserConnectionImpl implements BrowserConnection {
       'Cannot obtain a symbol table: have neither WebChannel nor a GeckoProfiler object'
     );
   }
+
+  async getPageFavicons(
+    pageUrls: Array<string>
+  ): Promise<Array<string | null>> {
+    // This is added in Firefox 133.
+    if (this._webChannelSupportsGetPageFavicons) {
+      return getPageFaviconsViaWebChannel(pageUrls);
+    }
+
+    return [];
+  }
 }
 
 // Should work with:

src/app-logic/web-channel.js

@@ -27,7 +27,8 @@ export type Request =
   | GetExternalMarkersRequest
   | GetExternalPowerTracksRequest
   | GetSymbolTableRequest
-  | QuerySymbolicationApiRequest;
+  | QuerySymbolicationApiRequest
+  | GetPageFaviconsRequest;
 
 type StatusQueryRequest = {| type: 'STATUS_QUERY' |};
 type EnableMenuButtonRequest = {| type: 'ENABLE_MENU_BUTTON' |};
@@ -52,6 +53,10 @@ type QuerySymbolicationApiRequest = {|
   path: string,
   requestJson: string,
 |};
+type GetPageFaviconsRequest = {|
+  type: 'GET_PAGE_FAVICONS',
+  pageUrls: Array<string>,
+|};
 
 export type MessageFromBrowser<R: ResponseFromBrowser> =
   | OutOfBandErrorMessageFromBrowser
@@ -82,7 +87,8 @@ export type ResponseFromBrowser =
   | GetExternalMarkersResponse
   | GetExternalPowerTracksResponse
   | GetSymbolTableResponse
-  | QuerySymbolicationApiResponse;
+  | QuerySymbolicationApiResponse
+  | GetPageFaviconsResponse;
 
 type StatusQueryResponse = {|
   menuButtonIsEnabled: boolean,
@@ -114,6 +120,7 @@ type GetExternalMarkersResponse = ExternalMarkersData;
 type GetExternalPowerTracksResponse = MixedObject[];
 type GetSymbolTableResponse = SymbolTableAsTuple;
 type QuerySymbolicationApiResponse = string;
+type GetPageFaviconsResponse = Array<string | null>;
 
 // Manually declare all pairs of request + response for Flow.
 /* eslint-disable no-redeclare */
@@ -138,6 +145,9 @@ declare function _sendMessageWithResponse(
 declare function _sendMessageWithResponse(
   QuerySymbolicationApiRequest
 ): Promise<QuerySymbolicationApiResponse>;
+declare function _sendMessageWithResponse(
+  GetPageFaviconsRequest
+): Promise<GetPageFaviconsResponse>;
 /* eslint-enable no-redeclare */
 
 /**
@@ -226,6 +236,15 @@ export async function querySymbolicationApiViaWebChannel(
   });
 }
 
+export async function getPageFaviconsViaWebChannel(
+  pageUrls: Array<string>
+): Promise<GetPageFaviconsResponse> {
+  return _sendMessageWithResponse({
+    type: 'GET_PAGE_FAVICONS',
+    pageUrls,
+  });
+}
+
 /**
  * -----------------------------------------------------------------------------
  *

src/components/app/ProfileFilterNavigator.js

@@ -106,8 +106,7 @@ class ProfileFilterNavigatorBarImpl extends React.PureComponent<Props> {
       // profile or when the page information is empty. This could happen for
       // older profiles and profiles from external importers that don't have
       // this information.
-      // eslint-disable-next-line no-constant-condition
-      if (false && pageDataByTabID && pageDataByTabID.size > 0) {
+      if (pageDataByTabID && pageDataByTabID.size > 0) {
         const pageData =
           tabFilter !== null ? pageDataByTabID.get(tabFilter) : null;
 

src/components/app/ProfileViewer.js

@@ -38,7 +38,7 @@ import { BackgroundImageStyleDef } from 'firefox-profiler/components/shared/Styl
 import classNames from 'classnames';
 import { DebugWarning } from 'firefox-profiler/components/app/DebugWarning';
 
-import type { CssPixels, IconWithClassName } from 'firefox-profiler/types';
+import type { CssPixels, IconsWithClassNames } from 'firefox-profiler/types';
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
 
 import './ProfileViewer.css';
@@ -50,7 +50,7 @@ type StateProps = {|
   +isUploading: boolean,
   +isHidingStaleProfile: boolean,
   +hasSanitizedProfile: boolean,
-  +icons: IconWithClassName[],
+  +icons: IconsWithClassNames,
   +isBottomBoxOpen: boolean,
 |};
 
@@ -83,7 +83,7 @@ class ProfileViewerImpl extends PureComponent<Props> {
           profileViewerWrapperBackground: hasSanitizedProfile,
         })}
       >
-        {icons.map(({ className, icon }) => (
+        {[...icons].map(([icon, className]) => (
           <BackgroundImageStyleDef
             className={className}
             url={icon}

src/components/shared/TabSelectorMenu.css

@@ -17,3 +17,7 @@
   /* Move the checkmark to inline-start instead of right, as it's logically better. */
   inset-inline: 8px 0;
 }
+
+.tabSelectorMenuItem .nodeIcon {
+  margin-inline-end: 10px;
+}

src/components/shared/TabSelectorMenu.js

@@ -13,6 +13,7 @@ import explicitConnect from 'firefox-profiler/utils/connect';
 import { changeTabFilter } from 'firefox-profiler/actions/receive-profile';
 import { getTabFilter } from '../../selectors/url-state';
 import { getProfileFilterSortedPageData } from 'firefox-profiler/selectors/profile';
+import { Icon } from 'firefox-profiler/components/shared/Icon';
 
 import type { TabID, SortedTabPageData } from 'firefox-profiler/types';
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
@@ -41,6 +42,10 @@ class TabSelectorMenuImpl extends React.PureComponent<Props> {
       return null;
     }
 
+    const hasSomeIcons = sortedPageData.some(
+      ({ pageData }) => !!pageData.favicon
+    );
+
     return (
       <>
         <MenuItem
@@ -71,6 +76,7 @@ class TabSelectorMenuImpl extends React.PureComponent<Props> {
               'aria-checked': tabFilter === tabID ? 'false' : 'true',
             }}
           >
+            {hasSomeIcons ? <Icon iconUrl={pageData.favicon} /> : null}
             {pageData.hostname}
           </MenuItem>
         ))}

src/profile-logic/profile-data.js

@@ -2963,7 +2963,8 @@ export function extractProfileFilterPageData(
     }
 
     // The last page is the one we care about.
-    const pageUrl = topMostPages[topMostPages.length - 1].url;
+    const currentPage = topMostPages[topMostPages.length - 1];
+    const pageUrl = currentPage.url;
     if (pageUrl.startsWith('about:')) {
       // If we only have an `about:*` page, we should return early with a friendly
       // origin and hostname. Otherwise the try block will always fail.
@@ -2986,7 +2987,7 @@ export function extractProfileFilterPageData(
     const pageData: ProfileFilterPageData = {
       origin: '',
       hostname: '',
-      favicon: null,
+      favicon: currentPage.favicon ?? null,
     };
 
     try {
@@ -3005,15 +3006,8 @@ export function extractProfileFilterPageData(
             ) ?? '')
           : page.hostname;
 
-      // FIXME(Bug 1620546): This is not ideal and we should get the favicon
-      // either during profile capture or profile pre-process.
       pageData.origin = page.origin;
-      const favicon = new URL('/favicon.ico', page.origin);
-      if (favicon.protocol === 'http:') {
-        // Upgrade http requests.
-        favicon.protocol = 'https:';
-      }
-      pageData.favicon = favicon.href;
+      pageData.favicon = currentPage.favicon ?? null;
     } catch (e) {
       console.warn(
         'Error while extracing the hostname and favicon from the page url',

src/profile-logic/sanitize.js

@@ -120,6 +120,8 @@ export function sanitizePII(
       pages = pages.map((page, pageIndex) => ({
         ...page,
         url: removeURLs(page.url, `<Page #${pageIndex}>`),
+        // Remove the favicon data as it could reveal the url.
+        favicon: null,
       }));
     }
   }

src/reducers/icons.js

@@ -5,10 +5,10 @@
 // @flow
 import type { Reducer } from 'firefox-profiler/types';
 
-const favicons: Reducer<Set<string>> = (state = new Set(), action) => {
+const favicons: Reducer<Map<string, string>> = (state = new Map(), action) => {
   switch (action.type) {
     case 'ICON_HAS_LOADED':
-      return new Set([...state, action.icon]);
+      return new Map([...state.entries(), action.iconWithClassName]);
     case 'ICON_IN_ERROR': // nothing to do
     default:
       return state;

src/reducers/profile-view.js

@@ -72,6 +72,16 @@ const profile: Reducer<Profile | null> = (state = null, action) => {
         },
       };
     }
+    case 'UPDATE_PAGES': {
+      if (state === null) {
+        throw new Error(
+          `Assumed that a profile would be loaded by the time for the pages update`
+        );
+      }
+
+      const { newPages } = action;
+      return { ...state, pages: newPages };
+    }
     default:
       return state;
   }