Skip to content

Commit 0fb6cbe

Browse files
vishnuv688vishnuv688
committed
Metadata tab UI changes
1 parent a56118d commit 0fb6cbe

File tree

2 files changed

+87
-23
lines changed

2 files changed

+87
-23
lines changed

‎packages/app/src/components/workbench.ts‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import './workbench/console.js'
1717
import './workbench/metadata.js'
1818
import './browser/snapshot.js'
1919

20-
const MIN_WORKBENCH_HEIGHT = 600
20+
const MIN_WORKBENCH_HEIGHT = Math.min(300, window.innerHeight * 0.3)
2121
const MIN_METATAB_WIDTH = 260
2222
const RERENDER_TIMEOUT = 10
2323

@@ -88,15 +88,26 @@ export class DevtoolsWorkbench extends Element {
8888
render() {
8989
const heightWorkbench = this.#toolbarCollapsed ? 'h-full' : 'h-[70%]'
9090
const styleWorkbench = this.#toolbarCollapsed ? '' : this.#dragVertical.getPosition()
91+
const sidebarStyle = !this.#workbenchSidebarCollapsed
92+
? (() => {
93+
const pos = this.#dragHorizontal.getPosition() // e.g. "flex-basis: 300px;"
94+
const m = pos.match(/flex-basis:\s*([\d.]+)px/)
95+
const w = m ? m[1] : '260'
96+
// Keep drag-resize (flex-basis) but stop auto-expansion
97+
return `${pos}; flex:0 0 auto; min-width:${w}px; max-width:${w}px;`
98+
})()
99+
: ''
91100
return html`
92101
<section data-horizontal-resizer-window class="flex w-full ${heightWorkbench} flex-1" style="${styleWorkbench}">
93-
<section style="${!this.#workbenchSidebarCollapsed ? this.#dragHorizontal.getPosition() : ''}">
102+
<section data-sidebar class="flex-none" style="${sidebarStyle}">
94103
<wdio-devtools-tabs cacheId="activeActionsTab" class="h-full flex flex-col border-r-[1px] border-r-panelBorder ${this.#workbenchSidebarCollapsed ? 'hidden' : ''}">
95104
<wdio-devtools-tab label="Actions">
96105
<wdio-devtools-actions></wdio-devtools-actions>
97106
</wdio-devtools-tab>
98107
<wdio-devtools-tab label="Metadata">
99-
<wdio-devtools-metadata></wdio-devtools-metadata>
108+
<div class="pl-[3px]">
109+
<wdio-devtools-metadata></wdio-devtools-metadata>
110+
</div>
100111
</wdio-devtools-tab>
101112
<nav class="ml-auto" slot="actions">
102113
<button @click="${() => this.#toggle('workbenchSidebar')}" class="flex h-10 w-10 items-center justify-center pointer ml-auto hover:bg-toolbarHoverBackground">

‎packages/app/src/components/workbench/list.ts‎

Lines changed: 73 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Element } from '@core/element'
2-
import { html } from 'lit'
2+
import { html, css } from 'lit'
33
import { customElement, property } from 'lit/decorators.js'
44

55
import '~icons/mdi/chevron-right.js'
@@ -16,12 +16,56 @@ export class DevtoolsList extends Element {
1616
@property({ type: Object })
1717
list: Record<string, any> | string[] = {}
1818

19-
#renderMetadataProp(prop: any) {
20-
if (typeof prop === 'object') {
21-
return html`<pre class="w-[100px]">${JSON.stringify(prop, null, 2)}</pre>`
19+
static styles = [...Element.styles, css`
20+
:host {
21+
display:block;
22+
width:100%;
23+
}
24+
dl {
25+
width:100%;
26+
}
27+
dt {
28+
font-weight:600;
29+
font-size:11px;
30+
letter-spacing:.5px;
31+
text-transform:uppercase;
32+
opacity:.75;
33+
white-space:nowrap;
34+
overflow:hidden;
35+
text-overflow:ellipsis;
36+
}
37+
pre {
38+
margin:0;
39+
font-family: var(--vscode-editor-font-family, monospace);
40+
font-size:11px;
41+
line-height:1.25;
42+
white-space:pre-wrap;
43+
word-break:break-word;
44+
overflow-wrap:anywhere;
45+
background: var(--vscode-editorInlayHint-background, transparent);
46+
padding:2px 4px;
47+
border-radius:3px;
48+
max-height:16rem;
49+
overflow:auto;
50+
}
51+
.row {
52+
transition: max-height .18s ease;
53+
box-sizing:border-box;
54+
}
55+
.collapse {
56+
max-height:0 !important;
57+
overflow:hidden !important;
58+
padding-top:0 !important;
59+
padding-bottom:0 !important;
60+
border-bottom-width:0 !important;
2261
}
62+
`]
2363

24-
return html`<span class="break-all">${prop}</span>`
64+
#renderMetadataProp(prop: any) {
65+
if (typeof prop === 'object' && prop !== null) {
66+
return html`<pre>${JSON.stringify(prop, null, 2)}</pre>`
67+
}
68+
return html`<span class="break-words whitespace-pre-wrap">${String(prop)}</span>`
2569
}
2670

2771
#toggleCollapseState () {
@@ -52,28 +96,37 @@ export class DevtoolsList extends Element {
5296
return html`
5397
<section class="block">
5498
${this.#renderSectionHeader(this.label)}
55-
<dl class="flex flex-wrap transition-all ${this.isCollapsed ? 'mt-0' : 'mt-2'}">
99+
<dl class="flex flex-wrap ${this.isCollapsed ? '' : 'mt-2'}">
56100
${entries.map((entry, i) => {
57-
let className = 'basis-2/4 transition-all border-b-panelBorder overflow-y-hidden'
58-
className += this.isCollapsed ? ' max-h-0' : ' max-h-[500px]'
59-
60-
const [key, val] = entry as [string, any]
61-
if (i === (entries.length - 1)) {
62-
className += this.isCollapsed ? ' pb-0' : ' pb-2'
63-
if (!this.isCollapsed) {
64-
className += ' border-b-[1px]'
65-
}
66-
}
101+
const isStringEntry = typeof entry === 'string'
102+
const key = isStringEntry ? undefined : (entry as [string, any])[0]
103+
const val = isStringEntry ? entry : (entry as [string, any])[1]
104+
105+
const stringForMeasure = typeof val === 'object' && val !== null
106+
? JSON.stringify(val, null, 2)
107+
: String(val)
108+
109+
const isMultiline = /\n/.test(stringForMeasure) || stringForMeasure.length > 40 || typeof val === 'object'
110+
const baseCls = 'row px-2 py-1 border-b-[1px] border-b-panelBorder'
111+
const colCls = isMultiline ? 'basis-full w-full' : 'basis-1/2'
112+
const lastBorderFix = i === entries.length - 1 ? '' : ''
113+
const collapsedCls = this.isCollapsed ? 'collapse' : 'max-h-[500px]'
67114
68-
if (typeof entry === 'string') {
115+
if (isStringEntry) {
69116
return html`
70-
<dd class="${className} basis-full px-2">${this.#renderMetadataProp(entry)}</dd>
117+
<dd class="${baseCls} ${colCls} ${collapsedCls} ${lastBorderFix}">
118+
${this.#renderMetadataProp(val)}
119+
</dd>
71120
`
72121
}
73122
74123
return html`
75-
<dt class="${className} font-bold px-2">${key}</dt>
76-
<dd class="${className}">${this.#renderMetadataProp(val)}</dd>
124+
<dt class="${baseCls} ${colCls} ${collapsedCls} ${lastBorderFix}">
125+
${key}
126+
</dt>
127+
<dd class="${baseCls} ${colCls} ${collapsedCls} ${lastBorderFix}">
128+
${this.#renderMetadataProp(val)}
129+
</dd>
77130
`
78131
})}
79132
</dl>

0 commit comments

Comments
 (0)