[pull] main from microsoft:main

packages/html-reporter/src/headerView.tsx

@@ -48,8 +48,7 @@ export const GlobalFilterView: React.FC<{
   filterText: string,
   setFilterText: (filterText: string) => void,
 }> = ({ stats, filterText, setFilterText }) => {
-  const searchParams = useSearchParams();
-  const query = searchParams.get('q');
+  const query = useSearchParams().get('q');
   React.useEffect(() => {
     // Add an extra space such that users can easily add to query
     setFilterText(query ? `${query.trim()} ` : '');
@@ -89,7 +88,7 @@ export const GlobalFilterView: React.FC<{
 const StatsNavView: React.FC<{
   stats: Stats
 }> = ({ stats }) => {
-  const searchParams = useSearchParams();
+  const isSpeedboard = useSearchParams().has('speedboard');
 
   return <nav>
     <Link className='subnav-item' href='#?'>
@@ -100,7 +99,7 @@ const StatsNavView: React.FC<{
     <NavLink token='failed' count={stats.unexpected} />
     <NavLink token='flaky' count={stats.flaky} />
     <NavLink token='skipped' count={stats.skipped} />
-    <Link className='subnav-item' href='#?speedboard' title='Speedboard' aria-selected={searchParams.has('speedboard')}>
+    <Link className='subnav-item' href='#?speedboard' title='Speedboard' aria-selected={isSpeedboard}>
       {icons.clock()}
     </Link>
     <SettingsButton />
@@ -111,7 +110,7 @@ const NavLink: React.FC<{
   token: string,
   count: number,
 }> = ({ token, count }) => {
-  const searchParams = useSearchParams();
+  const searchParams = new URLSearchParams(useSearchParams());
   searchParams.delete('speedboard');
   searchParams.delete('testId');
 

packages/html-reporter/src/labels.tsx

@@ -58,11 +58,12 @@ const LabelsClickView: React.FC<{
   const searchParams = useSearchParams();
 
   const onClickHandle = React.useCallback((e: React.MouseEvent, label: string) => {
+    const params = new URLSearchParams(searchParams);
     e.preventDefault();
-    if (searchParams.has('testId'))
-      searchParams.delete('speedboard');
-    searchParams.delete('testId');
-    navigate(filterWithQuery(searchParams, label, e.metaKey || e.ctrlKey));
+    if (params.has('testId'))
+      params.delete('speedboard');
+    params.delete('testId');
+    navigate(filterWithQuery(params, label, e.metaKey || e.ctrlKey));
   }, [searchParams]);
 
   return <>

packages/html-reporter/src/links.css

@@ -30,6 +30,14 @@
   top: 5px;
 }
 
+.attachment-flash {
+  animation: attachmentflash-bg 2s;
+}
+@keyframes attachmentflash-bg {
+  from { background: var(--color-attention-subtle); }
+  to   { background: transparent; }
+}
+
 .link-badge {
   flex: none;
   background-color: transparent;

packages/html-reporter/src/links.tsx

@@ -37,8 +37,7 @@ export const Route: React.FunctionComponent<{
   predicate: (params: URLSearchParams) => boolean,
   children: any
 }> = ({ predicate, children }) => {
-  const searchParams = useSearchParams();
-  return predicate(searchParams) ? children : null;
+  return predicate(useSearchParams()) ? children : null;
 };
 
 type LinkProps = React.PropsWithChildren<{
@@ -64,7 +63,7 @@ export const ProjectLink: React.FunctionComponent<{
   projectNames: string[],
   projectName: string,
 }> = ({  projectNames, projectName }) => {
-  const searchParams = useSearchParams();
+  const searchParams = new URLSearchParams(useSearchParams());
   if (searchParams.has('testId'))
     searchParams.delete('speedboard');
   searchParams.delete('testId');
@@ -111,7 +110,7 @@ export const AttachmentLink: React.FunctionComponent<{
     return (
       <div
         style={{ lineHeight: '32px', whiteSpace: 'nowrap', paddingLeft: 4 }}
-        className={clsx(flash && 'flash')}
+        className={clsx(flash && 'attachment-flash')}
       >
         <span style={{ visibility: 'hidden' }}>{icons.rightArrow()}</span>
         {summaryContent}
@@ -122,7 +121,7 @@ export const AttachmentLink: React.FunctionComponent<{
   return (
     <Expandable
       style={{ lineHeight: '32px' }}
-      className={clsx(flash && 'flash')}
+      className={clsx(flash && 'attachment-flash')}
       summary={summaryContent}
     >
       <div className='attachment-body'>
@@ -155,8 +154,9 @@ export const TraceLink: React.FC<{ test: TestCaseSummary, trailingSeparator?: bo
 
 const SearchParamsContext = React.createContext<URLSearchParams>(new URLSearchParams(window.location.hash.slice(1)));
 
-export function useSearchParams() {
-  return new URLSearchParams(React.useContext(SearchParamsContext));
+// Note: make sure you are not mutating the returned URLSearchParams object.
+export function useSearchParams(): URLSearchParams {
+  return React.useContext(SearchParamsContext);
 }
 
 export const SearchParamsProvider: React.FunctionComponent<React.PropsWithChildren> = ({ children }) => {
@@ -198,8 +198,7 @@ export function useAnchor(id: AnchorID, onReveal: React.EffectCallback) {
 }
 
 export function useIsAnchored(id: AnchorID) {
-  const searchParams = useSearchParams();
-  const anchor = searchParams.get('anchor');
+  const anchor = useSearchParams().get('anchor');
   if (anchor === null)
     return false;
   if (typeof id === 'undefined')

packages/html-reporter/src/metadataView.tsx

@@ -57,9 +57,8 @@ export const MetadataView: React.FC<{ metadata: Metadata }> = params => {
 };
 
 const InnerMetadataView: React.FC<{ metadata: Metadata }> = params => {
-  const searchParams = useSearchParams();
   const commitInfo = params.metadata as MetadataWithCommitInfo;
-  const otherEntries = searchParams.has('show-metadata-other') ? Object.entries(params.metadata).filter(([key]) => !ignoreKeys.has(key)) : [];
+  const otherEntries = useSearchParams().has('show-metadata-other') ? Object.entries(params.metadata).filter(([key]) => !ignoreKeys.has(key)) : [];
   const hasMetadata = commitInfo.ci || commitInfo.gitCommit || otherEntries.length > 0;
   if (!hasMetadata)
     return;

packages/html-reporter/src/reportView.tsx

@@ -90,35 +90,36 @@ export const ReportView: React.FC<{
       if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey)
         return;
 
+      const params = new URLSearchParams(searchParams);
       switch (event.key) {
         case 'a':
           event.preventDefault();
           navigate('#?');
           break;
         case 'p':
           event.preventDefault();
-          searchParams.delete('testId');
-          searchParams.delete('speedboard');
-          navigate(filterWithQuery(searchParams, 's:passed', false));
+          params.delete('testId');
+          params.delete('speedboard');
+          navigate(filterWithQuery(params, 's:passed', false));
           break;
         case 'f':
           event.preventDefault();
-          searchParams.delete('testId');
-          searchParams.delete('speedboard');
-          navigate(filterWithQuery(searchParams, 's:failed', false));
+          params.delete('testId');
+          params.delete('speedboard');
+          navigate(filterWithQuery(params, 's:failed', false));
           break;
         case 'ArrowLeft':
           if (prev) {
             event.preventDefault();
-            searchParams.delete('testId');
-            navigate(testResultHref({ test: prev }, searchParams) + filterParam);
+            params.delete('testId');
+            navigate(testResultHref({ test: prev }, params) + filterParam);
           }
           break;
         case 'ArrowRight':
           if (next) {
             event.preventDefault();
-            searchParams.delete('testId');
-            navigate(testResultHref({ test: next }, searchParams) + filterParam);
+            params.delete('testId');
+            navigate(testResultHref({ test: next }, params) + filterParam);
           }
           break;
       }
@@ -165,9 +166,8 @@ const TestCaseViewLoader: React.FC<{
   prev?: TestCaseSummary,
   testIdToFileIdMap: Map<string, string>,
 }> = ({ report, testIdToFileIdMap, next, prev, testId }) => {
-  const searchParams = useSearchParams();
   const [test, setTest] = React.useState<TestCase | 'loading' | 'not-found'>('loading');
-  const run = +(searchParams.get('run') || '0');
+  const run = +(useSearchParams().get('run') || '0');
 
   React.useEffect(() => {
     (async () => {

packages/playwright-core/browsers.json

@@ -17,16 +17,16 @@
     },
     {
       "name": "chromium-tip-of-tree",
-      "revision": "1392",
+      "revision": "1401",
       "installByDefault": false,
-      "browserVersion": "144.0.7559.20",
+      "browserVersion": "146.0.7644.0",
       "title": "Chrome Canary for Testing"
     },
     {
       "name": "chromium-tip-of-tree-headless-shell",
-      "revision": "1392",
+      "revision": "1401",
       "installByDefault": false,
-      "browserVersion": "144.0.7559.20",
+      "browserVersion": "146.0.7644.0",
       "title": "Chrome Canary Headless Shell"
     },
     {

packages/trace-viewer/src/ui/uiModeTraceView.tsx

@@ -46,7 +46,7 @@ export const TraceView: React.FC<{
       clearTimeout(pollTimer.current);
 
     const result = item.testCase?.results[0];
-    if (!result) {
+    if (!result || item.treeItem?.status === 'scheduled') {
       setModel(undefined);
       return;
     }

tests/playwright-test/ui-mode-test-source.spec.ts

@@ -192,3 +192,22 @@ test('should load error (dupe tests) indicator on sources', async ({ runUITest }
         Error: duplicate test title "first", first declared in a.test.ts:3
   `);
 });
+
+test('should keep showing source when test is pending', async ({ runUITest }, testInfo) => {
+  const { page } = await runUITest({
+    'a.test.ts': `
+      import { test } from '@playwright/test';
+      test('zero', () => {});
+      test('first', async () => {
+        await new Promise(f => setTimeout(f, ${testInfo.timeout}));
+      });
+      test('second', () => {});
+    `,
+  });
+
+  await page.getByTitle('Run all').click();
+  await page.getByTestId('test-tree').getByText('second').click();
+  await expect(page.getByTestId('status-line')).toHaveText('Running 1/3 passed (33%)');
+  await expect(page.getByTestId('source-code').locator('.source-tab-file-name')).toHaveText('a.test.ts');
+  await expect(page.locator('.CodeMirror .source-line-running')).toHaveText(`7      test('second', () => {});`);
+});