lighthouse 8.6.0-dev.20211021 → 8.6.0

package/flow-report/assets/styles.css

@@ -7,7 +7,6 @@
 .flow-vars {
   --app-font-size: 12px;
   --base-spacing: 16px;
-  --bold-weight: 500;
   --category-summary-font-size: 18px;
   --double-base-spacing: calc(var(--base-spacing) * 2);
   --gather-mode-icon-size: 16px;
@@ -24,12 +23,10 @@
   --sidebar-selected-bg-color: #DDEEFF;
   --sidebar-summary-font-size: 14px;
   --sidebar-title-font-size: 16px;
-  --sidebar-width: 320px;
-  --summary-flow-step-link-font-size: 14px;
-  --summary-navigation-header-font-size: 12px;
-  --summary-header-margin: 52px;
-  --summary-subtitle-font-size: 12px;
-  --summary-title-font-size: 20px;
+  --sidebar-max-width: 400px;
+  --summary-flow-step-label-font-size: 16px;
+  --summary-subtitle-font-size: 16px;
+  --summary-title-font-size: 32px;
   --summary-tooltip-box-shadow-color: rgba(0, 0, 0, 0.25);
   --topbar-button-font-size: 14px;
   --topbar-button-size: 45px;
@@ -117,18 +114,10 @@
 
 .Topbar__title {
   font-size: var(--topbar-title-font-size);
-  font-weight: var(--bold-weight);
+  font-weight: bold;
   margin-right: var(--double-base-spacing);
 }
 
-.Topbar__help-label {
-  display: flex;
-  align-items: center;
-}
-.Topbar__help-label > :first-child {
-  margin-right: var(--half-base-spacing);
-}
-
 .Content {
   grid-area: content;
   overflow-y: auto;
@@ -159,19 +148,19 @@
 .Sidebar {
   grid-area: sidebar;
   border-right: 1px solid var(--separator-color);
-  width: var(--sidebar-width);
+  width: min-content;
+  max-width: var(--sidebar-max-width);
   overflow-x: hidden;
   overflow-y: auto;
 }
 .Sidebar a {
-  color: var(--color-gray-700);
+  color: var(--color-gray-800);
   text-decoration: none;
 }
 
 .Sidebar--current {
   background-color: var(--sidebar-selected-bg-color);
   color: var(--color-blue-A700) !important;
-  font-weight: var(--bold-weight);
 }
 
 .SidebarHeader {
@@ -179,7 +168,7 @@
 }
 .SidebarHeader__title {
   font-size: var(--sidebar-title-font-size);
-  font-weight: var(--bold-weight);
+  font-weight: bold;
   width: max-content;
 }
 .SidebarHeader__date {
@@ -191,7 +180,6 @@
   margin: var(--base-spacing);
   padding: var(--half-base-spacing);
   background-color: var(--color-gray-50);
-  color: var(--color-gray-700);
   border-radius: 3px;
 }
 
@@ -270,23 +258,21 @@
 }
 
 .SummaryHeader {
-  margin: var(--summary-header-margin) 0px;
+  margin: calc(var(--base-spacing) * 3) 0px;
+  width: 100%;
 }
 
 .SummaryHeader__title {
+  margin: var(--base-spacing) 0;
   font-size: var(--summary-title-font-size);
-  font-weight: var(--bold-weight);
-  line-height: 28px;
-  margin: 0 0 calc(0.25 * var(--base-spacing));
 }
 
 .SummaryHeader__subtitle {
   font-size: var(--summary-subtitle-font-size);
-  line-height: 16px;
 }
 
 .SummarySectionHeader {
-  margin-top: var(--base-spacing);
+  margin-top: var(--double-base-spacing);
 }
 
 .SummarySectionHeader__content {
@@ -295,15 +281,15 @@
 }
 
 .SummaryFlow {
+  width: 100%;
   display: grid;
-  max-width: var(--report-width);
   grid-auto-rows: min-content;
-  grid-template-columns: min-content min-content minmax(var(--min-text-width), max-content) 1fr 1fr 1fr 1fr;
+  grid-template-columns: min-content min-content minmax(var(--min-text-width), 4fr) 1fr 1fr 1fr 1fr;
   align-items: center;
   margin: var(--base-spacing) 0px;
-  --gauge-circle-size: 48px;
 }
 .SummaryFlow .lh-fraction__content {
+  padding: 0px;
   min-width: unset;
 }
 
@@ -335,7 +321,7 @@
   grid-column: 2;
 }
 .SummaryFlowStep .FlowStepThumbnail {
-  margin: var(--half-base-spacing);
+  margin: var(--base-spacing) var(--half-base-spacing);
 }
 
 .FlowStepThumbnail {
@@ -343,10 +329,7 @@
   justify-self: center;
   object-fit: cover;
   object-position: top left;
-  border: 1px solid var(--color-gray-700);
-  border-radius: 3px;
-  padding: 2px;
-  box-sizing: content-box !important;
+  border: 1px solid var(--color-gray);
 }
 
 .SummaryFlowStep__label {
@@ -358,13 +341,11 @@
 }
 
 .SummaryFlowStep__mode {
-  color: var(--color-blue-A700);
-  font-weight: var(--bold-weight);
+  color: var(--color-gray-700);
 }
 
 .SummaryFlowStep__link {
-  font-size: var(--summary-flow-step-link-font-size);
-  line-height: 20px;
+  font-size: var(--summary-flow-step-label-font-size);
   color: var(--color-gray-800);
   text-decoration: underline;
   width: 100%;
@@ -373,6 +354,7 @@
 
 .SummaryCategory__content {
   position: relative;
+  margin: var(--half-base-spacing);
 }
 .SummaryCategory__content:hover,
 .SummaryCategory__content:focus-within {
@@ -399,12 +381,12 @@
 }
 
 .SummaryTooltip__title {
-  font-weight: var(--bold-weight);
+  font-weight: bold;
   margin-bottom: var(--half-base-spacing);
 }
 
 .SummaryTooltip__category {
-  font-weight: var(--bold-weight);
+  font-weight: bold;
   display: flex;
   margin-top: var(--half-base-spacing);
 }
@@ -425,8 +407,7 @@
 }
 
 .SummaryNavigationHeader {
-  font-size: var(--summary-navigation-header-font-size);
-  line-height: 16px;
+  font-size: var(--summary-flow-step-label-font-size);
   display: contents;
 }
 
