maxandClaude Opus 5
3e8ece8ed7
The panel guessed that any capitalised identifier was a type, so `Profiler.Frames.Count` came out as three type-coloured names where the editor shows a class and two members. The semantic overlay already fetches per-file tokens, so feed the same data to the webview. - codeSpans() returns the server's token spans per referenced line in the row's own trimmed coordinates; rows carry them and the webview colours from them, mapping token type names to its palette. Fields, properties, events and methods share the member colour, as they do in the stock themes. - The regex tokenizer stays as the fallback for servers that serve no semantic tokens, and coloredReferences.semanticTokens now gates both views rather than just the editor. Colours are still the approximated Dark+/Light+ palette — a webview is not given the theme's token colours — so only the editor view can be theme-exact. The README says so instead of promising this would fix it. Two things the new tests establish, both assumptions the code was already making: all files in a result share the origin's legend, so decoding tokens from every file against one legend is sound; and all 237 relocated tokens in the Profiler search report the same type name as their source token. Also relaxes an over-specific assertion: DotRush calls Profiler.Frames a field, not a property. Either way it is a member, which is what matters. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
348 lines
7.3 KiB
CSS
348 lines
7.3 KiB
CSS
/* Colored References — webview results panel */
|
|
|
|
:root {
|
|
--row-height: 22px;
|
|
--header-height: 24px;
|
|
--grid: var(--cr-grid, 36% 18% 48px 56px 14% 20%);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
color: var(--vscode-foreground);
|
|
background: var(--vscode-editor-background);
|
|
font-family: var(--vscode-font-family);
|
|
font-size: var(--vscode-font-size);
|
|
}
|
|
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
/* --- toolbar ------------------------------------------------------------ */
|
|
|
|
#toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
border-bottom: 1px solid var(--vscode-panel-border, transparent);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
#summary {
|
|
color: var(--vscode-descriptionForeground);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#summary b {
|
|
color: var(--vscode-foreground);
|
|
}
|
|
|
|
#filter {
|
|
width: 200px;
|
|
padding: 2px 6px;
|
|
color: var(--vscode-input-foreground);
|
|
background: var(--vscode-input-background);
|
|
border: 1px solid var(--vscode-input-border, transparent);
|
|
border-radius: 2px;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
#filter:focus {
|
|
outline: 1px solid var(--vscode-focusBorder);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
#filter::placeholder {
|
|
color: var(--vscode-input-placeholderForeground);
|
|
}
|
|
|
|
.toolbar-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
color: var(--vscode-button-secondaryForeground, var(--vscode-foreground));
|
|
background: var(--vscode-button-secondaryBackground, transparent);
|
|
border: 1px solid var(--vscode-contrastBorder, transparent);
|
|
border-radius: 2px;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.toolbar-button:hover {
|
|
background: var(--vscode-button-secondaryHoverBackground, var(--vscode-toolbar-hoverBackground));
|
|
}
|
|
|
|
.toolbar-button[aria-pressed='true'] {
|
|
color: var(--vscode-button-foreground);
|
|
background: var(--vscode-button-background);
|
|
}
|
|
|
|
.toolbar-button:focus-visible {
|
|
outline: 1px solid var(--vscode-focusBorder);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
/* --- table -------------------------------------------------------------- */
|
|
|
|
#head {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 3;
|
|
display: grid;
|
|
grid-template-columns: var(--grid);
|
|
height: var(--header-height);
|
|
background: var(--vscode-keybindingTable-headerBackground, var(--vscode-editor-background));
|
|
border-bottom: 1px solid var(--vscode-panel-border, var(--vscode-editorWidget-border));
|
|
user-select: none;
|
|
}
|
|
|
|
#head .th {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 0 8px;
|
|
overflow: hidden;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#head .th:hover {
|
|
background: var(--vscode-toolbar-hoverBackground);
|
|
}
|
|
|
|
#head .th .label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#head .th .arrow {
|
|
flex: 0 0 auto;
|
|
opacity: 0;
|
|
font-size: 9px;
|
|
}
|
|
|
|
#head .th[data-sorted] .arrow {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
#head .th:focus-visible {
|
|
outline: 1px solid var(--vscode-focusBorder);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
/* Column resize grip: sits on the right edge of every header cell. */
|
|
#head .grip {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -3px;
|
|
width: 7px;
|
|
height: 100%;
|
|
cursor: col-resize;
|
|
z-index: 2;
|
|
}
|
|
|
|
#head .grip:hover,
|
|
body.resizing #head .grip {
|
|
background: var(--vscode-sash-hoverBorder);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
body.resizing {
|
|
cursor: col-resize;
|
|
user-select: none;
|
|
}
|
|
|
|
#table {
|
|
flex: 1 1 auto;
|
|
overflow: auto;
|
|
}
|
|
|
|
#body {
|
|
outline: none;
|
|
}
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: var(--grid);
|
|
height: var(--row-height);
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.row:hover {
|
|
background: var(--vscode-list-hoverBackground);
|
|
}
|
|
|
|
.row.selected {
|
|
color: var(--vscode-list-inactiveSelectionForeground);
|
|
background: var(--vscode-list-inactiveSelectionBackground);
|
|
}
|
|
|
|
#body:focus-within .row.selected,
|
|
#body:focus .row.selected {
|
|
color: var(--vscode-list-activeSelectionForeground);
|
|
background: var(--vscode-list-activeSelectionBackground);
|
|
}
|
|
|
|
.row .td {
|
|
padding: 0 8px;
|
|
overflow: hidden;
|
|
white-space: pre;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.td.code {
|
|
font-family: var(--vscode-editor-font-family);
|
|
font-size: var(--vscode-editor-font-size);
|
|
color: var(--cr-fg-default);
|
|
}
|
|
|
|
.td.line {
|
|
text-align: right;
|
|
color: var(--vscode-editorLineNumber-foreground);
|
|
font-family: var(--vscode-editor-font-family);
|
|
}
|
|
|
|
.td.file,
|
|
.td.project,
|
|
.td.member {
|
|
color: var(--vscode-descriptionForeground);
|
|
}
|
|
|
|
.td.file .name {
|
|
color: var(--vscode-foreground);
|
|
}
|
|
|
|
/* --- group headers ------------------------------------------------------ */
|
|
|
|
.group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: var(--row-height);
|
|
padding: 0 8px;
|
|
font-weight: 600;
|
|
background: var(--vscode-sideBarSectionHeader-background);
|
|
border-top: 1px solid var(--vscode-sideBarSectionHeader-border, transparent);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.group .twisty {
|
|
flex: 0 0 auto;
|
|
width: 10px;
|
|
text-align: center;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.group .count,
|
|
.group .project {
|
|
font-weight: normal;
|
|
color: var(--vscode-descriptionForeground);
|
|
}
|
|
|
|
|
|
/* --- code tokens -------------------------------------------------------- */
|
|
|
|
.tok-comment { color: var(--cr-comment); font-style: italic; }
|
|
.tok-string { color: var(--cr-string); }
|
|
.tok-keyword { color: var(--cr-keyword); }
|
|
.tok-control { color: var(--cr-control); }
|
|
.tok-number { color: var(--cr-number); }
|
|
.tok-type { color: var(--cr-type); }
|
|
.tok-call { color: var(--cr-call); }
|
|
.tok-punct { color: var(--cr-fg-default); }
|
|
.tok-variable{ color: var(--cr-variable); }
|
|
|
|
.hit {
|
|
background: var(--vscode-editor-findMatchHighlightBackground);
|
|
border: 1px solid var(--vscode-editor-findMatchHighlightBorder, transparent);
|
|
border-radius: 2px;
|
|
margin: 0 -1px;
|
|
}
|
|
|
|
|
|
/* --- empty state -------------------------------------------------------- */
|
|
|
|
#empty {
|
|
padding: 16px;
|
|
color: var(--vscode-descriptionForeground);
|
|
}
|
|
|
|
#empty[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* --- read / write ------------------------------------------------------- */
|
|
|
|
.segmented {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.segmented .segment {
|
|
border-radius: 0;
|
|
border-right-width: 0;
|
|
}
|
|
|
|
.segmented .segment:first-child {
|
|
border-radius: 2px 0 0 2px;
|
|
}
|
|
|
|
.segmented .segment:last-child {
|
|
border-radius: 0 2px 2px 0;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.td.kind {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.kind-badge {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
padding: 0 5px;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
font-size: 0.9em;
|
|
line-height: 1.5;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.kind-read {
|
|
color: var(--vscode-descriptionForeground);
|
|
background: var(--vscode-badge-background);
|
|
}
|
|
|
|
.kind-write {
|
|
color: var(--vscode-inputValidation-warningForeground, var(--vscode-foreground));
|
|
background: var(--vscode-inputValidation-warningBackground);
|
|
border-color: var(--vscode-inputValidation-warningBorder, transparent);
|
|
}
|