cherry-pick(#23166): chore: fix file view padding

Author: pavelfeldman

packages/html-reporter/src/chip.css

@@ -21,6 +21,7 @@
   background-color: var(--color-canvas-subtle);
   padding: 0 8px;
   border-bottom: none;
+  margin-top: 24px;
   font-weight: 600;
   line-height: 38px;
   white-space: nowrap;

packages/html-reporter/src/filter.ts

@@ -84,7 +84,7 @@ export class Filter {
         token.push(c);
         continue;
       }
-      if (c === ' ') {
+      if (c === ' ' || c === ':') {
         if (token.length) {
           result.push(token.join('').toLowerCase());
           token = [];
@@ -108,7 +108,7 @@ export class Filter {
       if (test.outcome === 'skipped')
         status = 'skipped';
       const searchValues: SearchValues = {
-        text: (status + ' ' + test.projectName + ' ' + test.path.join(' ') + ' ' + test.title).toLowerCase(),
+        text: (status + ' ' + test.projectName + ' ' + test.location.file + ' ' + test.location.line + ' ' + test.path.join(' ') + ' ' + test.title).toLowerCase(),
         project: test.projectName.toLowerCase(),
         status: status as any,
       };

packages/html-reporter/src/imageDiffView.spec.tsx

@@ -55,7 +55,7 @@ test('should switch to actual', async ({ mount }) => {
   for (let i = 0; i < imageCount; ++i) {
     const image = images.nth(i);
     const box = await image.boundingBox();
-    expect(box).toEqual({ x: 400, y: 124, width: 200, height: 200 });
+    expect(box).toEqual({ x: 400, y: 108, width: 200, height: 200 });
   }
 });
 
@@ -70,7 +70,7 @@ test('should switch to expected', async ({ mount }) => {
   for (let i = 0; i < imageCount; ++i) {
     const image = images.nth(i);
     const box = await image.boundingBox();
-    expect(box).toEqual({ x: 400, y: 124, width: 200, height: 200 });
+    expect(box).toEqual({ x: 400, y: 108, width: 200, height: 200 });
   }
 });
 
@@ -79,5 +79,5 @@ test('should show diff by default', async ({ mount }) => {
 
   const image = component.locator('img');
   const box = await image.boundingBox();
-  expect(box).toEqual({ x: 400, y: 124, width: 200, height: 200 });
+  expect(box).toEqual({ x: 400, y: 108, width: 200, height: 200 });
 });

packages/html-reporter/src/tabbedPane.css

@@ -33,7 +33,6 @@
   height: 48px;
   min-width: 70px;
   box-shadow: inset 0 -1px 0 var(--color-border-muted) !important;
-  margin-bottom: 16px;
 }
 
 .tabbed-pane-tab-strip:focus {

packages/html-reporter/src/testCaseView.css

@@ -46,7 +46,7 @@
 .test-case-duration {
   flex: none;
   align-items: center;
-  padding: 0 8px 24px;
+  padding: 0 8px 8px;
 }
 
 .test-case-path {

tests/playwright-test/reporter-html.spec.ts

@@ -1348,7 +1348,7 @@ test.describe('labels', () => {
     const result = await runInlineTest({
       'a.test.js': `
         const { expect, test } = require('@playwright/test');
-        const tags = ['@smoke:p1', '@issue[123]', '@issue#123', '@$$$', '@tl/dr'];
+        const tags = ['@smoke-p1', '@issue[123]', '@issue#123', '@$$$', '@tl/dr'];
 
         test.describe('Error Pages', () => {
           tags.forEach(tag => {
@@ -1364,7 +1364,7 @@ test.describe('labels', () => {
     expect(result.passed).toBe(5);
 
     await showReport();
-    const tags = ['smoke:p1', 'issue[123]', 'issue#123', '$$$', 'tl/dr'];
+    const tags = ['smoke-p1', 'issue[123]', 'issue#123', '$$$', 'tl/dr'];
     const searchInput = page.locator('.subnav-search-input');
 
     for (const tag of tags) {