report(flow): mock styles (#13220)

GoogleChrome · Oct 18, 2021 · b62ab13 · b62ab13
1 parent bbb2d67
commit b62ab13
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 55 deletions.
diff --git a/flow-report/assets/styles.css b/flow-report/assets/styles.css
@@ -7,6 +7,7 @@
 .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;
@@ -23,10 +24,12 @@
   --sidebar-selected-bg-color: #DDEEFF;
   --sidebar-summary-font-size: 14px;
   --sidebar-title-font-size: 16px;
-  --sidebar-max-width: 400px;
-  --summary-flow-step-label-font-size: 16px;
-  --summary-subtitle-font-size: 16px;
-  --summary-title-font-size: 32px;
+  --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;
   --summary-tooltip-box-shadow-color: rgba(0, 0, 0, 0.25);
   --topbar-button-font-size: 14px;
   --topbar-button-size: 45px;
@@ -114,10 +117,18 @@
 
 .Topbar__title {
   font-size: var(--topbar-title-font-size);
-  font-weight: bold;
+  font-weight: var(--bold-weight);
   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;
@@ -148,27 +159,27 @@
 .Sidebar {
   grid-area: sidebar;
   border-right: 1px solid var(--separator-color);
-  width: min-content;
-  max-width: var(--sidebar-max-width);
+  width: var(--sidebar-width);
   overflow-x: hidden;
   overflow-y: auto;
 }
 .Sidebar a {
-  color: var(--color-gray-800);
+  color: var(--color-gray-700);
   text-decoration: none;
 }
 
 .Sidebar--current {
   background-color: var(--sidebar-selected-bg-color);
   color: var(--color-blue-A700) !important;
+  font-weight: var(--bold-weight);
 }
 
 .SidebarHeader {
   margin: 26px var(--base-spacing);
 }
 .SidebarHeader__title {
   font-size: var(--sidebar-title-font-size);
-  font-weight: bold;
+  font-weight: var(--bold-weight);
   width: max-content;
 }
 .SidebarHeader__date {
@@ -180,6 +191,7 @@
   margin: var(--base-spacing);
   padding: var(--half-base-spacing);
   background-color: var(--color-gray-50);
+  color: var(--color-gray-700);
   border-radius: 3px;
 }
 
@@ -258,21 +270,23 @@
 }
 
 .SummaryHeader {
-  margin: calc(var(--base-spacing) * 3) 0px;
-  width: 100%;
+  margin: var(--summary-header-margin) 0px;
 }
 
 .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(--double-base-spacing);
+  margin-top: var(--base-spacing);
 }
 
 .SummarySectionHeader__content {
@@ -281,15 +295,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), 4fr) 1fr 1fr 1fr 1fr;
+  grid-template-columns: min-content min-content minmax(var(--min-text-width), max-content) 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;
 }
 
@@ -321,15 +335,18 @@
   grid-column: 2;
 }
 .SummaryFlowStep .FlowStepThumbnail {
-  margin: var(--base-spacing) var(--half-base-spacing);
+  margin: var(--half-base-spacing);
 }
 
 .FlowStepThumbnail {
   align-self: center;
   justify-self: center;
   object-fit: cover;
   object-position: top left;
-  border: 1px solid var(--color-gray);
+  border: 1px solid var(--color-gray-700);
+  border-radius: 3px;
+  padding: 2px;
+  box-sizing: content-box !important;
 }
 
 .SummaryFlowStep__label {
@@ -341,11 +358,13 @@
 }
 
 .SummaryFlowStep__mode {
-  color: var(--color-gray-700);
+  color: var(--color-blue-A700);
+  font-weight: var(--bold-weight);
 }
 
 .SummaryFlowStep__link {
-  font-size: var(--summary-flow-step-label-font-size);
+  font-size: var(--summary-flow-step-link-font-size);
+  line-height: 20px;
   color: var(--color-gray-800);
   text-decoration: underline;
   width: 100%;
@@ -354,7 +373,6 @@
 
 .SummaryCategory__content {
   position: relative;
-  margin: var(--half-base-spacing);
 }
 .SummaryCategory__content:hover,
 .SummaryCategory__content:focus-within {
@@ -381,12 +399,12 @@
 }
 
 .SummaryTooltip__title {
-  font-weight: bold;
+  font-weight: var(--bold-weight);
   margin-bottom: var(--half-base-spacing);
 }
 
 .SummaryTooltip__category {
-  font-weight: bold;
+  font-weight: var(--bold-weight);
   display: flex;
   margin-top: var(--half-base-spacing);
 }
@@ -407,7 +425,8 @@
 }
 
 .SummaryNavigationHeader {
-  font-size: var(--summary-flow-step-label-font-size);
+  font-size: var(--summary-navigation-header-font-size);
+  line-height: 16px;
   display: contents;
 }
 
