chore: prep devtools app

package.json

@@ -62,7 +62,6 @@
     "@modelcontextprotocol/sdk": "^1.26.0",
     "@octokit/graphql-schema": "^15.26.0",
     "@stylistic/eslint-plugin": "^5.2.3",
-    "@trayjs/trayjs": "^0.0.9",
     "@types/codemirror": "^5.60.7",
     "@types/formidable": "^2.0.4",
     "@types/mdast": "^4.0.4",

packages/devtools/src/common.css

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:root {
+  --bg: #202124;
+  --bg-elevated: #35363a;
+  --bg-card: #292b2e;
+  --bg-tab: #292b2e;
+  --fg: #e8eaed;
+  --fg-dim: #9aa0a6;
+  --fg-muted: #5f6368;
+  --accent: #8ab4f8;
+  --ok: #81c995;
+  --err: #f28b82;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+
+#root {
+  height: 100%;
+}
+
+button {
+  background: none;
+  border: none;
+  color: var(--fg-dim);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+button:hover {
+  color: var(--fg);
+}

packages/devtools/src/devtools.css

@@ -14,69 +14,44 @@
  * limitations under the License.
  */
 
-:root {
-  --bg: #202124;
-  --bg-elevated: #35363a;
-  --bg-tab: #292b2e;
-  --fg: #e8eaed;
-  --fg-dim: #9aa0a6;
-  --fg-muted: #5f6368;
-  --accent: #8ab4f8;
-  --ok: #81c995;
-  --err: #f28b82;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  background: var(--bg);
-  color: var(--fg);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+.devtools-view {
   display: flex;
   flex-direction: column;
+  height: 100%;
   overflow: hidden;
 }
 
-#root {
+/* -- Tab bar -- */
+.tabbar {
   display: flex;
-  flex-direction: column;
-  height: 100%;
+  align-items: flex-end;
+  height: 38px;
+  min-height: 38px;
+  padding: 0 10px 0 12px;
+  user-select: none;
 }
 
-button {
-  background: none;
-  border: none;
-  color: var(--fg-dim);
-  cursor: pointer;
+.tabbar-back {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  width: 28px;
+  height: 34px;
+  align-self: flex-end;
+  color: var(--fg-dim);
+  text-decoration: none;
+  border-radius: 8px;
+  margin-right: 4px;
 }
 
-button:hover {
+.tabbar-back:hover {
+  background: var(--bg-elevated);
   color: var(--fg);
 }
 
-/* -- Tab bar -- */
-.tabbar {
-  display: flex;
-  align-items: flex-end;
-  height: 38px;
-  min-height: 38px;
-  padding: 0 10px 0 12px;
-  user-select: none;
+.tabbar-back svg {
+  width: 16px;
+  height: 16px;
 }
 
 .tabbar-brand span {

packages/devtools/src/devtools.tsx

@@ -16,6 +16,7 @@
 
 import React from 'react';
 import './devtools.css';
+import { navigate } from './index';
 import { DevToolsTransport } from './transport';
 
 type TabInfo = { id: string; title: string; url: string };
@@ -30,7 +31,7 @@ function tabFavicon(url: string): string {
   }
 }
 
-export const DevTools: React.FC = () => {
+export const DevTools: React.FC<{ wsUrl: string }> = ({ wsUrl }) => {
   const [status, setStatus] = React.useState<{ text: string; cls: string }>({ text: 'Connecting', cls: '' });
   const [tabs, setTabs] = React.useState<TabInfo[]>([]);
   const [selectedPageId, setSelectedPageId] = React.useState<string | undefined>();
@@ -54,9 +55,7 @@ export const DevTools: React.FC = () => {
   }, [captured]);
 
   React.useEffect(() => {
-    const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const guid = new URLSearchParams(location.search).get('ws');
-    const transport = new DevToolsTransport(wsProtocol + '//' + location.host + '/' + guid);
+    const transport = new DevToolsTransport(wsUrl);
     transportRef.current = transport;
 
     transport.onopen = () => setStatus({ text: 'Connected', cls: 'connected' });
@@ -84,7 +83,7 @@ export const DevTools: React.FC = () => {
     transport.onclose = () => setStatus({ text: 'Disconnected', cls: 'error' });
 
     return () => transport.close();
-  }, []);
+  }, [wsUrl]);
 
   function resizeToFit() {
     const { width: vw, height: vh } = viewportSizeRef.current;
@@ -209,12 +208,14 @@ export const DevTools: React.FC = () => {
 
   const hasPages = !!selectedPageId;
 
-  return (<>
+  return (<div className='devtools-view'>
     {/* Tab bar */}
     <div className='tabbar'>
-      <div className='tabbar-brand'>
-        <span>Playwright</span>
-      </div>
+      <a className='tabbar-back' href='#' title='Back to sessions' onClick={e => { e.preventDefault(); navigate('#'); }}>
+        <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'>
+          <polyline points='15 18 9 12 15 6'/>
+        </svg>
+      </a>
       <div id='tabstrip' className='tabstrip' role='tablist'>
         {tabs.map(tab => (
           <div
@@ -311,5 +312,5 @@ export const DevTools: React.FC = () => {
       </div>
       <div id='no-pages' className={'no-pages' + (!hasPages ? ' visible' : '')}>No tabs open</div>
     </div>
-  </>);
+  </div>);
 };