diff --git a/src/vs/base/common/codicons.ts b/src/vs/base/common/codicons.ts index e73173e2d5e128..10f585db876357 100644 --- a/src/vs/base/common/codicons.ts +++ b/src/vs/base/common/codicons.ts @@ -49,6 +49,7 @@ export const codiconsDerived = { debugBreakpointPending: register('debug-breakpoint-pending', 0xebd9), chatImport: register('chat-import', 0xec86), chatExport: register('chat-export', 0xec87), + compare: register('compare', 0xecfa), } as const; diff --git a/src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerTabbedWidget.ts b/src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerTabbedWidget.ts index 1aef1df6455a0e..0b2983f9859009 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerTabbedWidget.ts +++ b/src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerTabbedWidget.ts @@ -772,7 +772,7 @@ export class TabbedModelPicker extends Disposable { // Grouped with Search at the end of the tab bar, away from the provider tabs. actions.push({ id: 'comparison', - icon: Codicon.trophy, + icon: Codicon.compare, tooltip: this._labelWithKeybinding(comparison.label, comparison.startCommandId), alignEnd: true, useManagedHover: true, diff --git a/src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerWidget.ts b/src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerWidget.ts index 54f54070ca3080..371c0a660a3327 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerWidget.ts +++ b/src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerWidget.ts @@ -904,7 +904,7 @@ export class ModelPickerWidget extends Disposable { const nameChildren: (HTMLElement | string)[] = []; const compact = this._compact?.get() ?? false; const minimal = this._minimal?.get() ?? false; - const modelIcon = comparisonSummary ? Codicon.trophy : shownModel + const modelIcon = comparisonSummary ? Codicon.compare : shownModel ? (this._delegate.getPresentationOptions().showModelIcon ? getCompactModelPickerIcon(shownModel) : shownModel.metadata.statusIcon ? getCompactCodicon(shownModel.metadata.statusIcon) : undefined) diff --git a/src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerActionItem.test.ts b/src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerActionItem.test.ts index 770166a289ca72..3193123928f869 100644 --- a/src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerActionItem.test.ts +++ b/src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerActionItem.test.ts @@ -318,7 +318,7 @@ suite('ModelPickerActionItem', () => { }); const label = () => ({ text: domNode.querySelector('.model-picker-name .chat-input-picker-label')?.textContent, - trophy: !!domNode.querySelector('.codicon-trophy'), + compare: !!domNode.querySelector('.codicon-compare'), ariaLabel: domNode.querySelector('.model-picker-name')?.getAttribute('aria-label'), }); const initial = label(); @@ -333,15 +333,15 @@ suite('ModelPickerActionItem', () => { const dismissed = label(); summary.set(undefined, undefined); assert.deepStrictEqual({ initial, duringSetup, committed, dismissed, reset: label() }, { - initial: { text: 'First', trophy: false, ariaLabel: 'Models, First' }, - duringSetup: { text: 'First', trophy: false, ariaLabel: 'Models, First' }, - committed: { text: undefined, trophy: true, ariaLabel: 'Models, 3 Attempts' }, - dismissed: { text: undefined, trophy: true, ariaLabel: 'Models, 3 Attempts' }, - reset: { text: 'First', trophy: false, ariaLabel: 'Models, First' }, + initial: { text: 'First', compare: false, ariaLabel: 'Models, First' }, + duringSetup: { text: 'First', compare: false, ariaLabel: 'Models, First' }, + committed: { text: undefined, compare: true, ariaLabel: 'Models, 3 Attempts' }, + dismissed: { text: undefined, compare: true, ariaLabel: 'Models, 3 Attempts' }, + reset: { text: 'First', compare: false, ariaLabel: 'Models, First' }, }); }); - test('composer uses one trophy and preserves variant names in its accessible label and hover', () => { + test('composer uses one compare icon and preserves variant names in its accessible label and hover', () => { const model = createModel('First'); const { domNode, getHoverContents } = renderPicker(model, { compact: true, @@ -355,13 +355,13 @@ suite('ModelPickerActionItem', () => { assert.deepStrictEqual({ label: domNode.querySelector('.chat-input-picker-label')?.textContent, - trophies: domNode.querySelectorAll('.model-picker-name > .codicon-trophy').length, + compareIcons: domNode.querySelectorAll('.model-picker-name > .codicon-compare').length, icons: domNode.querySelectorAll('.model-picker-name > .codicon').length, ariaLabel: domNode.querySelector('.model-picker-name')?.getAttribute('aria-label'), hover: getHoverContents(), }, { label: undefined, - trophies: 1, + compareIcons: 1, icons: 1, ariaLabel: 'Models, First, First Max', hover: 'Models • First, First Max', @@ -374,7 +374,7 @@ suite('ModelPickerActionItem', () => { { name: 'minimal', compact: false, minimal: true, showModelIcon: true }, { name: 'without model icons', compact: false, minimal: false, showModelIcon: false }, ]) { - test(`composer uses one trophy for a distinct-model comparison (${presentation.name})`, () => { + test(`composer uses one compare icon for a distinct-model comparison (${presentation.name})`, () => { const first = createModel('First'); const second = createModel('Second'); const { domNode } = renderPicker(first, { @@ -390,12 +390,12 @@ suite('ModelPickerActionItem', () => { }); assert.deepStrictEqual({ - trophies: domNode.querySelectorAll('.model-picker-name > .codicon-trophy').length, + compareIcons: domNode.querySelectorAll('.model-picker-name > .codicon-compare').length, icons: domNode.querySelectorAll('.model-picker-name > .codicon').length, label: domNode.querySelector('.chat-input-picker-label')?.textContent, ariaLabel: domNode.querySelector('.model-picker-name')?.getAttribute('aria-label'), }, { - trophies: 1, + compareIcons: 1, icons: 1, label: undefined, ariaLabel: 'Models, First, Second', diff --git a/src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerTabbedWidget.test.ts b/src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerTabbedWidget.test.ts index 19a93284cf2701..b9c36dbe11a89d 100644 --- a/src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerTabbedWidget.test.ts +++ b/src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerTabbedWidget.test.ts @@ -836,7 +836,7 @@ suite('TabbedModelPicker', () => { const { popup } = createPicker({ comparison }); assert.deepStrictEqual({ hint: !!popup.querySelector('.tabbed-action-list-footer'), - toggle: !!popup.querySelector('[aria-label="Compare Models"] .codicon-trophy'), + toggle: !!popup.querySelector('[aria-label="Compare Models"] .codicon-compare'), }, { hint: showHint === true, toggle: true }); }); } @@ -911,7 +911,7 @@ suite('TabbedModelPicker', () => { const toggle = element(popup, '[aria-label="Compare Models"]'); const style = dom.getWindow(toggle).getComputedStyle(toggle); return { - trophy: !!toggle.querySelector('.codicon-trophy'), pressed: toggle.getAttribute('aria-pressed'), + compare: !!toggle.querySelector('.codicon-compare'), pressed: toggle.getAttribute('aria-pressed'), background: style.backgroundColor, border: style.borderColor, width: toggle.offsetWidth, height: toggle.offsetHeight, }; @@ -933,9 +933,9 @@ suite('TabbedModelPicker', () => { initialToggle, activeToggle, inactiveToggle: toggleState(), }, { rows: initialModels, height: initialRows, - initialToggle: { trophy: true, pressed: 'false', background: 'rgba(0, 0, 0, 0)', border: 'rgba(0, 0, 0, 0)', width: 28, height: 28 }, - activeToggle: { trophy: true, pressed: 'true', background: 'rgb(10, 20, 30)', border: 'rgb(40, 50, 60)', width: 28, height: 28 }, - inactiveToggle: { trophy: true, pressed: 'false', background: 'rgba(0, 0, 0, 0)', border: 'rgba(0, 0, 0, 0)', width: 28, height: 28 }, + initialToggle: { compare: true, pressed: 'false', background: 'rgba(0, 0, 0, 0)', border: 'rgba(0, 0, 0, 0)', width: 28, height: 28 }, + activeToggle: { compare: true, pressed: 'true', background: 'rgb(10, 20, 30)', border: 'rgb(40, 50, 60)', width: 28, height: 28 }, + inactiveToggle: { compare: true, pressed: 'false', background: 'rgba(0, 0, 0, 0)', border: 'rgba(0, 0, 0, 0)', width: 28, height: 28 }, }); element(popup, '[aria-label="Compare Models"]').click(); element(popup, '.model-picker-comparison-done').click();