@@ -549,7 +530,6 @@
 .Header__prev-title {
   grid-area: prev-title;
   text-align: left;
-  justify-self: start;
 }
 
 .Header__next-title {
@@ -564,17 +544,16 @@
   align-self: start;
   overflow-x: hidden;
   text-overflow: ellipsis;
-  max-width: 100%;
+  width: 100%;
 }
 
 .Header__current-title {
   grid-area: current-title;
   text-align: center;
   font-size: var(--header-current-title-font-size);
-  font-weight: var(--bold-weight);
+  font-weight: bold;
   overflow-x: hidden;
   text-overflow: ellipsis;
-  margin: 0px var(--half-base-spacing);
 }
 
 .Header__current-description {
@@ -604,7 +583,7 @@
   align-items: center;
 
   font-size: var(--dialog-title-font-size);
-  font-weight: var(--bold-weight);
+  font-weight: bold;
 
   margin-bottom: calc(var(--base-spacing) * 2);
 }
@@ -630,12 +609,12 @@
 
 .HelpDialogColumn__header-title {
   font-size: var(--category-summary-font-size);
-  font-weight: var(--bold-weight);
+  font-weight: bold;
 }
 
 .HelpDialogColumn__legend-label {
   color: var(--color-blue-A700);
-  font-weight: var(--bold-weight);
+  font-weight: bold;
 }
 
 .HelpDialogColumn ul {
@@ -644,7 +623,7 @@
 
 .HelpDialogColumn__use-cases p,
 .HelpDialogColumn__categories p {
-  font-weight: var(--bold-weight);
+  font-weight: bold;
   color: var(--color-gray-700);
 }
 

package/flow-report/src/common.tsx

@@ -10,7 +10,7 @@ import {useEffect, useState} from 'preact/hooks';
 import {NavigationIcon, SnapshotIcon, TimespanIcon} from './icons';
 import {getFilmstripFrames, getScreenDimensions, getScreenshot} from './util';
 
-const ANIMATION_FRAME_DURATION_MS = 500;
+const ANIMATION_FRAME_DURATION_MS = 250;
 
 export const Separator: FunctionComponent = () => {
   return <div className="Separator" role="separator"></div>;

package/flow-report/src/header.tsx

@@ -8,7 +8,7 @@ import {FunctionComponent} from 'preact';
 
 import {Util} from '../../report/renderer/util';
 import {FlowStepIcon, FlowStepThumbnail} from './common';
-import {useLocalizedStrings} from './i18n/i18n';
+import {useUIStrings} from './i18n/i18n';
 import {getModeDescription, useFlowResult} from './util';
 
 const SIDE_THUMBNAIL_HEIGHT = 80;
@@ -39,7 +39,7 @@ export const Header: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
   const prevStep = flowResult.steps[index - 1];
   const nextStep = flowResult.steps[index + 1];
 
-  const strings = useLocalizedStrings();
+  const strings = useUIStrings();
   const modeDescription = getModeDescription(step.lhr.gatherMode, strings);
 
   return (

package/flow-report/src/help-dialog.tsx

@@ -6,7 +6,7 @@
 
 import {FunctionComponent, JSX} from 'preact';
 
-import {useLocalizedStrings} from './i18n/i18n';
+import {useUIStrings} from './i18n/i18n';
 import {CloseIcon, NavigationIcon, SnapshotIcon, TimespanIcon} from './icons';
 
 const HelpDialogColumn: FunctionComponent<{
@@ -18,7 +18,7 @@ const HelpDialogColumn: FunctionComponent<{
   useCases: string[];
   availableCategories: string[];
 }> = (props) => {
-  const strings = useLocalizedStrings();
+  const strings = useUIStrings();
 
   return (
     <div className="HelpDialogColumn">
@@ -56,7 +56,7 @@ const HelpDialogColumn: FunctionComponent<{
 export const HelpDialog: FunctionComponent<{onClose: () => void}> = ({
   onClose,
 }) => {
-  const strings = useLocalizedStrings();
+  const strings = useUIStrings();
 
   return (
     <div className="HelpDialog">

package/flow-report/src/i18n/i18n.tsx

@@ -7,69 +7,32 @@
 import {createContext, FunctionComponent} from 'preact';
 import {useContext, useMemo} from 'preact/hooks';
 
-import {formatMessage} from '../../../shared/localization/format';
 import {I18n} from '../../../report/renderer/i18n';
 import {UIStrings} from './ui-strings';
-import {useFlowResult} from '../util';
+import {useLocale} from '../util';
 import strings from './localized-strings';
-import {Util} from '../../../report/renderer/util';
 
-const I18nContext = createContext(new I18n('en-US', {...Util.UIStrings, ...UIStrings}));
-
-function useLhrLocale() {
-  const flowResult = useFlowResult();
-  const firstLhr = flowResult.steps[0].lhr;
-  const locale = firstLhr.configSettings.locale;
-
-  if (flowResult.steps.some(step => step.lhr.configSettings.locale !== locale)) {
-    console.warn('LHRs have inconsistent locales');
-  }
-
-  return {
-    locale,
-    lhrStrings: firstLhr.i18n.rendererFormattedStrings,
-  };
-}
+const I18nContext = createContext<I18n<typeof UIStrings>|undefined>(undefined);
 
 export function useI18n() {
-  return useContext(I18nContext);
+  const i18n = useContext(I18nContext);
+  if (!i18n) throw Error('i18n was not initialized');
+  return i18n;
 }
 
-export function useLocalizedStrings() {
+export function useUIStrings() {
   const i18n = useI18n();
   return i18n.strings;
 }
 
-export function useStringFormatter() {
-  const {locale} = useLhrLocale();
-  return (str: string, values?: Record<string, string|number>) => {
-    return formatMessage(str, values, locale);
-  };
-}
-
 export const I18nProvider: FunctionComponent = ({children}) => {
-  const {locale, lhrStrings} = useLhrLocale();
-
-  const i18n = useMemo(() => {
-    const i18n = new I18n(locale, {
-      // Set any missing lhr strings to default (english) values.
-      ...Util.UIStrings,
-      // Preload with strings from the first lhr.
-      // Used for legacy report components imported into the flow report.
-      ...lhrStrings,
-      // Set any missing flow strings to default (english) values.
-      ...UIStrings,
-      // `strings` is generated in build/build-report.js
-      ...strings[locale],
-    });
-
-    // Initialize renderer util i18n for strings rendered in wrapped components.
-    // TODO: Don't attach global i18n to `Util`.
-    // @ts-ignore TS reports as read-only.
-    Util.i18n = i18n;
-
-    return i18n;
-  }, [locale, lhrStrings]);
+  const locale = useLocale();
+  const i18n = useMemo(() => new I18n(locale, {
+    // Set missing renderer strings to default (english) values.
+    ...UIStrings,
+    // `strings` is generated in build/build-report.js
+    ...strings[locale],
+  }), [locale]);
 
   return (
     <I18nContext.Provider value={i18n}>

package/flow-report/src/i18n/ui-strings.js

@@ -57,30 +57,6 @@ export const UIStrings = {
   ratingFail: 'Poor',
   /** Rating indicating that a report category rating could not be calculated because of an error. */
   ratingError: 'Error',
-  /**
-   * @description Label indicating the number of Lighthouse reports that evaluate a web page as it loads.
-   * @example {2} numNavigation
-   */
-  navigationReportCount: `{numNavigation, plural,
-    =1 {{numNavigation} navigation report}
-    other {{numNavigation} navigation reports}
-  }`,
-  /**
-   * @description Label indicating the number of Lighthouse reports that evaluate a web page over a period of time.
-   * @example {2} numTimespan
-   */
-  timespanReportCount: `{numTimespan, plural,
-    =1 {{numTimespan} timespan report}
-    other {{numTimespan} timespan reports}
-  }`,
-  /**
-   * @description Label indicating the number of Lighthouse reports that evaluate a web page at a single point in time.
-   * @example {2} numSnapshot
-   */
-  snapshotReportCount: `{numSnapshot, plural,
-    =1 {{numSnapshot} snapshot report}
-    other {{numSnapshot} snapshot reports}
-  }`,
   /** Label for a button that saves a Lighthouse report to disk. */
   save: 'Save',
   /** Label for a button that toggles the help modal with explanations on how to interpret the Lighthouse flow report. */
@@ -107,28 +83,4 @@ export const UIStrings = {
   helpUseCaseSnapshot1: 'Find accessibility issues in single page applications or complex forms.',
   /** Example use case for how Lighthouse can be applied in practice. Appears in a list with other examples. */
   helpUseCaseSnapshot2: 'Evaluate best practices of menus and UI elements hidden behind interaction.',
-  /**
-   * @description Label indicating the number of Lighthouse audits that passed.
-   * @example {2} numPassed
-   */
-  passedAuditCount: `{numPassed, plural,
-    =1 {{numPassed} audit passed}
-    other {{numPassed} audits passed}
-  }`,
-  /**
-   * @description Label indicating the number of Lighthouse audits that are possible to pass for a page.
-   * @example {2} numPassableAudits
-   */
-  passableAuditCount: `{numPassableAudits, plural,
-    =1 {{numPassableAudits} passable audit}
-    other {{numPassableAudits} passable audits}
-  }`,
-  /**
-   * @description Label indicating the number of Lighthouse audits that are informative.
-   * @example {2} numInformative
-   */
-  informativeAuditCount: `{numInformative, plural,
-    =1 {{numInformative} informative audit}
-    other {{numInformative} informative audits}
-  }`,
 };

package/flow-report/src/icons.tsx

@@ -122,10 +122,3 @@ export const HamburgerIcon: FunctionComponent = () => {
   );
 };
 
-export const InfoIcon: FunctionComponent = () => {
-  return (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7ZM14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM7.66658 11H6.33325V9.66667H7.66658V11ZM4.33325 5.66667C4.33325 4.19333 5.52659 3 6.99992 3C8.47325 3 9.66658 4.19333 9.66658 5.66667C9.66658 6.52194 9.1399 6.98221 8.62709 7.43036C8.1406 7.85551 7.66658 8.26975 7.66658 9H6.33325C6.33325 7.78582 6.96133 7.30439 7.51355 6.88112C7.94674 6.54907 8.33325 6.25281 8.33325 5.66667C8.33325 4.93333 7.73325 4.33333 6.99992 4.33333C6.26658 4.33333 5.66658 4.93333 5.66658 5.66667H4.33325Z" fill="currentColor"/>
-    </svg>
-  );
-};

package/flow-report/src/sidebar/sidebar.tsx

@@ -7,14 +7,14 @@
 import {FunctionComponent} from 'preact';
 
 import {Separator} from '../common';
-import {useI18n, useLocalizedStrings} from '../i18n/i18n';
+import {useI18n, useUIStrings} from '../i18n/i18n';
 import {CpuIcon, EnvIcon, SummaryIcon} from '../icons';
 import {classNames, useCurrentLhr, useFlowResult} from '../util';
 import {SidebarFlow} from './flow';
 
 export const SidebarSummary: FunctionComponent = () => {
   const currentLhr = useCurrentLhr();
-  const strings = useLocalizedStrings();
+  const strings = useUIStrings();
 
   const url = new URL(location.href);
   url.hash = '#';
@@ -33,21 +33,19 @@ export const SidebarSummary: FunctionComponent = () => {
 };
 
 const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> = ({settings}) => {
-  const strings = useLocalizedStrings();
+  const strings = useUIStrings();
 
   return (
     <div className="SidebarRuntimeSettings">
-      <div className="SidebarRuntimeSettings__item" title={strings.runtimeSettingsDevice}>
+      <div className="SidebarRuntimeSettings__item">
         <div className="SidebarRuntimeSettings__item--icon">
           <EnvIcon/>
         </div>
         {
-          settings.formFactor === 'desktop' ?
-            strings.runtimeDesktopEmulation :
-            strings.runtimeMobileEmulation
+          settings.formFactor === 'desktop' ? strings.desktop : strings.mobile
         }
       </div>
-      <div className="SidebarRuntimeSettings__item" title={strings.runtimeSettingsCPUThrottling}>
+      <div className="SidebarRuntimeSettings__item">
         <div className="SidebarRuntimeSettings__item--icon">
           <CpuIcon/>
         </div>

package/flow-report/src/summary/category.tsx

@@ -9,7 +9,7 @@ import {FunctionComponent} from 'preact';
 import {Util} from '../../../report/renderer/util';
 import {Separator} from '../common';
 import {CategoryScore} from '../wrappers/category-score';
-import {useI18n, useStringFormatter, useLocalizedStrings} from '../i18n/i18n';
+import {useUIStrings} from '../i18n/i18n';
 
 import type {UIStringsType} from '../i18n/ui-strings';
 
@@ -34,8 +34,7 @@ export const SummaryTooltip: FunctionComponent<{
   category: LH.ReportResult.Category,
   gatherMode: LH.Result.GatherMode
 }> = ({category, gatherMode}) => {
-  const strings = useLocalizedStrings();
-  const str_ = useStringFormatter();
+  const strings = useUIStrings();
   const {
     numPassed,
     numPassableAudits,
@@ -43,12 +42,10 @@ export const SummaryTooltip: FunctionComponent<{
     totalWeight,
   } = Util.calculateCategoryFraction(category);
 
-  const i18n = useI18n();
   const displayAsFraction = Util.shouldDisplayAsFraction(gatherMode);
-  const score = displayAsFraction ?
-    numPassed / numPassableAudits :
-    category.score;
-  const rating = score === null ? 'error' : Util.calculateRating(score);
+  const rating = displayAsFraction ?
+    Util.calculateRating(numPassed / numPassableAudits) :
+    Util.calculateRating(category.score);
 
   return (
     <div className="SummaryTooltip">
@@ -63,23 +60,27 @@ export const SummaryTooltip: FunctionComponent<{
             <div className={`SummaryTooltip__rating SummaryTooltip__rating--${rating}`}>
               <span>{getCategoryRating(rating, strings)}</span>
               {
-                !displayAsFraction && category.score !== null && <>
+                !displayAsFraction && category.score && <>
                   <span> · </span>
-                  <span>{i18n.formatNumber(category.score * 100)}</span>
+                  <span>{category.score * 100}</span>
                 </>
               }
             </div>
         }
       </div>
       <div className="SummaryTooltip__fraction">
-        <span>{str_(strings.passedAuditCount, {numPassed})}</span>
-        <span> / </span>
-        <span>{str_(strings.passableAuditCount, {numPassableAudits})}</span>
+        {
+          // TODO(FLOW-I18N): Placeholder format.
+          `${numPassed} audits passed / ${numPassableAudits} passable audits`
+        }
       </div>
-      {numInformative !== 0 &&
-        <div className="SummaryTooltip__informative">
-          {str_(strings.informativeAuditCount, {numInformative})}
-        </div>
+      {
+        // TODO(FLOW-I18N): Placeholder format.
+        numInformative ?
+          <div className="SummaryTooltip__informative">
+            {`${numInformative} informative audits`}
+          </div> :
+          null
       }
     </div>
   );

package/flow-report/src/summary/summary.tsx

@@ -11,13 +11,13 @@ import {FlowSegment, FlowStepThumbnail, Separator} from '../common';
 import {getModeDescription, useFlowResult} from '../util';
 import {Util} from '../../../report/renderer/util';
 import {SummaryCategory} from './category';
-import {useStringFormatter, useLocalizedStrings} from '../i18n/i18n';
+import {useUIStrings} from '../i18n/i18n';
 
 const DISPLAYED_CATEGORIES = ['performance', 'accessibility', 'best-practices', 'seo'];
-const THUMBNAIL_WIDTH = 40;
+const THUMBNAIL_WIDTH = 50;
 
 const SummaryNavigationHeader: FunctionComponent<{lhr: LH.Result}> = ({lhr}) => {
-  const strings = useLocalizedStrings();
+  const strings = useUIStrings();
 
   return (
     <div className="SummaryNavigationHeader" data-testid="SummaryNavigationHeader">
@@ -50,7 +50,7 @@ export const SummaryFlowStep: FunctionComponent<{
   hashIndex: number,
 }> = ({lhr, label, hashIndex}) => {
   const reportResult = useMemo(() => Util.prepareReportResult(lhr), [lhr]);
-  const strings = useLocalizedStrings();
+  const strings = useUIStrings();
   const modeDescription = getModeDescription(lhr.gatherMode, strings);
 
   return (
@@ -107,8 +107,7 @@ const SummaryFlow: FunctionComponent = () => {
 
 export const SummaryHeader: FunctionComponent = () => {
   const flowResult = useFlowResult();
-  const strings = useLocalizedStrings();
-  const str_ = useStringFormatter();
+  const strings = useUIStrings();
 
   let numNavigation = 0;
   let numTimespan = 0;
@@ -127,10 +126,11 @@ export const SummaryHeader: FunctionComponent = () => {
     }
   }
 
+  // TODO(FLOW-I18N): Placeholder format.
   const subtitleCounts = [];
-  if (numNavigation) subtitleCounts.push(str_(strings.navigationReportCount, {numNavigation}));
-  if (numTimespan) subtitleCounts.push(str_(strings.timespanReportCount, {numTimespan}));
-  if (numSnapshot) subtitleCounts.push(str_(strings.snapshotReportCount, {numSnapshot}));
+  if (numNavigation) subtitleCounts.push(`${numNavigation} navigation reports`);
+  if (numTimespan) subtitleCounts.push(`${numTimespan} timespan reports`);
+  if (numSnapshot) subtitleCounts.push(`${numSnapshot} snapshot reports`);
   const subtitle = subtitleCounts.join(' · ');
 
   return (
@@ -151,7 +151,7 @@ const SummarySectionHeader: FunctionComponent = ({children}) => {
 };
 
 export const Summary: FunctionComponent = () => {
-  const strings = useLocalizedStrings();
+  const strings = useUIStrings();
 
   return (
     <div className="Summary" data-testid="Summary">

package/flow-report/src/topbar.tsx

@@ -9,8 +9,8 @@ import {useState} from 'preact/hooks';
 
 import {HelpDialog} from './help-dialog';
 import {getFilenamePrefix} from '../../report/generator/file-namer';
-import {useLocalizedStrings} from './i18n/i18n';
-import {HamburgerIcon, InfoIcon} from './icons';
+import {useUIStrings} from './i18n/i18n';
+import {HamburgerIcon} from './icons';
 import {useFlowResult} from './util';
 import {useReportRenderer} from './wrappers/report-renderer';
 
@@ -79,7 +79,7 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
 ({onMenuClick}) => {
   const flowResult = useFlowResult();
   const {dom} = useReportRenderer();
-  const strings = useLocalizedStrings();
+  const strings = useUIStrings();
   const [showHelpDialog, setShowHelpDialog] = useState(false);
 
   return (
@@ -98,12 +98,8 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
       <div style={{flexGrow: 1}} />
       <TopbarButton
         onClick={() => setShowHelpDialog(previous => !previous)}
-        label="Button that toggles the help dialog"
-      >
-        <div className="Topbar__help-label">
-          <InfoIcon/>
-          {strings.helpLabel}
-        </div>
+        label="Button that toggles the help dialog">
+        {strings.helpLabel}
       </TopbarButton>
       {showHelpDialog ?
         <HelpDialog onClose={() => setShowHelpDialog(false)} /> :