chore: use SVG icons for web apps (#26564)

Signed-off-by: Max Schmitt <[email protected]>
microsoft · Aug 21, 2023 · 2f6148b · 2f6148b
1 parent fbe3ef9
commit 2f6148b
Show file tree

Hide file tree

Showing 23 changed files with 38 additions and 90 deletions.
diff --git a/packages/recorder/index.html b/packages/recorder/index.html
@@ -18,9 +18,7 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png">
-    <link rel="manifest" href="/manifest.webmanifest">
+    <link rel="icon" href="/playwright-logo.svg" type="image/svg+xml">
     <title>Playwright Inspector</title>
   </head>
   <body>

diff --git a/packages/recorder/public/icon-16x16.png b/packages/recorder/public/icon-16x16.png
diff --git a/packages/recorder/public/icon-192x192.png b/packages/recorder/public/icon-192x192.png
diff --git a/packages/recorder/public/icon-256x256.png b/packages/recorder/public/icon-256x256.png
diff --git a/packages/recorder/public/icon-32x32.png b/packages/recorder/public/icon-32x32.png
diff --git a/packages/recorder/public/icon-384x384.png b/packages/recorder/public/icon-384x384.png
diff --git a/packages/recorder/public/icon-512x512.png b/packages/recorder/public/icon-512x512.png
diff --git a/packages/recorder/public/manifest.webmanifest b/packages/recorder/public/manifest.webmanifest
diff --git a/packages/recorder/public/playwright-logo.svg b/packages/recorder/public/playwright-logo.svg
diff --git a/packages/trace-viewer/index.html b/packages/trace-viewer/index.html
@@ -18,8 +18,7 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png">
+    <link rel="icon" href="/playwright-logo.svg" type="image/svg+xml">
     <link rel="manifest" href="/manifest.webmanifest">
     <title>Playwright Trace Viewer</title>
   </head>

diff --git a/packages/trace-viewer/public/icon-16x16.png b/packages/trace-viewer/public/icon-16x16.png
diff --git a/packages/trace-viewer/public/icon-192x192.png b/packages/trace-viewer/public/icon-192x192.png
diff --git a/packages/trace-viewer/public/icon-256x256.png b/packages/trace-viewer/public/icon-256x256.png
diff --git a/packages/trace-viewer/public/icon-32x32.png b/packages/trace-viewer/public/icon-32x32.png
diff --git a/packages/trace-viewer/public/icon-384x384.png b/packages/trace-viewer/public/icon-384x384.png
diff --git a/packages/trace-viewer/public/icon-512x512.png b/packages/trace-viewer/public/icon-512x512.png
diff --git a/packages/trace-viewer/public/manifest.webmanifest b/packages/trace-viewer/public/manifest.webmanifest
@@ -1,30 +1,16 @@
 {
     "theme_color": "#000",
     "background_color": "#fff",
-    "display": "browser",
+    "display": "standalone",
     "start_url": "index.html",
     "name": "Playwright Trace Viewer",
     "short_name": "Trace Viewer",
     "icons": [
         {
-            "src": "icon-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "icon-256x256.png",
-            "sizes": "256x256",
-            "type": "image/png"
-        },
-        {
-            "src": "icon-384x384.png",
-            "sizes": "384x384",
-            "type": "image/png"
-        },
-        {
-            "src": "icon-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
+            "src": "playwright-logo.svg",
+            "sizes": "48x48 72x72 96x96 128x128 150x150 256x256 512x512 1024x1024",
+            "type": "image/svg+xml",
+            "purpose": "any"
         }
     ]
 }
diff --git a/packages/trace-viewer/public/playwright-logo.svg b/packages/trace-viewer/public/playwright-logo.svg
diff --git a/packages/trace-viewer/public/uiMode.webmanifest b/packages/trace-viewer/public/uiMode.webmanifest
diff --git a/packages/trace-viewer/src/ui/uiModeView.tsx b/packages/trace-viewer/src/ui/uiModeView.tsx
@@ -188,7 +188,7 @@ export const UIModeView: React.FC<{}> = ({
       </div>
       <div className='vbox ui-mode-sidebar'>
         <Toolbar noShadow={true} noMinHeight={true}>
-          <img src='icon-32x32.png' />
+          <img src='playwright-logo.svg' />
           <div className='section-title'>Playwright</div>
           <ToolbarButton icon='color-mode' title='Toggle color mode' onClick={() => toggleTheme()} />
           <ToolbarButton icon='refresh' title='Reload' onClick={() => reloadTests()} disabled={isRunningTest || isLoading}></ToolbarButton>

diff --git a/packages/trace-viewer/src/ui/workbenchLoader.css b/packages/trace-viewer/src/ui/workbenchLoader.css
@@ -98,8 +98,15 @@ body.dark-mode .drop-target {
 }
 
 .workbench-loader .logo {
-  font-size: 20px;
   margin-left: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.workbench-loader .logo img {
+  height: 32px;
+  width: 32px;
+  pointer-events: none;
 }
 
 .workbench-loader .product {

diff --git a/packages/trace-viewer/src/ui/workbenchLoader.tsx b/packages/trace-viewer/src/ui/workbenchLoader.tsx
@@ -139,7 +139,9 @@ export const WorkbenchLoader: React.FunctionComponent<{
 
   return <div className='vbox workbench-loader' onDragOver={event => { event.preventDefault(); setDragOver(true); }}>
     <div className='hbox header'>
-      <div className='logo'>🎭</div>
+      <div className='logo'>
+        <img src='playwright-logo.svg' />
+      </div>
       <div className='product'>Playwright</div>
       {model.title && <div className='title'>{model.title}</div>}
       <div className='spacer'></div>

diff --git a/packages/trace-viewer/uiMode.html b/packages/trace-viewer/uiMode.html
@@ -18,9 +18,7 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png">
-    <link rel="manifest" href="/uiMode.webmanifest">
+    <link rel="icon" href="/playwright-logo.svg" type="image/svg+xml">
     <title>Playwright Test</title>
   </head>
   <body>