@@ -530,6 +549,7 @@
 .Header__prev-title {
   grid-area: prev-title;
   text-align: left;
+  justify-self: start;
 }
 
 .Header__next-title {
@@ -544,16 +564,17 @@
   align-self: start;
   overflow-x: hidden;
   text-overflow: ellipsis;
-  width: 100%;
+  max-width: 100%;
 }
 
 .Header__current-title {
   grid-area: current-title;
   text-align: center;
   font-size: var(--header-current-title-font-size);
-  font-weight: bold;
+  font-weight: var(--bold-weight);
   overflow-x: hidden;
   text-overflow: ellipsis;
+  margin: 0px var(--half-base-spacing);
 }
 
 .Header__current-description {
@@ -583,7 +604,7 @@
   align-items: center;
 
   font-size: var(--dialog-title-font-size);
-  font-weight: bold;
+  font-weight: var(--bold-weight);
 
   margin-bottom: calc(var(--base-spacing) * 2);
 }
@@ -609,12 +630,12 @@
 
 .HelpDialogColumn__header-title {
   font-size: var(--category-summary-font-size);
-  font-weight: bold;
+  font-weight: var(--bold-weight);
 }
 
 .HelpDialogColumn__legend-label {
   color: var(--color-blue-A700);
-  font-weight: bold;
+  font-weight: var(--bold-weight);
 }
 
 .HelpDialogColumn ul {
@@ -623,7 +644,7 @@
 
 .HelpDialogColumn__use-cases p,
 .HelpDialogColumn__categories p {
-  font-weight: bold;
+  font-weight: var(--bold-weight);
   color: var(--color-gray-700);
 }
 

diff --git a/flow-report/src/common.tsx b/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 = 250;
+const ANIMATION_FRAME_DURATION_MS = 500;
 
 export const Separator: FunctionComponent = () => {
   return <div className="Separator" role="separator"></div>;

diff --git a/flow-report/src/icons.tsx b/flow-report/src/icons.tsx
@@ -122,3 +122,10 @@ 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>
+  );
+};
diff --git a/flow-report/src/summary/summary.tsx b/flow-report/src/summary/summary.tsx
@@ -14,7 +14,7 @@ import {SummaryCategory} from './category';
 import {useStringFormatter, useLocalizedStrings} from '../i18n/i18n';
 
 const DISPLAYED_CATEGORIES = ['performance', 'accessibility', 'best-practices', 'seo'];
-const THUMBNAIL_WIDTH = 50;
+const THUMBNAIL_WIDTH = 40;
 
 const SummaryNavigationHeader: FunctionComponent<{lhr: LH.Result}> = ({lhr}) => {
   const strings = useLocalizedStrings();

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

diff --git a/flow-report/src/wrappers/category-score.tsx b/flow-report/src/wrappers/category-score.tsx
@@ -23,9 +23,6 @@ export const CategoryScore: FunctionComponent<{
     // Category label is displayed in the navigation header.
     const label = el.querySelector('.lh-gauge__label,.lh-fraction__label');
     if (label) label.remove();
-    // Background is displayed in individual reports, but not on the summary page.
-    const bg = el.querySelector('.lh-fraction__background');
-    if (bg) bg.remove();
 
     if (ref.current) ref.current.append(el);
     return () => {

diff --git a/flow-report/test/common-test.tsx b/flow-report/test/common-test.tsx
@@ -82,7 +82,7 @@ describe('FlowStepThumbnail', () => {
 
     expect(thumbnail.src).toContain('frame1');
     await act(() => {
-      jest.advanceTimersByTime(251);
+      jest.advanceTimersByTime(501);
     });
     expect(thumbnail.src).toContain('frame2');
   });

diff --git a/flow-report/test/wrappers/category-score-test.tsx b/flow-report/test/wrappers/category-score-test.tsx
@@ -83,6 +83,5 @@ describe('CategoryScore', () => {
     expect(link.href).toEqual('file:///Users/example/report.html/#seo');
     expect(root.getByText('2/4')).toBeTruthy();
     expect(root.baseElement.querySelector('.lh-fraction__label')).toBeFalsy();
-    expect(root.baseElement.querySelector('.lh-fraction__background')).toBeFalsy();
   });
 });