From 7ee48febf92816abe926d53f1be0a13c4b72c5ee Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Thu, 14 Oct 2021 17:54:33 -0800
Subject: [PATCH] chore: html report ui fixes (#9522)

---
 .../src/web/htmlReport/htmlReport.css         | 19 +++++++++------
 .../src/web/htmlReport/htmlReport.tsx         | 24 ++++++++-----------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/playwright-core/src/web/htmlReport/htmlReport.css b/packages/playwright-core/src/web/htmlReport/htmlReport.css
index 6110b7b940..1340a404de 100644
--- a/packages/playwright-core/src/web/htmlReport/htmlReport.css
+++ b/packages/playwright-core/src/web/htmlReport/htmlReport.css
@@ -28,6 +28,11 @@ body {
   overflow: auto;
   color: #616161;
   background-color: #f3f3f3;
+  border-left: 1px solid #dfe1e5;
+}
+
+.test-case-column {
+  border-right: 1px solid #dfe1e5;
 }
 
 .tree-item-title {
@@ -44,12 +49,7 @@ body {
 }
 
 .suite-tree-column .tree-item-title.selected {
-  background-color: #0060c0;
-  color: white;
-}
-
-.suite-tree-column .tree-item-title.selected * {
-  color: white !important;
+  font-weight: bold;
 }
 
 .error-message {
@@ -89,7 +89,7 @@ body {
   flex: auto;
   display: flex;
   flex-direction: column;
-  max-width: 600px;
+  padding: 0 16px;
   overflow: auto;
 }
 
@@ -212,3 +212,8 @@ video, img {
   min-width: 80%;
   min-height: 300px;
 }
+
+.columns {
+  max-width: 1280px;
+  margin: 0 auto;
+}
diff --git a/packages/playwright-core/src/web/htmlReport/htmlReport.tsx b/packages/playwright-core/src/web/htmlReport/htmlReport.tsx
index 4dd6d02ef8..c835e14710 100644
--- a/packages/playwright-core/src/web/htmlReport/htmlReport.tsx
+++ b/packages/playwright-core/src/web/htmlReport/htmlReport.tsx
@@ -23,7 +23,7 @@ import { TabbedPane } from '../traceViewer/ui/tabbedPane';
 import { msToString } from '../uiUtils';
 import type { ProjectTreeItem, SuiteTreeItem, TestCase, TestResult, TestStep, TestTreeItem, Location, TestFile, Stats, TestAttachment } from '@playwright/test/src/reporters/html';
 
-type Filter = 'Failing' | 'All';
+type Filter = 'failing' | 'all';
 
 type TestId = {
   fileId: string;
@@ -46,22 +46,18 @@ export const Report: React.FC = () => {
       }
     })();
   }, []);
-  const [filter, setFilter] = React.useState<Filter>('Failing');
+  const [filter, setFilter] = React.useState<Filter>('failing');
 
-  return <div className='hbox'>
+  return <div className='hbox columns'>
     <SplitView sidebarSize={300} orientation='horizontal' sidebarIsFirst={true}>
       <TestCaseView key={testId?.testId} testId={testId}></TestCaseView>
       <div className='suite-tree-column'>
-        <div className='tab-strip'>{
-          (['Failing', 'All'] as Filter[]).map(item => {
-            const selected = item === filter;
-            return <div key={item} className={'tab-element' + (selected ? ' selected' : '')} onClick={e => {
-              setFilter(item);
-            }}>{item}</div>;
-          })
-        }</div>
-        {!fetchError && filter === 'All' && report?.map((project, i) => <ProjectTreeItemView key={i} project={project} setTestId={setTestId} testId={testId} failingOnly={false}></ProjectTreeItemView>)}
-        {!fetchError && filter === 'Failing' && report?.map((project, i) => <ProjectTreeItemView key={i} project={project} setTestId={setTestId} testId={testId} failingOnly={true}></ProjectTreeItemView>)}
+        <div className='tab-strip'>
+          <div key='all' title='All tests' className={'tab-element' + ('all' === filter ? ' selected' : '')} onClick={() => setFilter('all')}>All</div>
+          <div key='failing' title='Failing tests' className={'tab-element' + ('failing' === filter ? ' selected' : '')} onClick={() => setFilter('failing')}>Failing</div>
+        </div>
+        {!fetchError && filter === 'all' && report?.map((project, i) => <ProjectTreeItemView key={i} project={project} setTestId={setTestId} testId={testId} failingOnly={false}></ProjectTreeItemView>)}
+        {!fetchError && filter === 'failing' && report?.map((project, i) => <ProjectTreeItemView key={i} project={project} setTestId={setTestId} testId={testId} failingOnly={true}></ProjectTreeItemView>)}
       </div>
     </SplitView>
   </div>;
@@ -92,7 +88,7 @@ const SuiteTreeItemView: React.FC<{
   depth: number,
 }> = ({ suite, testId, setTestId, failingOnly, depth }) => {
   return <TreeItem title={<div className='hbox'>
-    <div className='tree-text' title={suite.title}>{suite.title}</div>
+    <div className='tree-text' title={suite.title}>{suite.title || '<untitled>'}</div>
     <div style={{ flex: 'auto' }}></div>
     <StatsView stats={suite.stats}></StatsView>
   </div>