diff --git a/src/vs/base/browser/ui/actionbar/actionbar.css b/src/vs/base/browser/ui/actionbar/actionbar.css index 467b1ff..f3c5130 100644 --- a/src/vs/base/browser/ui/actionbar/actionbar.css +++ b/src/vs/base/browser/ui/actionbar/actionbar.css @@ -127 +127,72 @@ } + + + +/*** Generated for Custom Font Size ***/ + +.monaco-workbench .part.panel .monaco-action-bar .actions-container { + padding: 0 +} +.monaco-workbench .part.panel .monaco-action-bar .action-item .codicon { + width: calc(var(--vscode-workbench-bottompane-font-size) * 1.230769); + height: calc(var(--vscode-workbench-bottompane-font-size) * 1.230769) +} +.monaco-workbench .part.panel .monaco-action-bar .action-label, .monaco-workbench .part.panel .monaco-action-bar .action-item .keybinding { + font-size: calc(var(--vscode-workbench-bottompane-font-size) * 0.846154); + padding: calc(var(--vscode-workbench-bottompane-font-size) * 0.230769) +} +.monaco-workbench .part.panel .monaco-action-bar.vertical .action-item .action-label.separator { + padding-top: 1px; + margin: calc(var(--vscode-workbench-bottompane-font-size) * 0.307692) .8em +} +.monaco-workbench .part.panel .monaco-action-bar .action-item .action-label.separator { + width: 1px; + height: calc(var(--vscode-workbench-bottompane-font-size) * 1.230769); + margin: calc(var(--vscode-workbench-bottompane-font-size) * 0.384615) calc(var(--vscode-workbench-bottompane-font-size) * 0.307692); + min-width: 1px; + padding: 0 +} +.monaco-workbench .part.panel .secondary-actions .monaco-action-bar .action-label { + margin-left: calc(var(--vscode-workbench-bottompane-font-size) * 0.461538) +} +.monaco-workbench .part.panel .monaco-action-bar .action-item.select-container { + max-width: calc(var(--vscode-workbench-bottompane-font-size) * 13.076923); + min-width: calc(var(--vscode-workbench-bottompane-font-size) * 4.615385); + margin-right: calc(var(--vscode-workbench-bottompane-font-size) * 0.769231) +} +.monaco-workbench .part.panel .monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator > div { + width: 1px +} +.monaco-workbench .part.sidebar .monaco-action-bar .actions-container, .monaco-workbench .part.auxiliarybar .monaco-action-bar .actions-container { + padding: 0 +} +.monaco-workbench .part.sidebar .monaco-action-bar .action-item .codicon, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .codicon { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769) +} +.monaco-workbench .part.sidebar .monaco-action-bar .action-label, .monaco-workbench .part.sidebar .monaco-action-bar .action-item .keybinding, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .keybinding { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154); + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) +} +.monaco-workbench .part.sidebar .monaco-action-bar.vertical .action-item .action-label.separator, .monaco-workbench .part.auxiliarybar .monaco-action-bar.vertical .action-item .action-label.separator { + padding-top: 1px; + margin: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) .8em +} +.monaco-workbench .part.sidebar .monaco-action-bar .action-item .action-label.separator, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .action-label.separator { + width: 1px; + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + margin: calc(var(--vscode-workbench-sidebar-font-size) * 0.384615) calc(var(--vscode-workbench-sidebar-font-size) * 0.307692); + min-width: 1px; + padding: 0 +} +.monaco-workbench .part.sidebar .secondary-actions .monaco-action-bar .action-label, .monaco-workbench .part.auxiliarybar .secondary-actions .monaco-action-bar .action-label { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) +} +.monaco-workbench .part.sidebar .monaco-action-bar .action-item.select-container, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item.select-container { + max-width: calc(var(--vscode-workbench-sidebar-font-size) * 13.076923); + min-width: calc(var(--vscode-workbench-sidebar-font-size) * 4.615385); + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.769231) +} +.monaco-workbench .part.sidebar .monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator > div, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator > div { + width: 1px +} \ No newline at end of file diff --git a/src/vs/base/browser/ui/button/button.css b/src/vs/base/browser/ui/button/button.css index 8496f1b..964455a 100644 --- a/src/vs/base/browser/ui/button/button.css +++ b/src/vs/base/browser/ui/button/button.css @@ -183 +183,43 @@ } + + + +/*** Generated for Custom Font Size ***/ + +.monaco-workbench .part.sidebar .monaco-text-button, .monaco-workbench .part.auxiliarybar .monaco-text-button { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) calc(var(--vscode-workbench-sidebar-font-size) * 0.615385); + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077) +} +.monaco-workbench .part.sidebar .monaco-text-button.small, .monaco-workbench .part.auxiliarybar .monaco-text-button.small { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.076923); + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154); + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) +} +.monaco-workbench .part.sidebar .monaco-text-button:focus, .monaco-workbench .part.auxiliarybar .monaco-text-button:focus { + outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .monaco-text-button.monaco-text-button-with-short-label, .monaco-workbench .part.auxiliarybar .monaco-text-button.monaco-text-button-with-short-label { + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.307692); + height: calc(var(--vscode-workbench-sidebar-font-size) * 2.153846) +} +.monaco-workbench .part.sidebar .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label, .monaco-workbench .part.sidebar .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short, .monaco-workbench .part.auxiliarybar .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label, .monaco-workbench .part.auxiliarybar .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615); + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) 0 +} +.monaco-workbench .part.sidebar .monaco-button-dropdown > .monaco-button:focus, .monaco-workbench .part.auxiliarybar .monaco-button-dropdown > .monaco-button:focus { + outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923) +} +.monaco-workbench .part.sidebar .monaco-button-dropdown .monaco-button-dropdown-separator, .monaco-workbench .part.auxiliarybar .monaco-button-dropdown .monaco-button-dropdown-separator { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) 0 +} +.monaco-workbench .part.sidebar .monaco-button-dropdown .monaco-button-dropdown-separator > div, .monaco-workbench .part.auxiliarybar .monaco-button-dropdown .monaco-button-dropdown-separator > div { + width: 1px +} +.monaco-workbench .part.sidebar .monaco-description-button, .monaco-workbench .part.auxiliarybar .monaco-description-button { + margin: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) calc(var(--vscode-workbench-sidebar-font-size) * 0.384615) +} +.monaco-workbench .part.sidebar .monaco-description-button .monaco-button-description, .monaco-workbench .part.auxiliarybar .monaco-description-button .monaco-button-description { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154); + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) calc(var(--vscode-workbench-sidebar-font-size) * 1.538462) +} \ No newline at end of file diff --git a/src/vs/base/browser/ui/codicons/codicon/codicon.css b/src/vs/base/browser/ui/codicons/codicon/codicon.css index d7f257d..af55bdd 100644 --- a/src/vs/base/browser/ui/codicons/codicon/codicon.css +++ b/src/vs/base/browser/ui/codicons/codicon/codicon.css @@ -25 +25,7 @@ /* icon rules are dynamically created by the platform theme service (see iconsStyleSheet.ts) */ + + + +.monaco-workbench .part.sidebar .codicon[class*='codicon-'], .monaco-workbench .part.auxiliarybar .codicon[class*='codicon-'] { + font: normal normal normal calc(var(--vscode-workbench-sidebar-font-size) * 1.230769)/1 codicon +} \ No newline at end of file diff --git a/src/vs/base/browser/ui/iconLabel/iconlabel.css b/src/vs/base/browser/ui/iconLabel/iconlabel.css index d3dfd9a..cf59627 100644 --- a/src/vs/base/browser/ui/iconLabel/iconlabel.css +++ b/src/vs/base/browser/ui/iconLabel/iconlabel.css @@ -119 +119,21 @@ } + + + +.monaco-workbench .part.sidebar .monaco-icon-label::before, .monaco-workbench .part.auxiliarybar .monaco-icon-label::before { + background-size: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538); + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench .part.sidebar .monaco-icon-label-iconpath, .monaco-workbench .part.auxiliarybar .monaco-icon-label-iconpath { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308); + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) +} +.monaco-workbench .part.sidebar .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name > .label-separator, .monaco-workbench .part.auxiliarybar .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name > .label-separator { + margin: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .monaco-icon-label::after, .monaco-workbench .part.auxiliarybar .monaco-icon-label::after { + margin: auto calc(var(--vscode-workbench-sidebar-font-size) * 1.230769) 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.384615) +} \ No newline at end of file diff --git a/src/vs/base/browser/ui/inputbox/inputBox.css b/src/vs/base/browser/ui/inputbox/inputBox.css index 827a19f..de152ec 100644 --- a/src/vs/base/browser/ui/inputbox/inputBox.css +++ b/src/vs/base/browser/ui/inputbox/inputBox.css @@ -106 +106,28 @@ } + + + +/*** Generated for Custom Font Size ***/ + +.monaco-workbench .part.sidebar .monaco-inputbox, .monaco-workbench .part.auxiliarybar .monaco-inputbox { + padding: 0 +} +.monaco-workbench .part.sidebar .monaco-inputbox > .ibwrapper > .input, .monaco-workbench .part.sidebar .monaco-inputbox > .ibwrapper > .mirror, .monaco-workbench .part.auxiliarybar .monaco-inputbox > .ibwrapper > .input, .monaco-workbench .part.auxiliarybar .monaco-inputbox > .ibwrapper > .mirror { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) +} +.monaco-workbench .part.sidebar .monaco-inputbox-container .monaco-inputbox-message, .monaco-workbench .part.auxiliarybar .monaco-inputbox-container .monaco-inputbox-message { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077); + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.307692); + margin-top: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923) +} +.monaco-workbench .part.sidebar .monaco-inputbox .monaco-action-bar, .monaco-workbench .part.auxiliarybar .monaco-inputbox .monaco-action-bar { + right: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846); + top: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .monaco-inputbox .monaco-action-bar .action-item, .monaco-workbench .part.auxiliarybar .monaco-inputbox .monaco-action-bar .action-item { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .monaco-inputbox .monaco-action-bar .action-item .codicon, .monaco-workbench .part.auxiliarybar .monaco-inputbox .monaco-action-bar .action-item .codicon { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769) +} \ No newline at end of file diff --git a/src/vs/base/browser/ui/selectBox/selectBox.css b/src/vs/base/browser/ui/selectBox/selectBox.css index fd4d00e..92ddc99 100644 --- a/src/vs/base/browser/ui/selectBox/selectBox.css +++ b/src/vs/base/browser/ui/selectBox/selectBox.css @@ -35 +35,16 @@ } + + + +.monaco-workbench .part.sidebar .monaco-select-box-dropdown-container, .monaco-workbench .part.auxiliarybar .monaco-select-box-dropdown-container { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 1) +} +.monaco-workbench .part.sidebar .monaco-action-bar .action-item .monaco-select-box, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .monaco-select-box { + min-width: calc(var(--vscode-workbench-sidebar-font-size) * 7.692308); + min-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615); + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) calc(var(--vscode-workbench-sidebar-font-size) * 1.769231) calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench.mac .part.sidebar .monaco-action-bar .action-item .monaco-select-box, .monaco-workbench.mac .part.auxiliarybar .monaco-action-bar .action-item .monaco-select-box { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154); + min-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.846154) +} \ No newline at end of file diff --git a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts index f6c2ff1..a7da491 100644 --- a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts +++ b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts @@ -8,2 +8,3 @@ import * as arrays from '../../../common/arrays.js'; import { Emitter, Event } from '../../../common/event.js'; +import { FONT } from '../../../common/font.js'; import { KeyCode, KeyCodeUtils } from '../../../common/keyCodes.js'; @@ -164,3 +165,3 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi getHeight(): number { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/base/browser/ui/splitview/paneview.css b/src/vs/base/browser/ui/splitview/paneview.css index 7bb4282..92c027a 100644 --- a/src/vs/base/browser/ui/splitview/paneview.css +++ b/src/vs/base/browser/ui/splitview/paneview.css @@ -153 +153,38 @@ } + + + +.monaco-workbench .part.sidebar .monaco-pane-view .pane > .pane-header, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane > .pane-header { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308); + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane.horizontal:not(.expanded) > .pane-header, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane.horizontal:not(.expanded) > .pane-header { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane > .pane-header > .codicon:first-of-type, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane > .pane-header > .codicon:first-of-type { + margin: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane.horizontal:not(.expanded) > .pane-header > .codicon:first-of-type, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane.horizontal:not(.expanded) > .pane-header > .codicon:first-of-type { + margin: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane > .pane-header > .actions, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane > .pane-header > .actions { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane > .pane-header > .actions .action-item, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane > .pane-header > .actions .action-item { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane > .pane-header > .actions .action-label, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane > .pane-header > .actions .action-label { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane > .pane-header .action-item .monaco-select-box, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane > .pane-header .action-item .monaco-select-box { + min-width: calc(var(--vscode-workbench-sidebar-font-size) * 8.461538); + min-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615); + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) calc(var(--vscode-workbench-sidebar-font-size) * 1.769231) calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .linux .monaco-pane-view .pane > .pane-header .action-item .monaco-select-box, .monaco-workbench .part.sidebar .windows .monaco-pane-view .pane > .pane-header .action-item .monaco-select-box, .monaco-workbench .part.auxiliarybar .linux .monaco-pane-view .pane > .pane-header .action-item .monaco-select-box, .monaco-workbench .part.auxiliarybar .windows .monaco-pane-view .pane > .pane-header .action-item .monaco-select-box { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0) calc(var(--vscode-workbench-sidebar-font-size) * 1.769231) calc(var(--vscode-workbench-sidebar-font-size) * 0) calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar #monaco-pane-drop-overlay > .pane-overlay-indicator, .monaco-workbench .part.auxiliarybar #monaco-pane-drop-overlay > .pane-overlay-indicator { + min-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308); + min-width: calc(var(--vscode-workbench-sidebar-font-size) * 1.461538) +} \ No newline at end of file diff --git a/src/vs/base/browser/ui/splitview/paneview.ts b/src/vs/base/browser/ui/splitview/paneview.ts index fb2e1f4..3b1e23f 100644 --- a/src/vs/base/browser/ui/splitview/paneview.ts +++ b/src/vs/base/browser/ui/splitview/paneview.ts @@ -21,2 +21,3 @@ import { IView, Sizing, SplitView } from './splitview.js'; import { applyDragImage } from '../dnd/dnd.js'; +import { FONT } from '../../../common/font.js'; @@ -50,4 +51,2 @@ export abstract class Pane extends Disposable implements IView { - private static readonly HEADER_SIZE = 22; - readonly element: HTMLElement; @@ -121,3 +120,3 @@ export abstract class Pane extends Disposable implements IView { private get headerSize(): number { - return this.headerVisible ? Pane.HEADER_SIZE : 0; + return this.headerVisible ? FONT.sidebarSize22 : 0; } @@ -300,3 +299,3 @@ export abstract class Pane extends Disposable implements IView { layout(size: number): void { - const headerSize = this.headerVisible ? Pane.HEADER_SIZE : 0; + const headerSize = this.headerSize; diff --git a/src/vs/base/browser/ui/toggle/toggle.css b/src/vs/base/browser/ui/toggle/toggle.css index e2d206d..e69352c 100644 --- a/src/vs/base/browser/ui/toggle/toggle.css +++ b/src/vs/base/browser/ui/toggle/toggle.css @@ -69 +69,27 @@ } + + + +.monaco-workbench .part.sidebar .monaco-custom-toggle, .monaco-workbench .part.auxiliarybar .monaco-custom-toggle { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846); + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.538462); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.538462); + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) +} +.monaco-workbench .part.sidebar .monaco-custom-toggle.monaco-checkbox, .monaco-workbench .part.auxiliarybar .monaco-custom-toggle.monaco-checkbox { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615); + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615); + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.692308); + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0); + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0); + background-size: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769) +} +.monaco-workbench .part.sidebar .monaco-action-bar .checkbox-action-item, .monaco-workbench .part.auxiliarybar .monaco-action-bar .checkbox-action-item { + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .monaco-action-bar .checkbox-action-item > .monaco-custom-toggle.monaco-checkbox, .monaco-workbench .part.auxiliarybar .monaco-action-bar .checkbox-action-item > .monaco-custom-toggle.monaco-checkbox { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .monaco-action-bar .checkbox-action-item > .checkbox-label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .checkbox-action-item > .checkbox-label { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077) +} \ No newline at end of file diff --git a/src/vs/base/browser/ui/toggle/toggle.ts b/src/vs/base/browser/ui/toggle/toggle.ts index 0b2fcbb..6370e6f 100644 --- a/src/vs/base/browser/ui/toggle/toggle.ts +++ b/src/vs/base/browser/ui/toggle/toggle.ts @@ -5,2 +5,3 @@ +import { FONT } from '../../../common/font.js'; import { IAction } from '../../../common/actions.js'; @@ -230,3 +231,4 @@ export class Toggle extends Widget { width(): number { - return 2 /*margin left*/ + 2 /*border*/ + 2 /*padding*/ + 16 /* icon width */; + // return 2 /*margin left*/ + 2 /*border*/ + 2 /*padding*/ + 16 /* icon width */; + return 2 + FONT.sidebarSize20 } diff --git a/src/vs/base/common/font.ts b/src/vs/base/common/font.ts new file mode 100644 index 0000000..9b2b46c --- /dev/null +++ b/src/vs/base/common/font.ts @@ -0,0 +1,184 @@ +import { IConfigurationService } from '../../platform/configuration/common/configuration.js'; + +export const FONT = { + activityBarSize: 16, + activityBarSize16: 16, + activityBarSize24: 24, + activityBarSize32: 32, + activityBarSize36: 36, + activityBarSize48: 48, + + bottomPaneSize: 13, + bottomPaneSize22: 22, + + defaultSize: 13, + defaultActivityBarSize: 16, + defaultBottomPaneSize: 13, + defaultSidebarSize: 13, + defaultStatusBarSize: 12, + defaultTabsSize: 13, + + sidebarSize: 13, + sidebarSize8: 8, + sidebarSize10: 10, + sidebarSize16: 16, + sidebarSize17: 17, + sidebarSize18: 18, + sidebarSize20: 20, + sidebarSize22: 22, + sidebarSize23: 23, + sidebarSize24: 24, + sidebarSize26: 26, + sidebarSize28: 28, + sidebarSize34: 34, + sidebarSize39: 39, + sidebarSize44: 44, + sidebarSize62: 62, + sidebarSize72: 72, + + statusBarSize: 12, + statusBarSize22: 22, + + tabsSize: 13, + tabsSize22: 22, + tabsSize35: 35, + tabsSize38: 38, + tabsSize80: 80, + tabsSize120: 120, +}; + +// Activity bar coefficients (base 16) +const ACTIVITY_BAR_COEFF_24 = 24/16; +const ACTIVITY_BAR_COEFF_32 = 32/16; +const ACTIVITY_BAR_COEFF_36 = 36/16; +const ACTIVITY_BAR_COEFF_48 = 48/16; + +// Panel coefficients (base 13) +const BOTTOM_PANEL_COEFF_22 = 22/13; + +// Workbench coefficients (base 13) +const DEFAULT_COEFF_12 = 12/13; +const DEFAULT_COEFF_16 = 16/13; + +// Sidebar coefficients (base 13) +const SIDE_BAR_COEFF_8 = 8/13; +const SIDE_BAR_COEFF_10 = 10/13; +const SIDE_BAR_COEFF_16 = 16/13; +const SIDE_BAR_COEFF_17 = 17/13; +const SIDE_BAR_COEFF_18 = 18/13; +const SIDE_BAR_COEFF_20 = 20/13; +const SIDE_BAR_COEFF_22 = 22/13; +const SIDE_BAR_COEFF_23 = 23/13; +const SIDE_BAR_COEFF_24 = 24/13; +const SIDE_BAR_COEFF_26 = 26/13; +const SIDE_BAR_COEFF_28 = 28/13; +const SIDE_BAR_COEFF_34 = 34/13; +const SIDE_BAR_COEFF_39 = 39/13; +const SIDE_BAR_COEFF_44 = 44/13; +const SIDE_BAR_COEFF_62 = 62/13; +const SIDE_BAR_COEFF_72 = 72/13; + +// Status bar coefficients (base 12) +const STATUS_BAR_COEFF_22 = 22/12; + +// Tabs coefficients (base 13) +const TABS_COEFF_22 = 22/13; +const TABS_COEFF_35 = 35/13; +const TABS_COEFF_38 = 38/13; +const TABS_COEFF_80 = 80/13; +const TABS_COEFF_120 = 120/13; + +/** + * Inspect a configuration value and return whether it was explicitly set by the user, + * along with the clamped numeric value. + */ +export function inspectFontSize( + configurationService:IConfigurationService, + key: string, + defaultSize: number, + min: number = 6, + max: number = 32 +): { isUserSet: boolean; size: number } { + const inspected = configurationService.inspect(key); + const isUserSet = inspected.userValue !== undefined + || inspected.userLocalValue !== undefined + || inspected.userRemoteValue !== undefined + || inspected.workspaceValue !== undefined + || inspected.workspaceFolderValue !== undefined; + + const raw = configurationService.getValue(key); + const size = Math.max(min, Math.min(max, typeof raw === 'number' ? raw : defaultSize)); + + return { isUserSet, size }; +} + +export function getFontSize(configurationService: IConfigurationService, key: string, defaultSize: number, min: number = 6, max: number = 32): number { + const inspected = configurationService.inspect(key); + const isUserSet = inspected.userValue !== undefined || inspected.userLocalValue !== undefined || inspected.userRemoteValue !== undefined || inspected.workspaceValue !== undefined || inspected.workspaceFolderValue !== undefined; + + if(isUserSet) { + const raw = configurationService.getValue(key); + const size = Math.max(min, Math.min(max, typeof raw === 'number' ? raw : defaultSize)); + + return size; + } + else { + return defaultSize + } +} + +export function updateActivityBarSize(size: number): void { + FONT.activityBarSize = size; + FONT.activityBarSize24 = size * ACTIVITY_BAR_COEFF_24; + FONT.activityBarSize32 = size * ACTIVITY_BAR_COEFF_32; + FONT.activityBarSize36 = size * ACTIVITY_BAR_COEFF_36; + FONT.activityBarSize48 = size * ACTIVITY_BAR_COEFF_48; +} + +export function updateDefaultSize(size: number): void { + FONT.defaultSize = size; + FONT.defaultActivityBarSize = size * DEFAULT_COEFF_16 + FONT.defaultBottomPaneSize = size + FONT.defaultSidebarSize = size + FONT.defaultStatusBarSize = size * DEFAULT_COEFF_12 + FONT.defaultTabsSize = size +} + +export function updatePanelSize(size: number): void { + FONT.bottomPaneSize = size; + FONT.bottomPaneSize22 = size * BOTTOM_PANEL_COEFF_22; +} + +export function updateSidebarSize(size: number): void { + FONT.sidebarSize = size; + FONT.sidebarSize8 = size * SIDE_BAR_COEFF_8; + FONT.sidebarSize10 = size * SIDE_BAR_COEFF_10; + FONT.sidebarSize16 = size * SIDE_BAR_COEFF_16; + FONT.sidebarSize17 = size * SIDE_BAR_COEFF_17; + FONT.sidebarSize18 = size * SIDE_BAR_COEFF_18; + FONT.sidebarSize20 = size * SIDE_BAR_COEFF_20; + FONT.sidebarSize22 = size * SIDE_BAR_COEFF_22; + FONT.sidebarSize23 = size * SIDE_BAR_COEFF_23; + FONT.sidebarSize24 = size * SIDE_BAR_COEFF_24; + FONT.sidebarSize26 = size * SIDE_BAR_COEFF_26; + FONT.sidebarSize28 = size * SIDE_BAR_COEFF_28; + FONT.sidebarSize34 = size * SIDE_BAR_COEFF_34; + FONT.sidebarSize39 = size * SIDE_BAR_COEFF_39; + FONT.sidebarSize44 = size * SIDE_BAR_COEFF_44; + FONT.sidebarSize62 = size * SIDE_BAR_COEFF_62; + FONT.sidebarSize72 = size * SIDE_BAR_COEFF_72; +} + +export function updateStatusBarSize(size: number): void { + FONT.statusBarSize = size; + FONT.statusBarSize22 = size * STATUS_BAR_COEFF_22; +} + +export function updateTabsSize(size: number): void { + FONT.tabsSize = size; + FONT.tabsSize22 = size * TABS_COEFF_22; + FONT.tabsSize35 = size * TABS_COEFF_35; + FONT.tabsSize38 = size * TABS_COEFF_38; + FONT.tabsSize80 = size * TABS_COEFF_80; + FONT.tabsSize120 = size * TABS_COEFF_120; +} \ No newline at end of file diff --git a/src/vs/base/test/common/font.test.ts b/src/vs/base/test/common/font.test.ts new file mode 100644 index 0000000..62a49d5 --- /dev/null +++ b/src/vs/base/test/common/font.test.ts @@ -0,0 +1,482 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) VSCodium. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import assert from 'assert'; +import { ensureNoDisposablesAreLeakedInTestSuite } from './utils.js'; +import { FONT, updateSidebarSize, updateStatusBarSize, updatePanelSize, updateActivityBarSize, updateTabsSize } from '../../common/font.js'; + +/** + * Test file for src/vs/base/common/font.ts + * + * Tests all update*Size() functions for: + * - Default values match upstream VS Code hardcoded constants + * - Proportional scaling preserves ratios at non-default sizes + * - Boundary values (minimum=6, maximum=32) produce positive values + * - Reset to default restores original values + * - Non-divisible sizes produce consistent coefficient-based output + * - Cross-area updates do not mutate unrelated fields + */ + +const EPSILON = 1e-9; + +/** Assert two numbers are equal within floating-point tolerance */ +function assertClose(actual: number, expected: number, message?: string): void { + const diff = Math.abs(actual - expected); + assert.ok(diff < EPSILON, `${message ?? ''} expected ${expected}, got ${actual} (diff: ${diff})`); +} + +/** + * Snapshot all FONT fields to detect unintended mutations. + * Returns a plain object copy of every enumerable property. + */ +function snapshotFont(): Record { + const snap: Record = {}; + for (const key of Object.keys(FONT)) { + snap[key] = (FONT as Record)[key]; + } + return snap; +} + +/** Assert that specific fields in FONT have not changed from a snapshot */ +function assertFieldsUnchanged(snapshot: Record, prefix: string, message: string): void { + for (const key of Object.keys(snapshot)) { + if (key.startsWith(prefix)) { + assertClose((FONT as Record)[key], snapshot[key], `${message}: ${key}`); + } + } +} + +suite('FONT - Sidebar Size', () => { + + ensureNoDisposablesAreLeakedInTestSuite(); + + // Capture defaults before any test mutates them + const DEFAULTS = snapshotFont(); + + teardown(() => { + // Reset after each test + updateSidebarSize(13); + }); + + test('defaults match upstream VS Code constants', () => { + assert.strictEqual(FONT.sidebarSize, 13); + assert.strictEqual(FONT.sidebarSize8, 8); + assert.strictEqual(FONT.sidebarSize10, 10); + assert.strictEqual(FONT.sidebarSize16, 16); + assert.strictEqual(FONT.sidebarSize17, 17); + assert.strictEqual(FONT.sidebarSize18, 18); + assert.strictEqual(FONT.sidebarSize20, 20); + assert.strictEqual(FONT.sidebarSize22, 22); + assert.strictEqual(FONT.sidebarSize23, 23); + assert.strictEqual(FONT.sidebarSize24, 24); + assert.strictEqual(FONT.sidebarSize26, 26); + assert.strictEqual(FONT.sidebarSize28, 28); + assert.strictEqual(FONT.sidebarSize34, 34); + assert.strictEqual(FONT.sidebarSize39, 39); + assert.strictEqual(FONT.sidebarSize44, 44); + assert.strictEqual(FONT.sidebarSize62, 62); + assert.strictEqual(FONT.sidebarSize72, 72); + }); + + test('proportional scaling preserves ratios at 2x', () => { + updateSidebarSize(26); // 2x default + assert.strictEqual(FONT.sidebarSize, 26); + assert.strictEqual(FONT.sidebarSize8, 16); + assert.strictEqual(FONT.sidebarSize22, 44); + assert.strictEqual(FONT.sidebarSize44, 88); + assert.strictEqual(FONT.sidebarSize72, 144); + }); + + test('non-divisible size produces consistent coefficient-based values', () => { + updateSidebarSize(7); + assertClose(FONT.sidebarSize22, 7 * (22 / 13)); + assertClose(FONT.sidebarSize44, 7 * (44 / 13)); + assertClose(FONT.sidebarSize72, 7 * (72 / 13)); + }); + + test('another non-divisible size (31)', () => { + updateSidebarSize(31); + assertClose(FONT.sidebarSize22, 31 * (22 / 13)); + assertClose(FONT.sidebarSize44, 31 * (44 / 13)); + }); + + test('minimum value (6) produces positive values', () => { + updateSidebarSize(6); + assert.strictEqual(FONT.sidebarSize, 6); + assert.ok(FONT.sidebarSize8 > 0, 'sidebarSize8 must be positive'); + assert.ok(FONT.sidebarSize10 > 0, 'sidebarSize10 must be positive'); + assert.ok(FONT.sidebarSize22 > 0, 'sidebarSize22 must be positive'); + assert.ok(FONT.sidebarSize72 > 0, 'sidebarSize72 must be positive'); + }); + + test('maximum value (32) produces reasonable values', () => { + updateSidebarSize(32); + assert.strictEqual(FONT.sidebarSize, 32); + assert.ok(FONT.sidebarSize22 > 40, 'row height should scale up'); + assert.ok(FONT.sidebarSize22 < 80, 'row height should not be extreme'); + }); + + test('reset to default restores all values', () => { + updateSidebarSize(20); + assert.notStrictEqual(FONT.sidebarSize22, DEFAULTS.sidebarSize22); + updateSidebarSize(13); + assertFieldsUnchanged(DEFAULTS, 'sidebar', 'after reset'); + }); + + test('multiple updates in sequence are idempotent at same value', () => { + updateSidebarSize(18); + const snap = snapshotFont(); + updateSidebarSize(18); + assertFieldsUnchanged(snap, 'sidebar', 'idempotent'); + }); +}); + +suite('FONT - Status Bar Size', () => { + + ensureNoDisposablesAreLeakedInTestSuite(); + + teardown(() => { + updateStatusBarSize(12); + }); + + test('defaults match upstream VS Code status bar constants', () => { + assert.strictEqual(FONT.statusBarSize, 12); + assert.strictEqual(FONT.statusBarSize22, 22); // StatusbarPart.HEIGHT + }); + + test('proportional scaling at 2x', () => { + updateStatusBarSize(24); + assert.strictEqual(FONT.statusBarSize, 24); + assert.strictEqual(FONT.statusBarSize22, 44); + }); + + test('non-divisible size (7)', () => { + updateStatusBarSize(7); + assertClose(FONT.statusBarSize22, 7 * (22 / 12)); + }); + + test('minimum value (6) produces positive height', () => { + updateStatusBarSize(6); + assert.strictEqual(FONT.statusBarSize, 6); + assert.ok(FONT.statusBarSize22 > 0, 'height must be positive'); + assertClose(FONT.statusBarSize22, 6 * (22 / 12)); + }); + + test('maximum value (32) produces reasonable height', () => { + updateStatusBarSize(32); + assertClose(FONT.statusBarSize22, 32 * (22 / 12)); + assert.ok(FONT.statusBarSize22 > 50, 'height should scale up'); + assert.ok(FONT.statusBarSize22 < 70, 'height should not be extreme'); + }); + + test('reset to default restores values', () => { + updateStatusBarSize(20); + updateStatusBarSize(12); + assert.strictEqual(FONT.statusBarSize, 12); + assert.strictEqual(FONT.statusBarSize22, 22); + }); +}); + +suite('FONT - Panel Size', () => { + + ensureNoDisposablesAreLeakedInTestSuite(); + + teardown(() => { + updatePanelSize(13); + }); + + test('defaults match sidebar defaults (same base size)', () => { + assert.strictEqual(FONT.bottomPaneSize, 13); + assert.strictEqual(FONT.bottomPaneSize22, 22); + }); + + test('panel and sidebar can have independent sizes', () => { + updatePanelSize(18); + assert.strictEqual(FONT.bottomPaneSize, 18); + assert.notStrictEqual(FONT.bottomPaneSize22, 22); + // Sidebar unchanged + assert.strictEqual(FONT.sidebarSize, 13); + assert.strictEqual(FONT.sidebarSize22, 22); + }); + + test('proportional scaling at 2x', () => { + updatePanelSize(26); + assert.strictEqual(FONT.bottomPaneSize22, 44); + }); + + test('non-divisible size (7)', () => { + updatePanelSize(7); + assertClose(FONT.bottomPaneSize22, 7 * (22 / 13)); + }); + + test('minimum value (6)', () => { + updatePanelSize(6); + assert.ok(FONT.bottomPaneSize22 > 0, 'row height must be positive'); + assert.ok(FONT.bottomPaneSize22 >= 10, 'row height at minimum should be usable'); + }); + + test('maximum value (32)', () => { + updatePanelSize(32); + assert.ok(FONT.bottomPaneSize22 > 50, 'row height should scale up'); + }); + + test('reset to default restores values', () => { + updatePanelSize(20); + updatePanelSize(13); + assert.strictEqual(FONT.bottomPaneSize, 13); + assert.strictEqual(FONT.bottomPaneSize22, 22); + }); +}); + +suite('FONT - Activity Bar Size', () => { + + ensureNoDisposablesAreLeakedInTestSuite(); + + teardown(() => { + updateActivityBarSize(16); + }); + + test('defaults match upstream VS Code activity bar constants', () => { + assert.strictEqual(FONT.activityBarSize, 16); + assert.strictEqual(FONT.activityBarSize16, 16); // COMPACT_ICON_SIZE + assert.strictEqual(FONT.activityBarSize24, 24); // ICON_SIZE + assert.strictEqual(FONT.activityBarSize32, 32); // COMPACT_ACTION_HEIGHT + assert.strictEqual(FONT.activityBarSize36, 36); // COMPACT_ACTIVITYBAR_WIDTH + assert.strictEqual(FONT.activityBarSize48, 48); // ACTION_HEIGHT / ACTIVITYBAR_WIDTH + }); + + test('proportional scaling at 2x', () => { + updateActivityBarSize(32); + assert.strictEqual(FONT.activityBarSize, 32); + assert.strictEqual(FONT.activityBarSize16, 32); // compact icon = base size + assert.strictEqual(FONT.activityBarSize24, 48); + assert.strictEqual(FONT.activityBarSize32, 64); + assert.strictEqual(FONT.activityBarSize36, 72); + assert.strictEqual(FONT.activityBarSize48, 96); + }); + + test('compact constants scale correctly', () => { + updateActivityBarSize(20); + // Compact icon size = base size * (16/16) = 20 + assertClose(FONT.activityBarSize16, 20 * (16 / 16)); + // Compact width = base * (36/16) = 45 + assertClose(FONT.activityBarSize36, 20 * (36 / 16)); + // Compact action height = base * (32/16) = 40 + assertClose(FONT.activityBarSize32, 20 * (32 / 16)); + }); + + test('non-divisible size (7)', () => { + updateActivityBarSize(7); + assertClose(FONT.activityBarSize24, 7 * (24 / 16)); + assertClose(FONT.activityBarSize48, 7 * (48 / 16)); + assertClose(FONT.activityBarSize36, 7 * (36 / 16)); + }); + + test('minimum value (6) produces positive values', () => { + updateActivityBarSize(6); + assert.strictEqual(FONT.activityBarSize, 6); + assert.ok(FONT.activityBarSize16 > 0, 'compact icon size must be positive'); + assert.ok(FONT.activityBarSize24 > 0, 'icon size must be positive'); + assert.ok(FONT.activityBarSize36 > 0, 'compact width must be positive'); + assert.ok(FONT.activityBarSize48 > 0, 'action height must be positive'); + }); + + test('maximum value (32) produces reasonable values', () => { + updateActivityBarSize(32); + assert.strictEqual(FONT.activityBarSize48, 96); + assert.ok(FONT.activityBarSize48 <= 100, 'action height should be bounded'); + }); + + test('reset to default restores values', () => { + updateActivityBarSize(24); + updateActivityBarSize(16); + assert.strictEqual(FONT.activityBarSize, 16); + assert.strictEqual(FONT.activityBarSize16, 16); + assert.strictEqual(FONT.activityBarSize24, 24); + assert.strictEqual(FONT.activityBarSize32, 32); + assert.strictEqual(FONT.activityBarSize36, 36); + assert.strictEqual(FONT.activityBarSize48, 48); + }); +}); + +suite('FONT - Tabs Size', () => { + + ensureNoDisposablesAreLeakedInTestSuite(); + + teardown(() => { + updateTabsSize(13); + }); + + test('defaults match upstream VS Code tab constants', () => { + assert.strictEqual(FONT.tabsSize, 13); + assert.strictEqual(FONT.tabsSize22, 22); // EDITOR_TAB_HEIGHT compact + assert.strictEqual(FONT.tabsSize35, 35); // EDITOR_TAB_HEIGHT normal + assert.strictEqual(FONT.tabsSize38, 38); // TAB_WIDTH compact + assert.strictEqual(FONT.tabsSize80, 80); // TAB_WIDTH shrink + assert.strictEqual(FONT.tabsSize120, 120); // TAB_WIDTH fit + }); + + test('proportional scaling preserves tab height/width ratios at 2x', () => { + updateTabsSize(26); + assert.strictEqual(FONT.tabsSize, 26); + assert.strictEqual(FONT.tabsSize22, 44); + assert.strictEqual(FONT.tabsSize35, 70); + assert.strictEqual(FONT.tabsSize38, 76); + assert.strictEqual(FONT.tabsSize80, 160); + assert.strictEqual(FONT.tabsSize120, 240); + }); + + test('non-divisible size (7)', () => { + updateTabsSize(7); + assertClose(FONT.tabsSize22, 7 * (22 / 13)); + assertClose(FONT.tabsSize35, 7 * (35 / 13)); + assertClose(FONT.tabsSize80, 7 * (80 / 13)); + assertClose(FONT.tabsSize120, 7 * (120 / 13)); + }); + + test('minimum value (6) produces usable tab dimensions', () => { + updateTabsSize(6); + assert.strictEqual(FONT.tabsSize, 6); + assert.ok(FONT.tabsSize35 > 10, 'normal tab height must be clickable'); + assert.ok(FONT.tabsSize22 > 8, 'compact tab height must be usable'); + assert.ok(FONT.tabsSize38 > 0, 'compact tab width must be positive'); + assert.ok(FONT.tabsSize80 > 0, 'shrink tab width must be positive'); + }); + + test('maximum value (32) produces reasonable tab dimensions', () => { + updateTabsSize(32); + assert.ok(FONT.tabsSize35 > 80, 'normal tab height should scale up'); + assert.ok(FONT.tabsSize35 < 100, 'normal tab height should be bounded'); + }); + + test('reset to default restores all values', () => { + updateTabsSize(20); + updateTabsSize(13); + assert.strictEqual(FONT.tabsSize, 13); + assert.strictEqual(FONT.tabsSize22, 22); + assert.strictEqual(FONT.tabsSize35, 35); + assert.strictEqual(FONT.tabsSize38, 38); + assert.strictEqual(FONT.tabsSize80, 80); + assert.strictEqual(FONT.tabsSize120, 120); + }); +}); + +suite('FONT - Cross-area independence', () => { + + ensureNoDisposablesAreLeakedInTestSuite(); + + teardown(() => { + updateSidebarSize(13); + updateStatusBarSize(12); + updatePanelSize(13); + updateActivityBarSize(16); + updateTabsSize(13); + }); + + test('updating sidebar does not affect any other area (full derived field check)', () => { + const before = snapshotFont(); + updateSidebarSize(20); + + // All non-sidebar fields must be unchanged + assertFieldsUnchanged(before, 'statusBar', 'after sidebar update'); + assertFieldsUnchanged(before, 'panel', 'after sidebar update'); + assertFieldsUnchanged(before, 'activityBar', 'after sidebar update'); + assertFieldsUnchanged(before, 'tabs', 'after sidebar update'); + }); + + test('updating statusBar does not affect any other area', () => { + const before = snapshotFont(); + updateStatusBarSize(20); + + assertFieldsUnchanged(before, 'sidebar', 'after statusBar update'); + assertFieldsUnchanged(before, 'panel', 'after statusBar update'); + assertFieldsUnchanged(before, 'activityBar', 'after statusBar update'); + assertFieldsUnchanged(before, 'tabs', 'after statusBar update'); + }); + + test('updating panel does not affect any other area', () => { + const before = snapshotFont(); + updatePanelSize(20); + + assertFieldsUnchanged(before, 'sidebar', 'after panel update'); + assertFieldsUnchanged(before, 'statusBar', 'after panel update'); + assertFieldsUnchanged(before, 'activityBar', 'after panel update'); + assertFieldsUnchanged(before, 'tabs', 'after panel update'); + }); + + test('updating activityBar does not affect any other area', () => { + const before = snapshotFont(); + updateActivityBarSize(20); + + assertFieldsUnchanged(before, 'sidebar', 'after activityBar update'); + assertFieldsUnchanged(before, 'statusBar', 'after activityBar update'); + assertFieldsUnchanged(before, 'panel', 'after activityBar update'); + assertFieldsUnchanged(before, 'tabs', 'after activityBar update'); + }); + + test('updating tabs does not affect any other area', () => { + const before = snapshotFont(); + updateTabsSize(20); + + assertFieldsUnchanged(before, 'sidebar', 'after tabs update'); + assertFieldsUnchanged(before, 'statusBar', 'after tabs update'); + assertFieldsUnchanged(before, 'panel', 'after tabs update'); + assertFieldsUnchanged(before, 'activityBar', 'after tabs update'); + }); + + test('all areas set to same value produce different derived values due to different coefficients', () => { + const commonSize = 18; + updateSidebarSize(commonSize); + updateStatusBarSize(commonSize); + updatePanelSize(commonSize); + updateActivityBarSize(commonSize); + updateTabsSize(commonSize); + + assert.strictEqual(FONT.sidebarSize, commonSize); + assert.strictEqual(FONT.statusBarSize, commonSize); + assert.strictEqual(FONT.bottomPaneSize, commonSize); + assert.strictEqual(FONT.activityBarSize, commonSize); + assert.strictEqual(FONT.tabsSize, commonSize); + + // sidebarSize22 = 18 * (22/13), statusBarSize22 = 18 * (22/12) + // Different coefficients → different results + assert.notStrictEqual(FONT.sidebarSize22, FONT.statusBarSize22, + 'same base size should produce different derived values due to different coefficients'); + }); + + test('sequential updates across all areas and full reset', () => { + updateSidebarSize(8); + updateStatusBarSize(10); + updatePanelSize(15); + updateActivityBarSize(20); + updateTabsSize(25); + + // Verify all set correctly + assert.strictEqual(FONT.sidebarSize, 8); + assert.strictEqual(FONT.statusBarSize, 10); + assert.strictEqual(FONT.bottomPaneSize, 15); + assert.strictEqual(FONT.activityBarSize, 20); + assert.strictEqual(FONT.tabsSize, 25); + + // Reset all + updateSidebarSize(13); + updateStatusBarSize(12); + updatePanelSize(13); + updateActivityBarSize(16); + updateTabsSize(13); + + // All defaults restored + assert.strictEqual(FONT.sidebarSize, 13); + assert.strictEqual(FONT.sidebarSize22, 22); + assert.strictEqual(FONT.statusBarSize, 12); + assert.strictEqual(FONT.statusBarSize22, 22); + assert.strictEqual(FONT.bottomPaneSize, 13); + assert.strictEqual(FONT.bottomPaneSize22, 22); + assert.strictEqual(FONT.activityBarSize, 16); + assert.strictEqual(FONT.activityBarSize48, 48); + assert.strictEqual(FONT.tabsSize, 13); + assert.strictEqual(FONT.tabsSize35, 35); + }); +}); diff --git a/src/vs/platform/quickinput/browser/tree/quickInputDelegate.ts b/src/vs/platform/quickinput/browser/tree/quickInputDelegate.ts index 328285f..0735dfa 100644 --- a/src/vs/platform/quickinput/browser/tree/quickInputDelegate.ts +++ b/src/vs/platform/quickinput/browser/tree/quickInputDelegate.ts @@ -6,2 +6,3 @@ import { IListVirtualDelegate } from '../../../../base/browser/ui/list/list.js'; +import { FONT } from '../../../../base/common/font.js'; import { IQuickTreeItem } from '../../common/quickInput.js'; @@ -14,3 +15,3 @@ export class QuickInputTreeDelegate implements IListVi getHeight(_element: T): number { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/browser/media/style.css b/src/vs/workbench/browser/media/style.css index 7537f93..5a7a277 100644 --- a/src/vs/workbench/browser/media/style.css +++ b/src/vs/workbench/browser/media/style.css @@ -11,20 +11,20 @@ -.monaco-workbench.mac { font-family: -apple-system, BlinkMacSystemFont, sans-serif; } -.monaco-workbench.mac:lang(zh-Hans) { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", sans-serif; } -.monaco-workbench.mac:lang(zh-Hant) { font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif; } -.monaco-workbench.mac:lang(ja) { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic Pro", sans-serif; } -.monaco-workbench.mac:lang(ko) { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Nanum Gothic", "AppleGothic", sans-serif; } - -.monaco-workbench.windows { font-family: "Segoe WPC", "Segoe UI", sans-serif; } -.monaco-workbench.windows:lang(zh-Hans) { font-family: "Segoe WPC", "Segoe UI", "Microsoft YaHei", sans-serif; } -.monaco-workbench.windows:lang(zh-Hant) { font-family: "Segoe WPC", "Segoe UI", "Microsoft Jhenghei", sans-serif; } -.monaco-workbench.windows:lang(ja) { font-family: "Segoe WPC", "Segoe UI", "Yu Gothic UI", "Meiryo UI", sans-serif; } -.monaco-workbench.windows:lang(ko) { font-family: "Segoe WPC", "Segoe UI", "Malgun Gothic", "Dotom", sans-serif; } +.monaco-workbench.mac { --monaco-font: -apple-system, BlinkMacSystemFont, sans-serif; } +.monaco-workbench.mac:lang(zh-Hans) { --monaco-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", sans-serif; } +.monaco-workbench.mac:lang(zh-Hant) { --monaco-font: -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif; } +.monaco-workbench.mac:lang(ja) { --monaco-font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic Pro", sans-serif; } +.monaco-workbench.mac:lang(ko) { --monaco-font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Nanum Gothic", "AppleGothic", sans-serif; } + +.monaco-workbench.windows { --monaco-font: "Segoe WPC", "Segoe UI", sans-serif; } +.monaco-workbench.windows:lang(zh-Hans) { --monaco-font: "Segoe WPC", "Segoe UI", "Microsoft YaHei", sans-serif; } +.monaco-workbench.windows:lang(zh-Hant) { --monaco-font: "Segoe WPC", "Segoe UI", "Microsoft Jhenghei", sans-serif; } +.monaco-workbench.windows:lang(ja) { --monaco-font: "Segoe WPC", "Segoe UI", "Yu Gothic UI", "Meiryo UI", sans-serif; } +.monaco-workbench.windows:lang(ko) { --monaco-font: "Segoe WPC", "Segoe UI", "Malgun Gothic", "Dotom", sans-serif; } /* Linux: add `system-ui` as first font and not `Ubuntu` to allow other distribution pick their standard OS font */ -.monaco-workbench.linux { font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif; } -.monaco-workbench.linux:lang(zh-Hans) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif; } -.monaco-workbench.linux:lang(zh-Hant) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans TC", "Source Han Sans TW", "Source Han Sans", sans-serif; } -.monaco-workbench.linux:lang(ja) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans J", "Source Han Sans JP", "Source Han Sans", sans-serif; } -.monaco-workbench.linux:lang(ko) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans K", "Source Han Sans JR", "Source Han Sans", "UnDotum", "FBaekmuk Gulim", sans-serif; } +.monaco-workbench.linux { --monaco-font: system-ui, "Ubuntu", "Droid Sans", sans-serif; } +.monaco-workbench.linux:lang(zh-Hans) { --monaco-font: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif; } +.monaco-workbench.linux:lang(zh-Hant) { --monaco-font: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans TC", "Source Han Sans TW", "Source Han Sans", sans-serif; } +.monaco-workbench.linux:lang(ja) { --monaco-font: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans J", "Source Han Sans JP", "Source Han Sans", sans-serif; } +.monaco-workbench.linux:lang(ko) { --monaco-font: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans K", "Source Han Sans JR", "Source Han Sans", "UnDotum", "FBaekmuk Gulim", sans-serif; } @@ -55,2 +55,4 @@ body { color: var(--vscode-foreground); + font-family: var(--vscode-workbench-font-family, var(--monaco-font)); + font-size: var(--vscode-workbench-font-size, 13px); } @@ -323 +325,41 @@ body { } + + + +.monaco-workbench .part.sidebar body, .monaco-workbench .part.auxiliarybar body { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154) +} +.monaco-workbench .part.sidebar, .monaco-workbench .part.auxiliarybar { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 1) +} +.monaco-workbench .part.sidebar .codicon[class*='codicon-'], .monaco-workbench .part.auxiliarybar .codicon[class*='codicon-'] { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769) +} +.monaco-workbench .part.sidebar .predefined-file-icon[class*='codicon-']::before, .monaco-workbench .part.auxiliarybar .predefined-file-icon[class*='codicon-']::before { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769); + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) +} +.monaco-workbench .part.sidebar .select-container:after, .monaco-workbench .part.auxiliarybar .select-container:after { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar [tabindex="0"]:focus, .monaco-workbench .part.sidebar [tabindex="-1"]:focus, .monaco-workbench .part.sidebar .synthetic-focus, .monaco-workbench .part.sidebar select:focus, .monaco-workbench .part.sidebar input[type="button"]:focus, .monaco-workbench .part.sidebar input[type="text"]:focus, .monaco-workbench .part.sidebar button:focus, .monaco-workbench .part.sidebar textarea:focus, .monaco-workbench .part.sidebar input[type="search"]:focus, .monaco-workbench .part.sidebar input[type="checkbox"]:focus, .monaco-workbench .part.auxiliarybar [tabindex="0"]:focus, .monaco-workbench .part.auxiliarybar [tabindex="-1"]:focus, .monaco-workbench .part.auxiliarybar .synthetic-focus, .monaco-workbench .part.auxiliarybar select:focus, .monaco-workbench .part.auxiliarybar input[type="button"]:focus, .monaco-workbench .part.auxiliarybar input[type="text"]:focus, .monaco-workbench .part.auxiliarybar button:focus, .monaco-workbench .part.auxiliarybar textarea:focus, .monaco-workbench .part.auxiliarybar input[type="search"]:focus, .monaco-workbench .part.auxiliarybar input[type="checkbox"]:focus { + outline-width: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923); + outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923) +} +.monaco-workbench .part.sidebar input[type="checkbox"]:focus, .monaco-workbench .part.auxiliarybar input[type="checkbox"]:focus { + outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .monaco-list:not(.element-focused):not(:active):focus:before, .monaco-workbench .part.auxiliarybar .monaco-list:not(.element-focused):not(:active):focus:before { + outline: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) solid; + outline-width: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923); + outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923) +} +.monaco-workbench .part.sidebar .monaco-action-bar:not(.vertical) .action-item .action-label:hover:not(.disabled), .monaco-workbench .part.auxiliarybar .monaco-action-bar:not(.vertical) .action-item .action-label:hover:not(.disabled) { + outline: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) dashed var(--vscode-toolbar-hoverOutline); + outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923) +} \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts index 0307cab..5e5f6f3 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts @@ -40,2 +40,3 @@ import { IViewsService } from '../../../services/views/common/viewsService.js'; import { SwitchCompositeViewAction } from '../compositeBarActions.js'; +import { FONT, getFontSize, updateActivityBarSize } from '../../../../base/common/font.js'; @@ -45,2 +46,3 @@ export class ActivitybarPart extends Part { static readonly COMPACT_ACTION_HEIGHT = 32; + static readonly COMPACT_ACTION_HEIGHT_RATIO = 32/48; @@ -48,2 +50,3 @@ export class ActivitybarPart extends Part { static readonly COMPACT_ACTIVITYBAR_WIDTH = 36; + static readonly COMPACT_ACTIVITYBAR_WIDTH_RATIO = 36/48; @@ -51,2 +54,3 @@ export class ActivitybarPart extends Part { static readonly COMPACT_ICON_SIZE = 16; + static readonly COMPACT_ICON_SIZE_RATIO = 16/24; @@ -58,4 +62,4 @@ export class ActivitybarPart extends Part { - get minimumWidth(): number { return this._isCompact ? ActivitybarPart.COMPACT_ACTIVITYBAR_WIDTH : ActivitybarPart.ACTIVITYBAR_WIDTH; } - get maximumWidth(): number { return this._isCompact ? ActivitybarPart.COMPACT_ACTIVITYBAR_WIDTH : ActivitybarPart.ACTIVITYBAR_WIDTH; } + get minimumWidth(): number { return this._isCompact ? FONT.activityBarSize48 * ActivitybarPart.COMPACT_ACTIVITYBAR_WIDTH_RATIO : FONT.activityBarSize48; } + get maximumWidth(): number { return this._isCompact ? FONT.activityBarSize48 * ActivitybarPart.COMPACT_ACTIVITYBAR_WIDTH_RATIO : FONT.activityBarSize48; } readonly minimumHeight: number = 0; @@ -90,2 +94,11 @@ export class ActivitybarPart extends Part { })); + + this._register(configurationService.onDidChangeConfiguration(e => { + if (e.affectsConfiguration('workbench.activityBar.experimental.fontFamily') || e.affectsConfiguration('workbench.activityBar.experimental.fontSize')) { + this.applyActivityBarFontFamily(); + this.applyActivityBarFontSize(); + this.recreateCompositeBar(); + this._onDidChange.fire(undefined); // Signal grid that size constraints changed + } + })); } @@ -96,4 +109,4 @@ export class ActivitybarPart extends Part { this.element.style.setProperty('--activity-bar-width', `${this.minimumWidth}px`); - this.element.style.setProperty('--activity-bar-action-height', `${this._isCompact ? ActivitybarPart.COMPACT_ACTION_HEIGHT : ActivitybarPart.ACTION_HEIGHT}px`); - this.element.style.setProperty('--activity-bar-icon-size', `${this._isCompact ? ActivitybarPart.COMPACT_ICON_SIZE : ActivitybarPart.ICON_SIZE}px`); + this.element.style.setProperty('--activity-bar-action-height', `${this._isCompact ? FONT.activityBarSize32 : FONT.activityBarSize48}px`); + this.element.style.setProperty('--activity-bar-icon-size', `${this._isCompact ? FONT.activityBarSize : FONT.activityBarSize24}px`); } @@ -153,2 +166,6 @@ export class ActivitybarPart extends Part { + // Apply font settings before show() so composite bar uses correct sizes + this.applyActivityBarFontFamily(parent); + this.applyActivityBarFontSize(parent); + this.updateCompactStyle(); @@ -162,2 +179,34 @@ export class ActivitybarPart extends Part { + private applyActivityBarFontFamily(container?: HTMLElement): void { + const target = container ?? this.getContainer(); + if (!target) { + return; + } + + const family = this.configurationService.getValue('workbench.activityBar.experimental.fontFamily'); + + if (family) { + target.style.setProperty('--vscode-workbench-activitybar-font-family', family); + } else { + target.style.removeProperty('--vscode-workbench-activitybar-font-family'); + } + + this._onDidChange.fire(undefined); // Signal grid that size constraints changed + } + + private applyActivityBarFontSize(container?: HTMLElement): void { + const target = container ?? this.getContainer(); + if (!target) { + return; + } + + const configuredSize = getFontSize(this.configurationService, 'workbench.activityBar.experimental.fontSize', FONT.defaultActivityBarSize); + + updateActivityBarSize(configuredSize); + + target.style.setProperty('--vscode-workbench-activitybar-font-size', `${FONT.activityBarSize}px`); + + this._onDidChange.fire(undefined); // Signal grid that size constraints changed + } + getPinnedPaneCompositeIds(): string[] { diff --git a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css index a40a351..51eb067 100644 --- a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css +++ b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css @@ -230 +230,60 @@ } + + + +/*** Generated for Custom Font Size ***/ + +.monaco-workbench .activitybar > .content .composite-bar > .monaco-action-bar .action-item::before, .monaco-workbench .activitybar > .content .composite-bar > .monaco-action-bar .action-item::after { + width: var(--activity-bar-width, calc(var(--vscode-workbench-activitybar-font-size) * 3)); + height: calc(var(--vscode-workbench-activitybar-font-size) * 0.125) +} +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label { + width: var(--activity-bar-width, calc(var(--vscode-workbench-activitybar-font-size) * 3)); + height: var(--activity-bar-action-height, calc(var(--vscode-workbench-activitybar-font-size) * 3)) +} +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label:not(.codicon) { + font-size: calc(var(--vscode-workbench-activitybar-font-size) * 0.9375); + line-height: var(--activity-bar-action-height, calc(var(--vscode-workbench-activitybar-font-size) * 3)); + padding: 0 0 0 var(--activity-bar-width, calc(var(--vscode-workbench-activitybar-font-size) * 3)) +} +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label.codicon { + font-size: var(--activity-bar-icon-size, calc(var(--vscode-workbench-activitybar-font-size) * 1.5)) +} +.monaco-workbench.border .activitybar.right > .content :not(.monaco-menu) > .monaco-action-bar .active-item-indicator { + left: calc(var(--vscode-workbench-activitybar-font-size) * -0.125) +} +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .badge .badge-content { + top: calc(var(--vscode-workbench-activitybar-font-size) * 1.5); + right: calc(var(--vscode-workbench-activitybar-font-size) * 0.5); + font-size: calc(var(--vscode-workbench-activitybar-font-size) * 0.5625); + min-width: calc(var(--vscode-workbench-activitybar-font-size) * 0.5); + height: calc(var(--vscode-workbench-activitybar-font-size) * 1); + line-height: calc(var(--vscode-workbench-activitybar-font-size) * 1); + padding: 0 calc(var(--vscode-workbench-activitybar-font-size) * 0.25) +} +.monaco-workbench .activitybar.compact > .content :not(.monaco-menu) > .monaco-action-bar .badge .badge-content { + top: calc(var(--vscode-workbench-activitybar-font-size) * 1.0625); + right: calc(var(--vscode-workbench-activitybar-font-size) * 0.375); + min-width: calc(var(--vscode-workbench-activitybar-font-size) * 0.5625); + height: calc(var(--vscode-workbench-activitybar-font-size) * 0.8125); + line-height: calc(var(--vscode-workbench-activitybar-font-size) * 0.8125); + padding: 0 calc(var(--vscode-workbench-activitybar-font-size) * 0.125) +} +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .profile-badge .profile-text-overlay { + font-size: calc(var(--vscode-workbench-activitybar-font-size) * 0.5625); + line-height: calc(var(--vscode-workbench-activitybar-font-size) * 0.625); + top: calc(var(--vscode-workbench-activitybar-font-size) * 1.5); + right: calc(var(--vscode-workbench-activitybar-font-size) * 0.375); + padding: calc(var(--vscode-workbench-activitybar-font-size) * 0.125) calc(var(--vscode-workbench-activitybar-font-size) * 0.1875) +} +.monaco-workbench .activitybar.compact > .content :not(.monaco-menu) > .monaco-action-bar .profile-badge .profile-text-overlay { + font-size: calc(var(--vscode-workbench-activitybar-font-size) * 0.5); + line-height: calc(var(--vscode-workbench-activitybar-font-size) * 0.5); + top: calc(var(--vscode-workbench-activitybar-font-size) * 0.875); + right: calc(var(--vscode-workbench-activitybar-font-size) * 0.125); + padding: calc(var(--vscode-workbench-activitybar-font-size) * 0.125) calc(var(--vscode-workbench-activitybar-font-size) * 0.125) +} +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .badge .codicon.badge-content { + font-size: calc(var(--vscode-workbench-activitybar-font-size) * 0.8125); + padding: 0 +} \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css b/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css index d903883..1bf9716 100644 --- a/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css +++ b/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css @@ -8,2 +8,4 @@ height: 100%; + font-family: var(--vscode-workbench-activitybar-font-family, inherit); + font-size: var(--vscode-workbench-activitybar-font-size); } @@ -58,3 +60,3 @@ width: 100%; - height: 35px; + height: calc(var(--vscode-workbench-activitybar-font-size) * 2.1875); } @@ -63,3 +65,3 @@ width: 100%; - height: 35px; + height: calc(var(--vscode-workbench-activitybar-font-size) * 2.1875); } diff --git a/src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts b/src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts index d32082b..ad7e524 100644 --- a/src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts +++ b/src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts @@ -36,2 +36,4 @@ import { VisibleViewContainersTracker } from '../visibleViewContainersTracker.js import { Extensions } from '../../panecomposite.js'; +import { FONT, getFontSize, updateSidebarSize } from '../../../../base/common/font.js'; +import { SidebarPart } from '../sidebar/sidebarPart.js'; @@ -147,2 +149,8 @@ export class AuxiliaryBarPart extends AbstractPaneCompositePart { } + if (e.affectsConfiguration(SidebarPart.fontSizeSettingsKey)) { + this.applyAuxiliaryBarFontSize(); + } + if (e.affectsConfiguration('workbench.sideBar.experimental.fontFamily')) { + this.applyAuxiliaryBarFontFamily(); + } })); @@ -198,2 +206,37 @@ export class AuxiliaryBarPart extends AbstractPaneCompositePart { container.style.borderRightWidth = borderColor && isPositionLeft ? '1px' : '0px'; + + this.applyAuxiliaryBarFontSize(container); + this.applyAuxiliaryBarFontFamily(container); + } + + private applyAuxiliaryBarFontFamily(container?: HTMLElement): void { + const target = container ?? this.getContainer(); + if (!target) { + return; + } + + const family = this.configurationService.getValue('workbench.sideBar.experimental.fontFamily'); + + if (family) { + target.style.setProperty('--vscode-workbench-sidebar-font-family', family); + } else { + target.style.removeProperty('--vscode-workbench-sidebar-font-family'); + } + + this._onDidChange.fire(undefined); // Signal grid that size constraints changed + } + + private applyAuxiliaryBarFontSize(container?: HTMLElement): void { + const target = container ?? this.getContainer(); + if (!target) { + return; + } + + const configuredSize = getFontSize(this.configurationService, SidebarPart.fontSizeSettingsKey, FONT.defaultSidebarSize); + + updateSidebarSize(configuredSize); + + target.style.setProperty('--vscode-workbench-sidebar-font-size', `${FONT.sidebarSize}px`); + + this._onDidChange.fire(undefined); // Signal grid that size constraints changed } diff --git a/src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css b/src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css index aec3de2..b0e1fd8 100644 --- a/src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css +++ b/src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css @@ -28,2 +28,8 @@ +.monaco-workbench .part.auxiliarybar > .content { + font-size: var(--vscode-workbench-sidebar-font-size, 13px); + font-family: var(--vscode-workbench-sidebar-font-family, inherit); + line-height: 1.4em; +} + .monaco-workbench .part.auxiliarybar > .title > .title-label { diff --git a/src/vs/workbench/browser/parts/editor/editorTabsControl.ts b/src/vs/workbench/browser/parts/editor/editorTabsControl.ts index b0a44e2..e711a80 100644 --- a/src/vs/workbench/browser/parts/editor/editorTabsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorTabsControl.ts @@ -48,2 +48,4 @@ import { MarkdownString } from '../../../../base/common/htmlContent.js'; import { IManagedHoverTooltipMarkdownString } from '../../../../base/browser/ui/hover/hover.js'; +import { IConfigurationService } from '../../../../platform/configuration/common/configuration.js'; +import { FONT, getFontSize, updateTabsSize } from '../../../../base/common/font.js'; import { applyDragImage } from '../../../../base/browser/ui/dnd/dnd.js'; @@ -101,6 +103,8 @@ export abstract class EditorTabsControl extends Themable implements IEditorTabsC - private static readonly EDITOR_TAB_HEIGHT = { - normal: 35 as const, - compact: 22 as const - }; + private static get EDITOR_TAB_HEIGHT() { + return { + normal: FONT.tabsSize35, + compact: FONT.tabsSize22 + }; + } @@ -142,2 +146,3 @@ export abstract class EditorTabsControl extends Themable implements IEditorTabsC @IHostService private readonly hostService: IHostService, + @IConfigurationService protected readonly configurationService: IConfigurationService, ) { @@ -149,2 +154,13 @@ export abstract class EditorTabsControl extends Themable implements IEditorTabsC + this._register(configurationService.onDidChangeConfiguration(e => { + if (e.affectsConfiguration('workbench.tabs.experimental.fontFamily')) { + this.applyTabsFontFamily(); + } + if (e.affectsConfiguration('workbench.tabs.experimental.fontSize')) { + this.applyTabsFontSize(); + this.updateTabHeight(); + this.groupView.relayout(); + } + })); + // Context Keys @@ -170,2 +186,4 @@ export abstract class EditorTabsControl extends Themable implements IEditorTabsC protected create(parent: HTMLElement): HTMLElement { + this.applyTabsFontSize(parent); + this.applyTabsFontFamily(parent); this.updateTabHeight(); @@ -174,2 +192,30 @@ export abstract class EditorTabsControl extends Themable implements IEditorTabsC + private applyTabsFontFamily(container?: HTMLElement): void { + const target = container ?? this.parent; + if (!target) { + return; + } + + const family = this.configurationService.getValue('workbench.tabs.experimental.fontFamily'); + + if (family) { + target.style.setProperty('--vscode-workbench-tabs-font-family', family); + } else { + target.style.removeProperty('--vscode-workbench-tabs-font-family'); + } + } + + private applyTabsFontSize(container?: HTMLElement): void { + const target = container ?? this.parent; + if (!target) { + return; + } + + const configuredSize = getFontSize(this.configurationService, 'workbench.tabs.experimental.fontSize', FONT.defaultTabsSize); + + updateTabsSize(configuredSize); + + target.style.setProperty('--vscode-workbench-tabs-font-size', `${FONT.tabsSize}px`); + } + private get editorActionsEnabled(): boolean { diff --git a/src/vs/workbench/browser/parts/editor/media/editortabscontrol.css b/src/vs/workbench/browser/parts/editor/media/editortabscontrol.css index 57ab8ca..2242f5e 100644 --- a/src/vs/workbench/browser/parts/editor/media/editortabscontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/editortabscontrol.css @@ -9,2 +9,3 @@ cursor: pointer; + font-family: var(--vscode-workbench-tabs-font-family, inherit); } @@ -47 +48,32 @@ } + + + +/*** Handcrafted for Custom Font Size ***/ + +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs { + font-size: var(--vscode-workbench-tabs-font-size); +} + +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .monaco-icon-label::before { + background-size: calc(var(--vscode-workbench-tabs-font-size) * 1.2307692308); + padding-right: calc(var(--vscode-workbench-tabs-font-size) * 1.2307692308); + width: calc(var(--vscode-workbench-tabs-font-size) * 1.2307692308); + font-size: calc(var(--vscode-workbench-tabs-font-size) * 1.5); +} + +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .codicon[class*='codicon-'] { + font-size: calc(var(--vscode-workbench-tabs-font-size) * 1.2307692308); +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .monaco-action-bar .action-item .codicon { + width: calc(var(--vscode-workbench-tabs-font-size) * 1.2307692308); + height: calc(var(--vscode-workbench-tabs-font-size) * 1.2307692308); +} + + + +/*** Generated for Custom Font Size ***/ + +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .title-label a, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab .tab-label a { + font-size: calc(var(--vscode-workbench-tabs-font-size) * 1) +} \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/editor/media/editortitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/editortitlecontrol.css index a24f761..6b15b9c 100644 --- a/src/vs/workbench/browser/parts/editor/media/editortitlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/editortitlecontrol.css @@ -47 +47,28 @@ } + + + +/*** Generated for Custom Font Size ***/ + +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .breadcrumbs-below-tabs .breadcrumbs-control { + height: calc(var(--vscode-workbench-tabs-font-size) * 1.692308) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .breadcrumbs-below-tabs .breadcrumbs-control .monaco-icon-label { + height: calc(var(--vscode-workbench-tabs-font-size) * 1.692308); + line-height: calc(var(--vscode-workbench-tabs-font-size) * 1.692308) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .breadcrumbs-below-tabs .breadcrumbs-control .monaco-icon-label::before { + height: calc(var(--vscode-workbench-tabs-font-size) * 1.692308) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .breadcrumbs-below-tabs .breadcrumbs-control .outline-element-icon { + padding-right: calc(var(--vscode-workbench-tabs-font-size) * 0.230769); + height: calc(var(--vscode-workbench-tabs-font-size) * 1.692308); + line-height: calc(var(--vscode-workbench-tabs-font-size) * 1.692308) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .breadcrumbs-below-tabs .breadcrumbs-control .monaco-breadcrumb-item::before { + width: calc(var(--vscode-workbench-tabs-font-size) * 1.230769); + height: calc(var(--vscode-workbench-tabs-font-size) * 1.692308) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .breadcrumbs-below-tabs .breadcrumbs-control .monaco-breadcrumb-item:last-child { + padding-right: calc(var(--vscode-workbench-tabs-font-size) * 0.615385) +} \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css b/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css index 924d9b3..70a14fd 100644 --- a/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css @@ -168,4 +168,4 @@ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed { - min-width: var(--tab-sizing-current-width, var(--tab-sizing-fixed-min-width, 50px)); - max-width: var(--tab-sizing-current-width, var(--tab-sizing-fixed-max-width, 160px)); + min-width: 50px; + max-width: 160px; flex: 1 0 0; /* all tabs are evenly sized and grow */ @@ -177,3 +177,3 @@ * of the tabs container */ - min-width: calc(var(--tab-sizing-current-width, var(--tab-sizing-fixed-min-width, 50px)) - 1px); + min-width: 50px - 1px; } @@ -560 +560,113 @@ } + + + +/*** Generated for Custom Font Size ***/ + +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.tabs-border-bottom::after { + height: 1px +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping .tabs-container { + height: auto +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab { + padding-left: calc(var(--vscode-workbench-tabs-font-size) * 0.769231); + outline-offset: calc(var(--vscode-workbench-tabs-font-size) * -0.153846) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-shrink.has-icon.tab-actions-right, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-shrink.has-icon.close-action-off:not(.sticky-compact), .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fixed.has-icon.tab-actions-right, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fixed.has-icon.close-action-off:not(.sticky-compact) { + padding-left: calc(var(--vscode-workbench-tabs-font-size) * 0.384615) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fit { + width: calc(var(--vscode-workbench-tabs-font-size) * 9.230769) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fixed { + min-width: calc(var(--vscode-workbench-tabs-font-size) * 3.846154); + max-width: calc(var(--vscode-workbench-tabs-font-size) * 12.307692) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fixed.last-in-row { + min-width: calc(var(--vscode-workbench-tabs-font-size) * 3.846154) - 1px +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-shrink { + min-width: calc(var(--vscode-workbench-tabs-font-size) * 6.153846) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fit.sticky-compact, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-shrink.sticky-compact, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fixed.sticky-compact { + width: calc(var(--vscode-workbench-tabs-font-size) * 2.923077); + min-width: calc(var(--vscode-workbench-tabs-font-size) * 2.923077); + max-width: calc(var(--vscode-workbench-tabs-font-size) * 2.923077) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fit.sticky-shrink, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-shrink.sticky-shrink, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fixed.sticky-shrink { + width: calc(var(--vscode-workbench-tabs-font-size) * 6.153846); + min-width: calc(var(--vscode-workbench-tabs-font-size) * 6.153846); + max-width: calc(var(--vscode-workbench-tabs-font-size) * 6.153846) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-shrink.tab-actions-left .tab-fade-hider, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-shrink.close-action-off .tab-fade-hider, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fixed.tab-actions-left .tab-fade-hider, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fixed.close-action-off .tab-fade-hider { + width: calc(var(--vscode-workbench-tabs-font-size) * 0.384615) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-shrink.tab-actions-left, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fixed.tab-actions-left { + min-width: calc(var(--vscode-workbench-tabs-font-size) * 6.153846); + padding-right: calc(var(--vscode-workbench-tabs-font-size) * 0.384615) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.tab-actions-left:not(.sticky-compact) { + padding-right: calc(var(--vscode-workbench-tabs-font-size) * 0.769231) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.active.tab-border-top:not(:focus) > .tab-border-top-container, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.selected.tab-border-top:not(:focus) > .tab-border-top-container { + height: 1px +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container { + height: 1px +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.dirty-border-top:not(:focus) > .tab-border-top-container { + height: calc(var(--vscode-workbench-tabs-font-size) * 0.153846) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-shrink > .tab-label > .monaco-icon-label-container::after, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fixed > .tab-label > .monaco-icon-label-container::after { + width: calc(var(--vscode-workbench-tabs-font-size) * 0.384615); + padding: 0; + top: 1px; + bottom: 1px; + height: calc(100% - calc(var(--vscode-workbench-tabs-font-size) * 0.153846)) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-shrink > .tab-label.tab-label-has-badge::after, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fixed > .tab-label.tab-label-has-badge::after { + margin-right: calc(var(--vscode-workbench-tabs-font-size) * 0.384615) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-shrink:not(.tab-actions-left):not(.close-action-off) .tab-label { + padding-right: calc(var(--vscode-workbench-tabs-font-size) * 0.384615) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab > .monaco-icon-label.italic > .monaco-icon-label-container { + padding-right: 1px +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab > .tab-actions { + width: calc(var(--vscode-workbench-tabs-font-size) * 2.153846) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab > .tab-actions > .monaco-action-bar { + width: calc(var(--vscode-workbench-tabs-font-size) * 2.153846) +} +.monaco-workbench .part.editor > .content .editor-group-container.active > .title.tabs .tabs-container > .tab > .tab-actions .action-label.codicon { + font-size: calc(var(--vscode-workbench-tabs-font-size) * 1.230769); + padding: calc(var(--vscode-workbench-tabs-font-size) * 0.153846); + width: calc(var(--vscode-workbench-tabs-font-size) * 1.230769); + height: calc(var(--vscode-workbench-tabs-font-size) * 1.230769) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.close-action-off { + padding-right: calc(var(--vscode-workbench-tabs-font-size) * 0.769231) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-shrink.close-action-off:not(.sticky-compact), .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.sizing-fixed.close-action-off:not(.sticky-compact) { + padding-right: calc(var(--vscode-workbench-tabs-font-size) * 0.384615) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .editor-actions { + padding: 0 calc(var(--vscode-workbench-tabs-font-size) * 0.615385) 0 calc(var(--vscode-workbench-tabs-font-size) * 0.307692) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .editor-actions .action-item { + margin-right: calc(var(--vscode-workbench-tabs-font-size) * 0.307692) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.drop-target-left::after, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.drop-target-right::before { + width: 1px +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.drop-target-left::after { + right: calc(var(--vscode-workbench-tabs-font-size) * -0.076923) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.last-in-row.drop-target-left:not(:last-child)::after { + right: calc(var(--vscode-workbench-tabs-font-size) * 0) +} +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.last-in-row.drop-target-left::after, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.last-in-row + .tab.drop-target-right::before, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab:last-child.drop-target-left::after, .monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab:first-child.drop-target-right::before { + width: calc(var(--vscode-workbench-tabs-font-size) * 0.153846) +} \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts b/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts index b0befd9..7c25771 100644 --- a/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts +++ b/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts @@ -6,2 +6,3 @@ import './media/multieditortabscontrol.css'; +import { FONT } from '../../../../base/common/font.js'; import { isLinux, isMacintosh, isWindows } from '../../../../base/common/platform.js'; @@ -60,2 +61,3 @@ import { BugIndicatingError } from '../../../../base/common/errors.js'; import { applyDragImage } from '../../../../base/browser/ui/dnd/dnd.js'; +import { IConfigurationService } from '../../../../platform/configuration/common/configuration.js'; @@ -96,7 +98,9 @@ export class MultiEditorTabsControl extends EditorTabsControl { - private static readonly TAB_WIDTH = { - compact: 38 as const, - shrink: 80 as const, - fit: 120 as const - }; + private static get TAB_WIDTH() { + return { + compact: FONT.tabsSize38, + shrink: FONT.tabsSize80, + fit: FONT.tabsSize120 + }; + } @@ -154,4 +158,5 @@ export class MultiEditorTabsControl extends EditorTabsControl { @IHostService hostService: IHostService, + @IConfigurationService configurationService: IConfigurationService, ) { - super(parent, editorPartsView, groupsView, groupView, tabsModel, contextMenuService, instantiationService, contextKeyService, keybindingService, notificationService, quickInputService, themeService, editorResolverService, hostService); + super(parent, editorPartsView, groupsView, groupView, tabsModel, contextMenuService, instantiationService, contextKeyService, keybindingService, notificationService, quickInputService, themeService, editorResolverService, hostService, configurationService); diff --git a/src/vs/workbench/browser/parts/media/paneCompositePart.css b/src/vs/workbench/browser/parts/media/paneCompositePart.css index fe0f2ad..195267c 100644 --- a/src/vs/workbench/browser/parts/media/paneCompositePart.css +++ b/src/vs/workbench/browser/parts/media/paneCompositePart.css @@ -369 +369,119 @@ } + + + +/*** Generated for Custom Font Size ***/ + +.monaco-workbench .pane-composite-part .part.panel > .title.has-composite-bar > .title-actions .monaco-action-bar .action-item, .monaco-workbench .pane-composite-part .part.panel > .title.has-composite-bar > .global-actions .monaco-action-bar .action-item, .monaco-workbench .pane-composite-part .part.panel > .title.has-composite-bar > .global-actions-left .monaco-action-bar .action-item { + margin-right: calc(var(--vscode-workbench-bottompane-font-size) * 0.307692) +} +.monaco-workbench .pane-composite-part .part.panel > .title.has-composite-bar > .title-actions .monaco-action-bar .action-item .action-label { + outline-offset: calc(var(--vscode-workbench-bottompane-font-size) * -0.153846) +} +.monaco-workbench .pane-composite-part .part.panel > .header-or-footer { + padding-left: calc(var(--vscode-workbench-bottompane-font-size) * 0.307692); + padding-right: calc(var(--vscode-workbench-bottompane-font-size) * 0.307692) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-label.codicon-more, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-label.codicon-more { + margin-left: calc(var(--vscode-workbench-bottompane-font-size) * 0); + margin-right: calc(var(--vscode-workbench-bottompane-font-size) * 0) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar { + line-height: calc(var(--vscode-workbench-bottompane-font-size) * 2.076923) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item { + padding-left: calc(var(--vscode-workbench-bottompane-font-size) * 0.769231); + padding-right: calc(var(--vscode-workbench-bottompane-font-size) * 0.769231); + font-size: calc(var(--vscode-workbench-bottompane-font-size) * 0.846154); + padding-bottom: calc(var(--vscode-workbench-bottompane-font-size) * 0.153846); + padding-top: calc(var(--vscode-workbench-bottompane-font-size) * 0.153846) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item.icon, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item.icon { + height: calc(var(--vscode-workbench-bottompane-font-size) * 2.692308); + padding: 0 calc(var(--vscode-workbench-bottompane-font-size) * 0.230769) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label:not(.codicon), .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label:not(.codicon) { + width: calc(var(--vscode-workbench-bottompane-font-size) * 1.230769); + height: calc(var(--vscode-workbench-bottompane-font-size) * 1.230769) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before, .monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after { + width: calc(var(--vscode-workbench-bottompane-font-size) * 0.153846); + height: calc(var(--vscode-workbench-bottompane-font-size) * 1.846154) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before { + left: 1px; + margin-left: calc(var(--vscode-workbench-bottompane-font-size) * -0.153846) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after { + right: 1px; + margin-right: calc(var(--vscode-workbench-bottompane-font-size) * -0.153846) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:first-of-type::before, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:first-of-type::before { + left: calc(var(--vscode-workbench-bottompane-font-size) * 0.153846); + margin-left: calc(var(--vscode-workbench-bottompane-font-size) * -0.153846) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type::after, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type::after { + right: calc(var(--vscode-workbench-bottompane-font-size) * 0.153846); + margin-right: calc(var(--vscode-workbench-bottompane-font-size) * -0.153846) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label { + padding: calc(var(--vscode-workbench-bottompane-font-size) * 0.153846) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .badge, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .badge { + margin-left: calc(var(--vscode-workbench-bottompane-font-size) * 0.153846) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge { + margin-left: calc(var(--vscode-workbench-bottompane-font-size) * 0) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .badge .badge-content, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .badge .badge-content { + padding: calc(var(--vscode-workbench-bottompane-font-size) * 0.230769) calc(var(--vscode-workbench-bottompane-font-size) * 0.384615); + font-size: calc(var(--vscode-workbench-bottompane-font-size) * 0.769231); + min-width: calc(var(--vscode-workbench-bottompane-font-size) * 1.230769); + height: calc(var(--vscode-workbench-bottompane-font-size) * 1.230769); + line-height: calc(var(--vscode-workbench-bottompane-font-size) * 0.769231) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .icon-badge .badge-content { + padding: calc(var(--vscode-workbench-bottompane-font-size) * 0.230769) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact .badge-content, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact .badge-content { + top: calc(var(--vscode-workbench-bottompane-font-size) * 1.307692); + right: calc(var(--vscode-workbench-bottompane-font-size) * 0); + font-size: calc(var(--vscode-workbench-bottompane-font-size) * 0.692308); + min-width: calc(var(--vscode-workbench-bottompane-font-size) * 1); + height: calc(var(--vscode-workbench-bottompane-font-size) * 1); + line-height: calc(var(--vscode-workbench-bottompane-font-size) * 1); + padding: 0 calc(var(--vscode-workbench-bottompane-font-size) * 0.153846) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.compact-content .badge-content, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.compact-content .badge-content { + font-size: calc(var(--vscode-workbench-bottompane-font-size) * 0.615385); + padding: 0 calc(var(--vscode-workbench-bottompane-font-size) * 0.230769) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.progress-badge .badge-content::before, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.progress-badge .badge-content::before { + mask-size: calc(var(--vscode-workbench-bottompane-font-size) * 1); + -webkit-mask-size: calc(var(--vscode-workbench-bottompane-font-size) * 1) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator { + top: calc(var(--vscode-workbench-bottompane-font-size) * -0.307692); + left: calc(var(--vscode-workbench-bottompane-font-size) * 0.769231); + width: calc(100% - calc(var(--vscode-workbench-bottompane-font-size) * 1.538462)) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .active-item-indicator, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .active-item-indicator { + top: 1px; + left: calc(var(--vscode-workbench-bottompane-font-size) * 0.153846); + width: calc(100% - calc(var(--vscode-workbench-bottompane-font-size) * 0.307692)) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .active-item-indicator:before, .monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer.header > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .active-item-indicator:before, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer.header > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before { + bottom: calc(var(--vscode-workbench-bottompane-font-size) * 0.153846) +} +.monaco-workbench .pane-composite-part .part.panel > .header-or-footer.footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .active-item-indicator:before, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer.footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before { + top: calc(var(--vscode-workbench-bottompane-font-size) * 0.153846) +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, .monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label { + outline: var(--vscode-contrastActiveBorder, unset) solid 1px +} +.monaco-workbench .pane-composite-part .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label, .monaco-workbench .pane-composite-part .part.panel > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label { + outline: var(--vscode-contrastActiveBorder, unset) dashed 1px +} +.monaco-workbench .pane-composite-part .part.panel .empty-pane-message-area .empty-pane-message { + margin: calc(var(--vscode-workbench-bottompane-font-size) * 0.923077) +} \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/panel/media/panelpart.css b/src/vs/workbench/browser/parts/panel/media/panelpart.css index e1c147d..63d0e10 100644 --- a/src/vs/workbench/browser/parts/panel/media/panelpart.css +++ b/src/vs/workbench/browser/parts/panel/media/panelpart.css @@ -10,2 +10,7 @@ +.monaco-workbench .part.panel > .content { + font-family: var(--vscode-workbench-bottompane-font-family, inherit); + font-size: 13px; +} + .monaco-workbench .part.panel.bottom .composite.title { @@ -100 +105,51 @@ } + + + +/*** Handcrafted for Custom Font Size ***/ + +.monaco-workbench .part.panel.bottom { + font-size: var(--vscode-workbench-bottompane-font-size) +} + +.monaco-workbench .pane-composite-part.bottom .monaco-action-bar .action-label, +.monaco-workbench .pane-composite-part.bottom .monaco-action-bar .action-item .keybinding { + font-size: calc(var(--vscode-workbench-bottompane-font-size) * 0.8461538462); + padding: calc(var(--vscode-workbench-bottompane-font-size) * 0.2307692308); +} + +.monaco-workbench .pane-composite-part.bottom > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item, +.monaco-workbench .pane-composite-part.bottom > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item { + padding-left: calc(var(--vscode-workbench-bottompane-font-size) * 0.7692307692); + padding-right: calc(var(--vscode-workbench-bottompane-font-size) * 0.7692307692); + font-size: calc(var(--vscode-workbench-bottompane-font-size) * 0.8461538462); + padding-bottom: calc(var(--vscode-workbench-bottompane-font-size) * 0.1538461538); + padding-top: calc(var(--vscode-workbench-bottompane-font-size) * 0.1538461538); +} + +.monaco-workbench .pane-composite-part.bottom > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .badge, +.monaco-workbench .pane-composite-part.bottom > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .badge { + margin-left: calc(var(--vscode-workbench-bottompane-font-size) * 0.1538461538); + font-size: calc(var(--vscode-workbench-bottompane-font-size) * 0.8461538462); +} + +.monaco-workbench .pane-composite-part.bottom .monaco-action-bar .action-item .codicon { + width: calc(var(--vscode-workbench-bottompane-font-size) * 1.2307692308); + height: calc(var(--vscode-workbench-bottompane-font-size) * 1.2307692308); +} + +.monaco-workbench .pane-composite-part.bottom .codicon[class*='codicon-'] { + font-size: calc(var(--vscode-workbench-bottompane-font-size) * 1.2307692308); +} + +.monaco-workbench .pane-composite-part.bottom .monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] { + font-size: calc(var(--vscode-workbench-bottompane-font-size) * 0.9230769231); + line-height: calc(var(--vscode-workbench-bottompane-font-size) * 1.2307692308); +} + + +/*** Generated for Custom Font Size ***/ + +.monaco-workbench .part.panel > .content { + font-size: calc(var(--vscode-workbench-bottompane-font-size) * 1) +} \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/panel/panelPart.ts b/src/vs/workbench/browser/parts/panel/panelPart.ts index 9afcf59..a8d4c2e 100644 --- a/src/vs/workbench/browser/parts/panel/panelPart.ts +++ b/src/vs/workbench/browser/parts/panel/panelPart.ts @@ -34,2 +34,3 @@ import { IConfigurationService } from '../../../../platform/configuration/common import { Extensions } from '../../panecomposite.js'; +import { FONT, getFontSize, updatePanelSize as updateBottomPaneSize } from '../../../../base/common/font.js'; @@ -117,2 +118,8 @@ export class PanelPart extends AbstractPaneCompositePart { } + if (e.affectsConfiguration('workbench.bottomPane.experimental.fontFamily')) { + this.applyPanelFontFamily(); + } + if (e.affectsConfiguration('workbench.bottomPane.experimental.fontSize')) { + this.applyPanelFontSize(); + } })); @@ -133,2 +140,37 @@ export class PanelPart extends AbstractPaneCompositePart { } + + this.applyPanelFontFamily(container); + this.applyPanelFontSize(container); + } + + private applyPanelFontFamily(container?: HTMLElement): void { + const target = container ?? this.getContainer(); + if (!target) { + return; + } + + const family = this.configurationService.getValue('workbench.bottomPane.experimental.fontFamily'); + + if (family) { + target.style.setProperty('--vscode-workbench-bottompane-font-family', family); + } else { + target.style.removeProperty('--vscode-workbench-bottompane-font-family'); + } + + this._onDidChange.fire(undefined); // Signal grid that size constraints changed + } + + private applyPanelFontSize(container?: HTMLElement): void { + const target = container ?? this.getContainer(); + if (!target) { + return; + } + + const configuredSize = getFontSize(this.configurationService, 'workbench.bottomPane.experimental.fontSize', FONT.defaultBottomPaneSize); + + updateBottomPaneSize(configuredSize); + + target.style.setProperty('--vscode-workbench-bottompane-font-size', `${FONT.bottomPaneSize}px`); + + this._onDidChange.fire(undefined); // Signal grid that size constraints changed } diff --git a/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css b/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css index decb51a..d0db436 100644 --- a/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css +++ b/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css @@ -15,3 +15,3 @@ .monaco-workbench .part.sidebar .title-actions .action-item { - margin-right: 4px; + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.308); } @@ -22,4 +22,10 @@ +.monaco-workbench .part.sidebar > .content { + font-size: var(--vscode-workbench-sidebar-font-size); + line-height: 1.4em; +} + .monaco-workbench .part.sidebar > .title > .title-label h2 { text-transform: uppercase; + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846); } @@ -43,4 +49,4 @@ .monaco-workbench .viewlet .collapsible.header .actions .action-label { - width: 28px; - background-size: 16px; + width: calc(var(--vscode-workbench-sidebar-font-size) * 2.154); + background-size: calc(var(--vscode-workbench-sidebar-font-size) * 1.231); background-position: center center; @@ -48,3 +54,3 @@ margin-right: 0; - height: 22px; + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692); } @@ -60,6 +66,6 @@ .monaco-workbench .viewlet .collapsible.header .action-label { - margin-right: 0.2em; + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.2); background-repeat: no-repeat; - width: 16px; - height: 16px; + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.231); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.231); } @@ -86,3 +92,3 @@ position: absolute; - left: 5px; /* place icon in center */ + left: calc(var(--vscode-workbench-sidebar-font-size) * 0.385); /* place icon in center */ } @@ -124,3 +130,7 @@ .monaco-workbench .sidebar.pane-composite-part > .title.has-composite-bar > .title-actions .monaco-action-bar .action-item { - max-width: 150px; + max-width: calc(var(--vscode-workbench-sidebar-font-size) * 11.538); } + +.monaco-workbench .part.sidebar > .content { + font-family: var(--vscode-workbench-sidebar-font-family, inherit); +} \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/sidebar/sidebarPart.ts b/src/vs/workbench/browser/parts/sidebar/sidebarPart.ts index 101b9c6..970cdaa 100644 --- a/src/vs/workbench/browser/parts/sidebar/sidebarPart.ts +++ b/src/vs/workbench/browser/parts/sidebar/sidebarPart.ts @@ -36,2 +36,3 @@ import { VisibleViewContainersTracker } from '../visibleViewContainersTracker.js import { Extensions } from '../../panecomposite.js'; +import { FONT, getFontSize, updateSidebarSize } from '../../../../base/common/font.js'; @@ -40,2 +41,3 @@ export class SidebarPart extends AbstractPaneCompositePart { static readonly activeViewletSettingsKey = 'workbench.sidebar.activeviewletid'; + static readonly fontSizeSettingsKey = 'workbench.sideBar.experimental.fontSize'; @@ -126,2 +128,8 @@ export class SidebarPart extends AbstractPaneCompositePart { } + if (e.affectsConfiguration(SidebarPart.fontSizeSettingsKey)) { + this.applySidebarFontSize(); + } + if (e.affectsConfiguration('workbench.sideBar.experimental.fontFamily')) { + this.applySidebarFontFamily(); + } })); @@ -178,2 +186,5 @@ export class SidebarPart extends AbstractPaneCompositePart { container.style.outlineColor = this.getColor(SIDE_BAR_DRAG_AND_DROP_BACKGROUND) ?? ''; + + this.applySidebarFontSize(container); + this.applySidebarFontFamily(container); } @@ -320,2 +331,34 @@ export class SidebarPart extends AbstractPaneCompositePart { + private applySidebarFontFamily(container?: HTMLElement): void { + const target = container ?? this.getContainer(); + if (!target) { + return; + } + + const family = this.configurationService.getValue('workbench.sideBar.experimental.fontFamily'); + + if (family) { + target.style.setProperty('--vscode-workbench-sidebar-font-family', family); + } else { + target.style.removeProperty('--vscode-workbench-sidebar-font-family'); + } + + this._onDidChange.fire(undefined); // Signal grid that size constraints changed + } + + private applySidebarFontSize(container?: HTMLElement): void { + const target = container ?? this.getContainer(); + if (!target) { + return; + } + + const configuredSize = getFontSize(this.configurationService, SidebarPart.fontSizeSettingsKey, FONT.defaultSidebarSize); + + updateSidebarSize(configuredSize); + + target.style.setProperty('--vscode-workbench-sidebar-font-size', `${FONT.sidebarSize}px`); + + this._onDidChange.fire(undefined); // Signal grid that size constraints changed + } + private registerActions(): void { diff --git a/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css b/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css index 7faaf9e..6cd8fbd 100644 --- a/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css +++ b/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css @@ -11,2 +11,3 @@ font-size: 12px; + font-family: var(--vscode-workbench-statusbar-font-family, inherit); display: flex; @@ -236 +237,64 @@ } + + + +/*** Handcrafted for Custom Font Size ***/ + +.monaco-workbench .part.statusbar .codicon[class*='codicon-'] { + font-size: calc(var(--vscode-workbench-statusbar-font-size) * 1.333333); +} + + + +/*** Generated for Custom Font Size ***/ + +.monaco-workbench .part.statusbar { + height: calc(var(--vscode-workbench-statusbar-font-size) * 1.833333); + font-size: calc(var(--vscode-workbench-statusbar-font-size) * 1) +} +.monaco-workbench .part.statusbar:not(:focus).status-border-top::after { + height: 1px +} +.monaco-workbench .part.statusbar > .items-container > .statusbar-item { + line-height: calc(var(--vscode-workbench-statusbar-font-size) * 1.833333) +} +.monaco-workbench .part.statusbar > .items-container > .statusbar-item.has-beak > .status-bar-item-beak-container { + left: calc(50% - calc(var(--vscode-workbench-statusbar-font-size) * 0.416667)); + top: calc(var(--vscode-workbench-statusbar-font-size) * -0.416667); + width: calc(var(--vscode-workbench-statusbar-font-size) * 0.833333); + height: calc(var(--vscode-workbench-statusbar-font-size) * 0.416667) +} +.monaco-workbench .part.statusbar > .items-container > .statusbar-item > .statusbar-item-label { + margin-right: calc(var(--vscode-workbench-statusbar-font-size) * 0.25); + margin-left: calc(var(--vscode-workbench-statusbar-font-size) * 0.25); + padding: 0 calc(var(--vscode-workbench-statusbar-font-size) * 0.416667); + outline-width: calc(var(--vscode-workbench-statusbar-font-size) * 0) +} +.monaco-workbench .part.statusbar > .items-container > .statusbar-item.compact-left > .statusbar-item-label { + margin-right: calc(var(--vscode-workbench-statusbar-font-size) * 0.416667); + padding: 0 calc(var(--vscode-workbench-statusbar-font-size) * 0.25) +} +.monaco-workbench .part.statusbar > .items-container > .statusbar-item.compact-right > .statusbar-item-label { + margin-left: calc(var(--vscode-workbench-statusbar-font-size) * 0.416667); + padding: 0 calc(var(--vscode-workbench-statusbar-font-size) * 0.25) +} +.monaco-workbench .part.statusbar > .items-container > .statusbar-item.left.first-visible-item > .statusbar-item-label, .monaco-workbench .part.statusbar > .items-container > .statusbar-item.right.last-visible-item > .statusbar-item-label, .monaco-workbench .part.statusbar > .items-container > .statusbar-item.has-background-color > .statusbar-item-label { + padding-left: calc(var(--vscode-workbench-statusbar-font-size) * 0.666667); + padding-right: calc(var(--vscode-workbench-statusbar-font-size) * 0.666667) +} +.monaco-workbench .part.statusbar > .items-container > .statusbar-item.compact-left.has-background-color > .statusbar-item-label { + padding-left: calc(var(--vscode-workbench-statusbar-font-size) * 0.25); + padding-right: calc(var(--vscode-workbench-statusbar-font-size) * 0.833333) +} +.monaco-workbench .part.statusbar > .items-container > .statusbar-item.compact-right.has-background-color > .statusbar-item-label { + padding-left: calc(var(--vscode-workbench-statusbar-font-size) * 0.833333); + padding-right: calc(var(--vscode-workbench-statusbar-font-size) * 0.25) +} +.monaco-workbench .part.statusbar > .items-container > .statusbar-item a:active:not(.disabled) { + outline: 1px solid var(--vscode-contrastActiveBorder); + outline-offset: calc(var(--vscode-workbench-statusbar-font-size) * -0.083333) +} +.monaco-workbench .part.statusbar > .items-container > .statusbar-item a:hover:not(.disabled) { + outline: 1px dashed var(--vscode-contrastActiveBorder); + outline-offset: calc(var(--vscode-workbench-statusbar-font-size) * -0.083333) +} \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts b/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts index 18340a8..0a33ce0 100644 --- a/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts +++ b/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts @@ -38,2 +38,4 @@ import { IView } from '../../../../base/browser/ui/grid/grid.js'; import { isManagedHoverTooltipHTMLElement, isManagedHoverTooltipMarkdownString } from '../../../../base/browser/ui/hover/hover.js'; +import { IConfigurationService } from '../../../../platform/configuration/common/configuration.js'; +import { FONT, getFontSize, updateStatusBarSize } from '../../../../base/common/font.js'; @@ -120,3 +122,3 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer { - static readonly HEIGHT = 22; + static get HEIGHT() { return FONT.statusBarSize22; } @@ -126,4 +128,4 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer { readonly maximumWidth: number = Number.POSITIVE_INFINITY; - readonly minimumHeight: number = StatusbarPart.HEIGHT; - readonly maximumHeight: number = StatusbarPart.HEIGHT; + get minimumHeight(): number { return FONT.statusBarSize22; } + get maximumHeight(): number { return FONT.statusBarSize22; } @@ -162,2 +164,3 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer { @IContextKeyService private readonly contextKeyService: IContextKeyService, + @IConfigurationService private readonly configurationService: IConfigurationService, ) { @@ -165,2 +168,11 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer { + this._register(configurationService.onDidChangeConfiguration(e => { + if (e.affectsConfiguration('workbench.statusBar.experimental.fontFamily')) { + this.applyStatusBarFontFamily(); + } + if (e.affectsConfiguration('workbench.statusBar.experimental.fontSize')) { + this.applyStatusBarFontSize(); + } + })); + this.viewModel = this._register(new StatusbarViewModel(storageService)); @@ -429,2 +441,5 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer { + this.applyStatusBarFontFamily(this.element); + this.applyStatusBarFontSize(this.element); + return this.element; @@ -432,2 +447,32 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer { + private applyStatusBarFontFamily(container?: HTMLElement): void { + const target = container ?? this.getContainer(); + if (!target) { + return; + } + const family = this.configurationService.getValue('workbench.statusBar.experimental.fontFamily'); + if (family) { + target.style.setProperty('--vscode-workbench-statusbar-font-family', family); + } else { + target.style.removeProperty('--vscode-workbench-statusbar-font-family'); + } + + this._onDidChange.fire(undefined); // Signal grid that size constraints changed + } + + private applyStatusBarFontSize(container?: HTMLElement): void { + const target = container ?? this.getContainer(); + if (!target) { + return; + } + + const configuredSize = getFontSize(this.configurationService, 'workbench.statusBar.experimental.fontSize', FONT.defaultStatusBarSize); + + updateStatusBarSize(configuredSize); + + target.style.setProperty('--vscode-workbench-statusbar-font-size', `${FONT.statusBarSize}px`); + + this._onDidChange.fire(undefined); // Signal grid that size constraints changed + } + private createInitialStatusbarEntries(): void { @@ -726,4 +771,5 @@ export class MainStatusbarPart extends StatusbarPart { @IContextKeyService contextKeyService: IContextKeyService, + @IConfigurationService configurationService: IConfigurationService, ) { - super(Parts.STATUSBAR_PART, instantiationService, themeService, contextService, storageService, layoutService, contextMenuService, contextKeyService); + super(Parts.STATUSBAR_PART, instantiationService, themeService, contextService, storageService, layoutService, contextMenuService, contextKeyService, configurationService); } @@ -740,3 +786,3 @@ export class AuxiliaryStatusbarPart extends StatusbarPart implements IAuxiliaryS - readonly height = StatusbarPart.HEIGHT; + get height() { return StatusbarPart.HEIGHT; } @@ -751,5 +797,6 @@ export class AuxiliaryStatusbarPart extends StatusbarPart implements IAuxiliaryS @IContextKeyService contextKeyService: IContextKeyService, + @IConfigurationService configurationService: IConfigurationService, ) { const id = AuxiliaryStatusbarPart.COUNTER++; - super(`workbench.parts.auxiliaryStatus.${id}`, instantiationService, themeService, contextService, storageService, layoutService, contextMenuService, contextKeyService); + super(`workbench.parts.auxiliaryStatus.${id}`, instantiationService, themeService, contextService, storageService, layoutService, contextMenuService, contextKeyService, configurationService); } diff --git a/src/vs/workbench/browser/parts/views/media/paneviewlet.css b/src/vs/workbench/browser/parts/views/media/paneviewlet.css index aca98de..5bf9bf7 100644 --- a/src/vs/workbench/browser/parts/views/media/paneviewlet.css +++ b/src/vs/workbench/browser/parts/views/media/paneviewlet.css @@ -87 +87,30 @@ } + + + +.monaco-workbench .part.sidebar .monaco-pane-view .pane > .pane-header.not-collapsible .title, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane > .pane-header.not-collapsible .title { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane > .pane-header > .icon, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane > .pane-header > .icon { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane.pane.horizontal:not(.expanded) > .pane-header > .icon, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane.pane.horizontal:not(.expanded) > .pane-header > .icon { + margin-top: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane > .pane-header h3.title, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane > .pane-header h3.title { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane > .pane-header .description, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane > .pane-header .description { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.769231) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane > .pane-header .description .codicon, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane > .pane-header .description .codicon { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.692308); + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane .monaco-progress-container, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane .monaco-progress-container { + top: calc(var(--vscode-workbench-sidebar-font-size) * -0.153846) +} +.monaco-workbench .part.sidebar .monaco-pane-view .pane:not(.merged-header) .monaco-progress-container, .monaco-workbench .part.auxiliarybar .monaco-pane-view .pane:not(.merged-header) .monaco-progress-container { + top: calc(var(--vscode-workbench-sidebar-font-size) * 1.538462) +} \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/views/treeView.ts b/src/vs/workbench/browser/parts/views/treeView.ts index 1c9305b..6471a0d 100644 --- a/src/vs/workbench/browser/parts/views/treeView.ts +++ b/src/vs/workbench/browser/parts/views/treeView.ts @@ -79,2 +79,3 @@ import { IAccessibleViewInformationService } from '../../../services/accessibili import { Command } from '../../../../editor/common/languages.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -1166,3 +1167,3 @@ class TreeViewDelegate implements IListVirtualDelegate { getHeight(element: ITreeItem): number { - return TreeRenderer.ITEM_HEIGHT; + return FONT.sidebarSize22; } @@ -1242,3 +1243,2 @@ interface ITreeExplorerTemplateData { class TreeRenderer extends Disposable implements ITreeRenderer { - static readonly ITEM_HEIGHT = 22; static readonly TREE_TEMPLATE_ID = 'treeExplorer'; diff --git a/src/vs/workbench/browser/workbench.contribution.ts b/src/vs/workbench/browser/workbench.contribution.ts index 058693c..ee81a59 100644 --- a/src/vs/workbench/browser/workbench.contribution.ts +++ b/src/vs/workbench/browser/workbench.contribution.ts @@ -702,2 +702,85 @@ const registry = Registry.as(ConfigurationExtensions.Con }, + 'workbench.experimental.fontFamily': { + type: 'string', + description: localize('workbench.fontFamily', "Controls the font family in the workbench."), + 'tags': ['experimental'] + }, + 'workbench.experimental.fontSize': { + type: 'number', + default: 13, + minimum: 6, + maximum: 32, + markdownDescription: localize('workbench.fontSize', "Controls the font size in pixels for the workbench."), + 'tags': ['accessibility', 'experimental'] + }, + 'workbench.activityBar.experimental.fontFamily': { + type: 'string', + default: '', + markdownDescription: localize('activityBarFontFamily', "Controls the font family for the activity bar."), + 'tags': ['accessibility', 'experimental'] + }, + 'workbench.activityBar.experimental.fontSize': { + type: 'number', + default: 16, + minimum: 6, + maximum: 32, + markdownDescription: localize('activityBarFontSize', "Controls the font size in pixels for the activity bar."), + 'tags': ['accessibility', 'experimental'] + }, + 'workbench.bottomPane.experimental.fontFamily': { + type: 'string', + default: '', + markdownDescription: localize('bottomPaneFontFamily', "Controls the font family for the bottom panel."), + 'tags': ['accessibility', 'experimental'] + }, + 'workbench.bottomPane.experimental.fontSize': { + type: 'number', + default: 13, + minimum: 6, + maximum: 32, + markdownDescription: localize('bottomPaneFontSize', "Controls the font size in pixels for the bottom panel."), + 'tags': ['accessibility', 'experimental'] + }, + 'workbench.sideBar.experimental.fontFamily': { + type: 'string', + default: '', + markdownDescription: localize('sideBarFontFamily', "Controls the font family for the side bars."), + 'tags': ['accessibility', 'experimental'] + }, + 'workbench.sideBar.experimental.fontSize': { + type: 'number', + default: 13, + minimum: 6, + maximum: 32, + markdownDescription: localize('sideBarFontSize', "Controls the font size in pixels for the side bars."), + tags: ['accessibility', 'experimental'] + }, + 'workbench.statusBar.experimental.fontFamily': { + type: 'string', + default: '', + markdownDescription: localize('statusBarFontFamily', "Controls the font family for the status bar."), + 'tags': ['accessibility', 'experimental'] + }, + 'workbench.statusBar.experimental.fontSize': { + type: 'number', + default: 12, + minimum: 6, + maximum: 32, + markdownDescription: localize('statusBarFontSize', "Controls the font size in pixels for the status bar."), + 'tags': ['accessibility', 'experimental'] + }, + 'workbench.tabs.experimental.fontFamily': { + type: 'string', + default: '', + markdownDescription: localize('tabsFontFamily', "Controls the font family in editor tabs."), + 'tags': ['accessibility', 'experimental'] + }, + 'workbench.tabs.experimental.fontSize': { + type: 'number', + default: 13, + minimum: 6, + maximum: 32, + markdownDescription: localize('tabsFontSize', "Controls the font size in pixels for editor tabs."), + 'tags': ['accessibility', 'experimental'] + }, 'workbench.settings.editor': { diff --git a/src/vs/workbench/browser/workbench.ts b/src/vs/workbench/browser/workbench.ts index 10e2c3e..74e3bbe 100644 --- a/src/vs/workbench/browser/workbench.ts +++ b/src/vs/workbench/browser/workbench.ts @@ -9,2 +9,3 @@ import { Event, Emitter, setGlobalLeakWarningThreshold } from '../../base/common import { RunOnceScheduler, timeout } from '../../base/common/async.js'; +import { FONT, getFontSize, updateDefaultSize } from '../../base/common/font.js'; import { isFirefox, isSafari, isChrome } from '../../base/browser/browser.js'; @@ -19,3 +20,3 @@ import { Position, Parts, IWorkbenchLayoutService, positionToString } from '../s import { IStorageService, WillSaveStateReason, StorageScope, StorageTarget } from '../../platform/storage/common/storage.js'; -import { IConfigurationChangeEvent, IConfigurationService } from '../../platform/configuration/common/configuration.js'; +import { IConfigurationService } from '../../platform/configuration/common/configuration.js'; import { IInstantiationService } from '../../platform/instantiation/common/instantiation.js'; @@ -233,3 +234,13 @@ export class Workbench extends Layout { // Configuration changes - this._register(configurationService.onDidChangeConfiguration(e => this.updateFontAliasing(e, configurationService))); + this._register(configurationService.onDidChangeConfiguration(e => { + if (e.affectsConfiguration('workbench.fontAliasing')) { + this.updateFontAliasing(configurationService); + } + if (e.affectsConfiguration('workbench.experimental.fontFamily')) { + this.updateFontFamily(configurationService); + } + if (e.affectsConfiguration('workbench.experimental.fontSize')) { + this.updateFontSize(configurationService); + } + })); @@ -270,3 +281,3 @@ export class Workbench extends Layout { private fontAliasing: 'default' | 'antialiased' | 'none' | 'auto' | undefined; - private updateFontAliasing(e: IConfigurationChangeEvent | undefined, configurationService: IConfigurationService) { + private updateFontAliasing(configurationService: IConfigurationService) { if (!isMacintosh) { @@ -275,6 +286,2 @@ export class Workbench extends Layout { - if (e && !e.affectsConfiguration('workbench.fontAliasing')) { - return; - } - const aliasing = configurationService.getValue<'default' | 'antialiased' | 'none' | 'auto'>('workbench.fontAliasing'); @@ -296,2 +303,31 @@ export class Workbench extends Layout { + private fontFamily: string | undefined; + private updateFontFamily(configurationService: IConfigurationService) { + let family = configurationService.getValue('workbench.experimental.fontFamily'); + + if (this.fontFamily === family) { + return; + } + + this.fontFamily = family; + + if (family) { + this.mainContainer.style.setProperty('--vscode-workbench-font-family', family); + } else { + this.mainContainer.style.removeProperty('--vscode-workbench-font-family'); + } + } + + private updateFontSize(configurationService: IConfigurationService) { + const configuredSize = getFontSize(configurationService, 'workbench.experimental.fontSize', 13); + + if (FONT.defaultSize === configuredSize) { + return; + } + + updateDefaultSize(configuredSize); + + this.mainContainer.style.setProperty('--vscode-workbench-font-size', `${FONT.defaultSize}px`); + } + private restoreFontInfo(storageService: IStorageService, configurationService: IConfigurationService): void { @@ -339,3 +375,6 @@ export class Workbench extends Layout { // Apply font aliasing - this.updateFontAliasing(undefined, configurationService); + this.updateFontAliasing(configurationService); + + this.updateFontFamily(configurationService); + this.updateFontSize(configurationService); diff --git a/src/vs/workbench/contrib/callHierarchy/browser/callHierarchyTree.ts b/src/vs/workbench/contrib/callHierarchy/browser/callHierarchyTree.ts index 6f58865..3ab0ee4 100644 --- a/src/vs/workbench/contrib/callHierarchy/browser/callHierarchyTree.ts +++ b/src/vs/workbench/contrib/callHierarchy/browser/callHierarchyTree.ts @@ -17,2 +17,3 @@ import { localize } from '../../../../nls.js'; import { ThemeIcon } from '../../../../base/common/themables.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -137,3 +138,3 @@ export class VirtualDelegate implements IListVirtualDelegate { getHeight(_element: Call): number { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsViewer.ts b/src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsViewer.ts index eb17488..1a005a7 100644 --- a/src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsViewer.ts +++ b/src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsViewer.ts @@ -45,2 +45,3 @@ import { AgentSessionProviders, getAgentSessionTime } from './agentSessions.js'; import { AgentSessionsGrouping } from './agentSessionsFilter.js'; +import { FONT } from '../../../../../base/common/font.js'; @@ -508,11 +509,8 @@ export class AgentSessionsListDelegate implements IListVirtualDelegate { getHeight(element: SectionItem) { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatChangesSummaryPart.ts b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatChangesSummaryPart.ts index cc7bb15..f260d0e 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatChangesSummaryPart.ts +++ b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatChangesSummaryPart.ts @@ -33,2 +33,3 @@ import { ResourcePool } from './chatCollections.js'; import { IChatContentPart, IChatContentPartRenderContext } from './chatContentParts.js'; +import { FONT } from '../../../../../../base/common/font.js'; @@ -244,3 +245,3 @@ class CollapsibleChangesSummaryListDelegate implements IListVirtualDelegate { getHeight(element: IChatTodo): number { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatTreeContentPart.ts b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatTreeContentPart.ts index 703940e..e0fa9eb 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatTreeContentPart.ts +++ b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatTreeContentPart.ts @@ -12,2 +12,3 @@ import { IAsyncDataSource, ITreeNode } from '../../../../../../base/browser/ui/t import { Event } from '../../../../../../base/common/event.js'; +import { FONT } from '../../../../../../base/common/font.js'; import { Disposable, DisposableStore, IDisposable } from '../../../../../../base/common/lifecycle.js'; @@ -155,6 +156,5 @@ export class TreePool extends Disposable { class ChatListTreeDelegate implements IListVirtualDelegate { - static readonly ITEM_HEIGHT = 22; getHeight(element: IChatResponseProgressFileTreeData): number { - return ChatListTreeDelegate.ITEM_HEIGHT; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/media/chatViewPane.css b/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/media/chatViewPane.css index f57aca1..2c34fb8 100644 --- a/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/media/chatViewPane.css +++ b/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/media/chatViewPane.css @@ -161 +161,68 @@ } + + + +.monaco-workbench .part.sidebar .chat-viewpane.has-sessions-control .agent-sessions-container, .monaco-workbench .part.auxiliarybar .chat-viewpane.has-sessions-control .agent-sessions-container { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154); + letter-spacing: calc(var(--vscode-workbench-sidebar-font-size) * 0.038462); + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .agent-sessions-title-container, .monaco-workbench .part.auxiliarybar .agent-sessions-title-container { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154); + letter-spacing: calc(var(--vscode-workbench-sidebar-font-size) * 0.038462) +} +.monaco-workbench .part.sidebar .agent-sessions-toolbar, .monaco-workbench .part.auxiliarybar .agent-sessions-toolbar { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .action-item, .monaco-workbench .part.auxiliarybar .action-item { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .chat-viewpane.has-sessions-control.sessions-control-orientation-stacked, .monaco-workbench .part.auxiliarybar .chat-viewpane.has-sessions-control.sessions-control-orientation-stacked { + max-width: calc(var(--vscode-workbench-sidebar-font-size) * 73.076923) +} +.monaco-workbench .part.sidebar .agent-sessions-container, .monaco-workbench .part.auxiliarybar .agent-sessions-container { + max-width: calc(var(--vscode-workbench-sidebar-font-size) * 73.076923) +} +.monaco-workbench .part.sidebar .chat-viewpane.has-sessions-control.sessions-control-orientation-sidebyside, .monaco-workbench .part.auxiliarybar .chat-viewpane.has-sessions-control.sessions-control-orientation-sidebyside { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .agent-sessions-new-button-container, .monaco-workbench .part.auxiliarybar .agent-sessions-new-button-container { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .chat-viewpane.has-sessions-control, .monaco-workbench .part.auxiliarybar .chat-viewpane.has-sessions-control { + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) 0 calc(var(--vscode-workbench-sidebar-font-size) * 1.538462); + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) 0 calc(var(--vscode-workbench-sidebar-font-size) * 1.076923); + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.615385); + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.615385); + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692); + padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .agent-sessions-title-container, .monaco-workbench .part.auxiliarybar .agent-sessions-title-container { + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) 0 calc(var(--vscode-workbench-sidebar-font-size) * 1.538462) +} +.monaco-workbench .part.sidebar .agent-session-section, .monaco-workbench .part.auxiliarybar .agent-session-section { + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) 0 calc(var(--vscode-workbench-sidebar-font-size) * 1.076923) +} +.monaco-workbench .part.sidebar &.sessions-control-orientation-sidebyside.chat-view-position-right, .monaco-workbench .part.auxiliarybar &.sessions-control-orientation-sidebyside.chat-view-position-right { + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.615385); + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .agent-sessions-title-container, .monaco-workbench .part.auxiliarybar .agent-sessions-title-container { + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .agent-session-section, .monaco-workbench .part.auxiliarybar .agent-session-section { + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar &.activity-bar-location-other.chat-view-location-auxiliarybar, .monaco-workbench .part.auxiliarybar &.activity-bar-location-other.chat-view-location-auxiliarybar { + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692); + padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .agent-sessions-title-container, .monaco-workbench .part.auxiliarybar .agent-sessions-title-container { + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar &.sessions-control-orientation-sidebyside.chat-view-position-right, .monaco-workbench .part.auxiliarybar &.sessions-control-orientation-sidebyside.chat-view-position-right { + padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .agent-sessions-title-container, .monaco-workbench .part.sidebar .agent-session-section, .monaco-workbench .part.auxiliarybar .agent-sessions-title-container, .monaco-workbench .part.auxiliarybar .agent-session-section { + padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} \ No newline at end of file diff --git a/src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.ts b/src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.ts index c6298b3..8fcab5f 100644 --- a/src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.ts +++ b/src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.ts @@ -15,2 +15,3 @@ import { safeIntl } from '../../../../../base/common/date.js'; import { createMatches, FuzzyScore } from '../../../../../base/common/filters.js'; +import { FONT } from '../../../../../base/common/font.js'; import { ThemeIcon } from '../../../../../base/common/themables.js'; @@ -160,3 +161,3 @@ export class DocumentSymbolVirtualDelegate implements IListVirtualDelegate getHeight(_element: BreakpointTreeElement): number { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/debug/browser/callStackView.ts b/src/vs/workbench/contrib/debug/browser/callStackView.ts index 35c9c1e..f8bf9c5 100644 --- a/src/vs/workbench/contrib/debug/browser/callStackView.ts +++ b/src/vs/workbench/contrib/debug/browser/callStackView.ts @@ -22,2 +22,3 @@ import { Event } from '../../../../base/common/event.js'; import { createMatches, FuzzyScore, IMatch } from '../../../../base/common/filters.js'; +import { FONT } from '../../../../base/common/font.js'; import { DisposableStore, dispose, IDisposable } from '../../../../base/common/lifecycle.js'; @@ -898,9 +899,9 @@ class CallStackDelegate implements IListVirtualDelegate { if (element instanceof StackFrame && element.presentationHint === 'label') { - return 16; + return FONT.sidebarSize16; } if (element instanceof ThreadAndSessionIds || element instanceof Array) { - return 16; + return FONT.sidebarSize16; } - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/debug/browser/callStackWidget.ts b/src/vs/workbench/contrib/debug/browser/callStackWidget.ts index 42e4cbe..bfaf21e 100644 --- a/src/vs/workbench/contrib/debug/browser/callStackWidget.ts +++ b/src/vs/workbench/contrib/debug/browser/callStackWidget.ts @@ -13,2 +13,3 @@ import { Codicon } from '../../../../base/common/codicons.js'; import { Emitter, Event } from '../../../../base/common/event.js'; +import { FONT } from '../../../../base/common/font.js'; import { Disposable, DisposableStore, IDisposable, toDisposable } from '../../../../base/common/lifecycle.js'; @@ -84,3 +85,3 @@ class WrappedCallStackFrame extends CallStackFrame implements IFrameLikeItem { public readonly height = derived(reader => { - return this.collapsed.read(reader) ? CALL_STACK_WIDGET_HEADER_HEIGHT : CALL_STACK_WIDGET_HEADER_HEIGHT + this.editorHeight.read(reader); + return this.collapsed.read(reader) ? FONT.sidebarSize24 : FONT.sidebarSize24 + this.editorHeight.read(reader); }); @@ -96,3 +97,3 @@ class WrappedCustomStackFrame implements IFrameLikeItem { public readonly height = derived(reader => { - const headerHeight = this.original.showHeader.read(reader) ? CALL_STACK_WIDGET_HEADER_HEIGHT : 0; + const headerHeight = this.original.showHeader.read(reader) ? FONT.sidebarSize24 : 0; return this.collapsed.read(reader) ? headerHeight : headerHeight + this.original.height.read(reader); @@ -267,3 +268,3 @@ class StackDelegate implements IListVirtualDelegate { if (element instanceof SkippedCallFrames) { - return CALL_STACK_WIDGET_HEADER_HEIGHT; + return FONT.sidebarSize24; } @@ -322,4 +323,2 @@ const makeFrameElements = () => dom.h('div.multiCallStackFrame', [ -export const CALL_STACK_WIDGET_HEADER_HEIGHT = 24; - interface IAbstractFrameRendererTemplateData { diff --git a/src/vs/workbench/contrib/debug/browser/debugHover.ts b/src/vs/workbench/contrib/debug/browser/debugHover.ts index fe8ae2b..5830976 100644 --- a/src/vs/workbench/contrib/debug/browser/debugHover.ts +++ b/src/vs/workbench/contrib/debug/browser/debugHover.ts @@ -15,2 +15,3 @@ import { coalesce } from '../../../../base/common/arrays.js'; import { CancellationToken, CancellationTokenSource } from '../../../../base/common/cancellation.js'; +import { FONT } from '../../../../base/common/font.js'; import { KeyCode } from '../../../../base/common/keyCodes.js'; @@ -446,3 +447,3 @@ class DebugHoverDelegate implements IListVirtualDelegate { getHeight(element: IExpression): number { - return 18; + return FONT.sidebarSize18; } diff --git a/src/vs/workbench/contrib/debug/browser/loadedScriptsView.ts b/src/vs/workbench/contrib/debug/browser/loadedScriptsView.ts index 531c114..909a66d 100644 --- a/src/vs/workbench/contrib/debug/browser/loadedScriptsView.ts +++ b/src/vs/workbench/contrib/debug/browser/loadedScriptsView.ts @@ -14,2 +14,3 @@ import { Codicon } from '../../../../base/common/codicons.js'; import { createMatches, FuzzyScore } from '../../../../base/common/filters.js'; +import { FONT } from '../../../../base/common/font.js'; import { normalizeDriveLetter, tildify } from '../../../../base/common/labels.js'; @@ -652,3 +653,3 @@ class LoadedScriptsDelegate implements IListVirtualDelegate { getHeight(element: LoadedScriptsItem): number { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css b/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css index 090c53e..d5c4b9f 100644 --- a/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css +++ b/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css @@ -54 +54,23 @@ } + + + +.monaco-workbench .part.sidebar .debug-toolbar, .monaco-workbench .part.auxiliarybar .debug-toolbar { + height: calc(var(--vscode-workbench-sidebar-font-size) * 2.153846); + padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .debug-toolbar .monaco-action-bar .action-item, .monaco-workbench .part.auxiliarybar .debug-toolbar .monaco-action-bar .action-item { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .debug-toolbar .monaco-action-bar .action-item.select-container, .monaco-workbench .part.auxiliarybar .debug-toolbar .monaco-action-bar .action-item.select-container { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .debug-toolbar .monaco-action-bar .action-item.select-container .monaco-select-box, .monaco-workbench .part.sidebar .start-debug-action-item .select-container .monaco-select-box, .monaco-workbench .part.auxiliarybar .debug-toolbar .monaco-action-bar .action-item.select-container .monaco-select-box, .monaco-workbench .part.auxiliarybar .start-debug-action-item .select-container .monaco-select-box { + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 1.846154) 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .debug-toolbar .drag-area, .monaco-workbench .part.auxiliarybar .debug-toolbar .drag-area { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.538462) +} +.monaco-workbench .part.sidebar .debug-toolbar .monaco-action-bar .action-item .action-label, .monaco-workbench .part.auxiliarybar .debug-toolbar .monaco-action-bar .action-item .action-label { + background-size: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769) +} \ No newline at end of file diff --git a/src/vs/workbench/contrib/debug/browser/media/debugViewlet.css b/src/vs/workbench/contrib/debug/browser/media/debugViewlet.css index 4a627af..a07c974 100644 --- a/src/vs/workbench/contrib/debug/browser/media/debugViewlet.css +++ b/src/vs/workbench/contrib/debug/browser/media/debugViewlet.css @@ -371 +371,90 @@ } + + + +.monaco-workbench .part.sidebar .debug-action.notification:after, .monaco-workbench .part.auxiliarybar .debug-action.notification:after { + width: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538); + height: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538); + top: calc(var(--vscode-workbench-sidebar-font-size) * 0.769231); + right: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) +} +.monaco-workbench .part.sidebar > .title > .title-actions .start-debug-action-item, .monaco-workbench .part.auxiliarybar > .title > .title-actions .start-debug-action-item { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.538462) +} +.monaco-workbench .part.sidebar > .title > .title-actions .start-debug-action-item .codicon-debug-start, .monaco-workbench .part.auxiliarybar > .title > .title-actions .start-debug-action-item .codicon-debug-start { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308); + padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846); + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923); + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) +} +.monaco-workbench .part.sidebar .monaco-action-bar .start-debug-action-item .configuration .monaco-select-box, .monaco-workbench .part.auxiliarybar .monaco-action-bar .start-debug-action-item .configuration .monaco-select-box { + margin-top: calc(var(--vscode-workbench-sidebar-font-size) * 0); + min-width: calc(var(--vscode-workbench-sidebar-font-size) * 6.923077) +} +.monaco-workbench .part.sidebar .monaco-action-bar .start-debug-action-item .configuration .monaco-select-box, .monaco-workbench .part.auxiliarybar .monaco-action-bar .start-debug-action-item .configuration .monaco-select-box { + margin-bottom: calc(var(--vscode-workbench-sidebar-font-size) * 0) +} +.monaco-workbench .part.sidebar .debug-pane .line-number, .monaco-workbench .part.auxiliarybar .debug-pane .line-number { + padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692); + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .debug-pane .call-stack-state-message, .monaco-workbench .part.auxiliarybar .debug-pane .call-stack-state-message { + margin: calc(var(--vscode-workbench-sidebar-font-size) * 0) calc(var(--vscode-workbench-sidebar-font-size) * 0.769231) +} +.monaco-workbench .part.sidebar .debug-pane .call-stack-state-message > .label, .monaco-workbench .part.auxiliarybar .debug-pane .call-stack-state-message > .label { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) calc(var(--vscode-workbench-sidebar-font-size) * 0.153846); + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.692308) +} +.monaco-workbench .part.sidebar .debug-pane .debug-call-stack .thread, .monaco-workbench .part.sidebar .debug-pane .debug-call-stack .session, .monaco-workbench .part.sidebar .debug-pane .debug-call-stack .stack-frame, .monaco-workbench .part.auxiliarybar .debug-pane .debug-call-stack .thread, .monaco-workbench .part.auxiliarybar .debug-pane .debug-call-stack .session, .monaco-workbench .part.auxiliarybar .debug-pane .debug-call-stack .stack-frame { + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077) +} +.monaco-workbench .part.sidebar .debug-pane .debug-call-stack .thread > .state.label, .monaco-workbench .part.sidebar .debug-pane .debug-call-stack .session > .state.label, .monaco-workbench .part.auxiliarybar .debug-pane .debug-call-stack .thread > .state.label, .monaco-workbench .part.auxiliarybar .debug-pane .debug-call-stack .session > .state.label { + margin: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.769231) +} +.monaco-workbench .part.sidebar .debug-pane .monaco-list-row .monaco-action-bar .action-label, .monaco-workbench .part.auxiliarybar .debug-pane .monaco-list-row .monaco-action-bar .action-label { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .debug-pane .session .codicon, .monaco-workbench .part.auxiliarybar .debug-pane .session .codicon { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308); + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .debug-pane .scope, .monaco-workbench .part.auxiliarybar .debug-pane .scope { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154) +} +.monaco-workbench .part.sidebar .debug-pane .monaco-list-row .expression .value, .monaco-workbench .part.auxiliarybar .debug-pane .monaco-list-row .expression .value { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench .part.sidebar .debug-pane .monaco-inputbox > .ibwrapper, .monaco-workbench .part.auxiliarybar .debug-pane .monaco-inputbox > .ibwrapper { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.461538) +} +.monaco-workbench .part.sidebar .debug-pane .monaco-inputbox > .ibwrapper > .input, .monaco-workbench .part.auxiliarybar .debug-pane .monaco-inputbox > .ibwrapper > .input { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0) +} +.monaco-workbench .part.sidebar .debug-view-content .monaco-tl-contents .highlight, .monaco-workbench .part.auxiliarybar .debug-view-content .monaco-tl-contents .highlight { + outline: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) dotted var(--vscode-list-filterMatchBorder); + outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923) +} +.monaco-workbench .part.sidebar .debug-pane .monaco-list-row, .monaco-workbench .part.auxiliarybar .debug-pane .monaco-list-row { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench .part.sidebar .debug-pane .debug-breakpoints .breakpoint, .monaco-workbench .part.auxiliarybar .debug-pane .debug-breakpoints .breakpoint { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * -1.461538) +} +.monaco-workbench .part.sidebar .debug-pane .debug-breakpoints .breakpoint .monaco-custom-toggle, .monaco-workbench .part.auxiliarybar .debug-pane .debug-breakpoints .breakpoint .monaco-custom-toggle { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .debug-pane .debug-breakpoints .breakpoint .monaco-custom-toggle.monaco-checkbox, .monaco-workbench .part.auxiliarybar .debug-pane .debug-breakpoints .breakpoint .monaco-custom-toggle.monaco-checkbox { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615); + min-width: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615); + max-width: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615) +} +.monaco-workbench .part.sidebar .debug-pane .debug-breakpoints .breakpoint > .codicon, .monaco-workbench .part.auxiliarybar .debug-pane .debug-breakpoints .breakpoint > .codicon { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.461538); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.461538); + min-width: calc(var(--vscode-workbench-sidebar-font-size) * 1.461538) +} +.monaco-workbench .part.sidebar .debug-pane .pane-header .breakpoint-warning, .monaco-workbench .part.auxiliarybar .debug-pane .pane-header .breakpoint-warning { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) +} \ No newline at end of file diff --git a/src/vs/workbench/contrib/debug/browser/variablesView.ts b/src/vs/workbench/contrib/debug/browser/variablesView.ts index f18d41b..8863b19 100644 --- a/src/vs/workbench/contrib/debug/browser/variablesView.ts +++ b/src/vs/workbench/contrib/debug/browser/variablesView.ts @@ -18,2 +18,3 @@ import { Codicon } from '../../../../base/common/codicons.js'; import { FuzzyScore, createMatches } from '../../../../base/common/filters.js'; +import { FONT } from '../../../../base/common/font.js'; import { IDisposable, toDisposable } from '../../../../base/common/lifecycle.js'; @@ -370,3 +371,3 @@ class VariablesDelegate implements IListVirtualDelegate { getHeight(element: IExpression | IScope): number { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/debug/browser/watchExpressionsView.ts b/src/vs/workbench/contrib/debug/browser/watchExpressionsView.ts index f290f70..3269808 100644 --- a/src/vs/workbench/contrib/debug/browser/watchExpressionsView.ts +++ b/src/vs/workbench/contrib/debug/browser/watchExpressionsView.ts @@ -42,2 +42,3 @@ import { watchExpressionsAdd, watchExpressionsRemoveAll } from './debugIcons.js' import { VariablesRenderer, VisualizedVariableRenderer } from './variablesView.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -240,3 +241,3 @@ class WatchExpressionsDelegate implements IListVirtualDelegate { getHeight(_element: IExpression): number { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/extensions/browser/extensionFeaturesTab.ts b/src/vs/workbench/contrib/extensions/browser/extensionFeaturesTab.ts index 3cd48a5..3238df4 100644 --- a/src/vs/workbench/contrib/extensions/browser/extensionFeaturesTab.ts +++ b/src/vs/workbench/contrib/extensions/browser/extensionFeaturesTab.ts @@ -40,2 +40,3 @@ import { IHoverService } from '../../../../platform/hover/browser/hover.js'; import { IMarkdownRendererService } from '../../../../platform/markdown/browser/markdownRenderer.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -474,3 +475,3 @@ interface IExtensionFeatureItemTemplateData { class ExtensionFeatureItemDelegate implements IListVirtualDelegate { - getHeight() { return 22; } + getHeight() { return FONT.sidebarSize22; } getTemplateId() { return 'extensionFeatureDescriptor'; } diff --git a/src/vs/workbench/contrib/extensions/browser/extensionsList.ts b/src/vs/workbench/contrib/extensions/browser/extensionsList.ts index 42134f0..4e14bd1 100644 --- a/src/vs/workbench/contrib/extensions/browser/extensionsList.ts +++ b/src/vs/workbench/contrib/extensions/browser/extensionsList.ts @@ -27,4 +27,3 @@ import { IActionViewItemOptions } from '../../../../base/browser/ui/actionbar/ac import { extensionVerifiedPublisherIconColor, verifiedPublisherIcon } from '../../../services/extensionManagement/common/extensionsIcons.js'; - -const EXTENSION_LIST_ELEMENT_HEIGHT = 72; +import { FONT } from '../../../../base/common/font.js'; @@ -44,3 +43,3 @@ export interface ITemplateData { export class Delegate implements IListVirtualDelegate { - getHeight() { return EXTENSION_LIST_ELEMENT_HEIGHT; } + getHeight() { return FONT.sidebarSize72; } getTemplateId() { return 'extension'; } diff --git a/src/vs/workbench/contrib/extensions/browser/extensionsViewer.ts b/src/vs/workbench/contrib/extensions/browser/extensionsViewer.ts index 418cb12..fbb30c5 100644 --- a/src/vs/workbench/contrib/extensions/browser/extensionsViewer.ts +++ b/src/vs/workbench/contrib/extensions/browser/extensionsViewer.ts @@ -40,2 +40,3 @@ import { ILogService } from '../../../../platform/log/common/log.js'; import { isCancellationError } from '../../../../base/common/errors.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -262,3 +263,3 @@ class VirualDelegate implements IListVirtualDelegate { public getHeight(element: IExtensionData): number { - return 62; + return FONT.sidebarSize62; } diff --git a/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts b/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts index 8bfac42..6430bf4 100644 --- a/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts +++ b/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts @@ -69,2 +69,3 @@ import { URI } from '../../../../base/common/uri.js'; import { DEFAULT_ACCOUNT_SIGN_IN_COMMAND } from '../../../services/accounts/browser/defaultAccount.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -735,5 +736,5 @@ export class ExtensionsViewPaneContainer extends ViewPaneContainer .icon-container .extension-badge, .monaco-workbench .part.auxiliarybar .extension-list-item > .icon-container .extension-badge { + bottom: calc(var(--vscode-workbench-sidebar-font-size) * 0.769231); + left: calc(var(--vscode-workbench-sidebar-font-size) * -0.615385) +} +.monaco-workbench .part.sidebar .extension-list-item > .icon-container .extension-badge.extension-icon-badge, .monaco-workbench .part.auxiliarybar .extension-list-item > .icon-container .extension-badge.extension-icon-badge { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308); + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308); + right: calc(var(--vscode-workbench-sidebar-font-size) * 0.384615) +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.461538); + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154) +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header > .restart-required, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header > .restart-required { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header > .restart-required > .extension-restart-required-label, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header > .restart-required > .extension-restart-required-label { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154) +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header .extension-kind-indicator, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header .extension-kind-indicator { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154); + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header > .install-count:not(:empty), .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header > .install-count:not(:empty) { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154); + margin: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) 0 auto +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header > .activation-status:not(:empty), .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header > .activation-status:not(:empty) { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154); + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header > .activation-status .activationTime, .monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header > .activation-status:not(:empty) .codicon, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header > .activation-status .activationTime, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header > .activation-status:not(:empty) .codicon { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header .codicon, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header .codicon { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header .extension-icon-badge, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header .extension-icon-badge { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.076923); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.076923); + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.076923) +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header .extension-icon-badge > .codicon, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header .extension-icon-badge > .codicon { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077) +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .description, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .description { + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154) +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .footer, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .footer { + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.538462); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.846154) +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .footer > .publisher-container, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .footer > .publisher-container { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.846154) +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .footer .publisher > .publisher-name:not(:first-child), .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .footer .publisher > .publisher-name:not(:first-child) { + padding-left: 1px +} +.monaco-workbench .part.sidebar .extension-list-item > .details > .footer > .monaco-action-bar > .actions-container .extension-action.label, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .footer > .monaco-action-bar > .actions-container .extension-action.label { + max-width: calc(var(--vscode-workbench-sidebar-font-size) * 11.538462); + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769) +} +.monaco-workbench .part.sidebar .extension-list-item .footer .monaco-action-bar .action-item.action-dropdown-item.empty > .action-label, .monaco-workbench .part.auxiliarybar .extension-list-item .footer .monaco-action-bar .action-item.action-dropdown-item.empty > .action-label { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .extension-list-item .monaco-action-bar .action-label.icon, .monaco-workbench .part.auxiliarybar .extension-list-item .monaco-action-bar .action-label.icon { + padding: 1px calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .hc-black .extension-list-item .monaco-action-bar .action-label.icon, .monaco-workbench .part.sidebar .hc-light .extension-list-item .monaco-action-bar .action-label.icon, .monaco-workbench .part.auxiliarybar .hc-black .extension-list-item .monaco-action-bar .action-label.icon, .monaco-workbench .part.auxiliarybar .hc-light .extension-list-item .monaco-action-bar .action-label.icon { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0) calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .extension-list-item .monaco-action-bar > .actions-container > .action-item.action-dropdown-item, .monaco-workbench .part.sidebar .extension-list-item .monaco-action-bar > .actions-container > .action-item:not(.action-dropdown-item) > .extension-action, .monaco-workbench .part.auxiliarybar .extension-list-item .monaco-action-bar > .actions-container > .action-item.action-dropdown-item, .monaco-workbench .part.auxiliarybar .extension-list-item .monaco-action-bar > .actions-container > .action-item:not(.action-dropdown-item) > .extension-action { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) +} +.monaco-workbench .part.sidebar .extension-list-item .monaco-action-bar > .actions-container > .action-item.action-dropdown-item > .action-dropdown-item-separator, .monaco-workbench .part.auxiliarybar .extension-list-item .monaco-action-bar > .actions-container > .action-item.action-dropdown-item > .action-dropdown-item-separator { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + margin-top: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .extension-list-item .monaco-action-bar > .actions-container > .action-item.action-dropdown-item > .action-dropdown-item-separator > div, .monaco-workbench .part.auxiliarybar .extension-list-item .monaco-action-bar > .actions-container > .action-item.action-dropdown-item > .action-dropdown-item-separator > div { + height: calc(var(--vscode-workbench-sidebar-font-size) * 0.769231) +} \ No newline at end of file diff --git a/src/vs/workbench/contrib/extensions/browser/media/extensionActions.css b/src/vs/workbench/contrib/extensions/browser/media/extensionActions.css index 6326d45..cc5242a 100644 --- a/src/vs/workbench/contrib/extensions/browser/media/extensionActions.css +++ b/src/vs/workbench/contrib/extensions/browser/media/extensionActions.css @@ -166 +166,26 @@ } + + + +/*** Generated for Custom Font Size ***/ + +.monaco-workbench .part.sidebar .monaco-action-bar .action-item > .action-label.extension-action.label, .monaco-workbench .part.sidebar .monaco-action-bar .action-dropdown-item > .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item > .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-dropdown-item > .action-label.extension-action.label { + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.384615) +} +.monaco-workbench .part.sidebar .monaco-action-bar .action-dropdown-item > .monaco-dropdown .action-label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-dropdown-item > .monaco-dropdown .action-label { + padding: 0 +} +.monaco-workbench .part.sidebar .monaco-action-bar .action-item .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .action-label.extension-action.label { + outline-offset: 1px +} +.monaco-workbench .part.sidebar .monaco-action-bar .action-item .action-label.extension-action.text, .monaco-workbench .part.sidebar .monaco-action-bar .action-item .action-label.extension-action.label, .monaco-workbench .part.sidebar .monaco-action-bar .action-dropdown-item .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .action-label.extension-action.text, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-dropdown-item .action-label.extension-action.label { + width: auto; + height: auto; + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.076923) +} +.monaco-workbench .part.sidebar .monaco-action-bar .action-item:not(.disabled) .action-label.extension-action.text, .monaco-workbench .part.sidebar .monaco-action-bar .action-item:not(.disabled) .action-label.extension-action.label, .monaco-workbench .part.sidebar .monaco-action-bar .action-item .action-label.extension-action.icon, .monaco-workbench .part.sidebar .monaco-action-bar .action-dropdown-item .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item:not(.disabled) .action-label.extension-action.text, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item:not(.disabled) .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .action-label.extension-action.icon, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-dropdown-item .action-label.extension-action.label { + margin-top: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .monaco-action-bar .action-item.disabled .action-label.extension-status-label:before, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item.disabled .action-label.extension-status-label:before { + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} \ No newline at end of file diff --git a/src/vs/workbench/contrib/files/browser/media/explorerviewlet.css b/src/vs/workbench/contrib/files/browser/media/explorerviewlet.css index db5712f..0f75b63 100644 --- a/src/vs/workbench/contrib/files/browser/media/explorerviewlet.css +++ b/src/vs/workbench/contrib/files/browser/media/explorerviewlet.css @@ -108 +108,24 @@ } + + + +.monaco-workbench .part.sidebar .explorer-folders-view .explorer-item, .monaco-workbench .part.sidebar .explorer-folders-view .editor-group, .monaco-workbench .part.auxiliarybar .explorer-folders-view .explorer-item, .monaco-workbench .part.auxiliarybar .explorer-folders-view .editor-group { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308); + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench .part.sidebar .explorer-folders-view .monaco-list-row .explorer-item .monaco-count-badge, .monaco-workbench .part.auxiliarybar .explorer-folders-view .monaco-list-row .explorer-item .monaco-count-badge { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.384615) +} +.monaco-workbench.linux .part.sidebar .explorer-folders-view .explorer-item .monaco-inputbox, .monaco-workbench.mac .part.sidebar .explorer-folders-view .explorer-item .monaco-inputbox, .monaco-workbench.linux .part.auxiliarybar .explorer-folders-view .explorer-item .monaco-inputbox, .monaco-workbench.mac .part.auxiliarybar .explorer-folders-view .explorer-item .monaco-inputbox { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench .part.sidebar .explorer-folders-view .explorer-item .monaco-inputbox > .ibwrapper > .input, .monaco-workbench .part.auxiliarybar .explorer-folders-view .explorer-item .monaco-inputbox > .ibwrapper > .input { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.538462) +} +.monaco-workbench.hc-black .part.sidebar .explorer-folders-view .explorer-item, .monaco-workbench.hc-light .part.sidebar .explorer-folders-view .explorer-item, .monaco-workbench.hc-black .part.auxiliarybar .explorer-folders-view .explorer-item, .monaco-workbench.hc-light .part.auxiliarybar .explorer-folders-view .explorer-item { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.538462) +} +.monaco-workbench .part.sidebar .explorer-folders-view .explorer-item .monaco-inputbox input[type="text"], .monaco-workbench .part.auxiliarybar .explorer-folders-view .explorer-item .monaco-inputbox input[type="text"] { + outline-width: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923); + outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923) +} \ No newline at end of file diff --git a/src/vs/workbench/contrib/files/browser/views/explorerView.ts b/src/vs/workbench/contrib/files/browser/views/explorerView.ts index 5b11568..d276b5c 100644 --- a/src/vs/workbench/contrib/files/browser/views/explorerView.ts +++ b/src/vs/workbench/contrib/files/browser/views/explorerView.ts @@ -511,3 +511,3 @@ export class ExplorerView extends ViewPane implements IExplorerView { }, - paddingBottom: ExplorerDelegate.ITEM_HEIGHT, + paddingBottom: ExplorerDelegate.getHeight(), overrideStyles: this.getLocationBasedColors().listOverrideStyles, diff --git a/src/vs/workbench/contrib/files/browser/views/explorerViewer.ts b/src/vs/workbench/contrib/files/browser/views/explorerViewer.ts index ed7dbe0..dba05e8 100644 --- a/src/vs/workbench/contrib/files/browser/views/explorerViewer.ts +++ b/src/vs/workbench/contrib/files/browser/views/explorerViewer.ts @@ -76,2 +76,3 @@ import { listFilterMatchHighlight, listFilterMatchHighlightBorder } from '../../ import { asCssVariable } from '../../../../../platform/theme/common/colorUtils.js'; +import { FONT } from '../../../../../base/common/font.js'; @@ -79,6 +80,8 @@ export class ExplorerDelegate implements IListVirtualDelegate { - static readonly ITEM_HEIGHT = 22; + static getHeight(): number { + return FONT.sidebarSize22; + } getHeight(element: ExplorerItem): number { - return ExplorerDelegate.ITEM_HEIGHT; + return FONT.sidebarSize22; } @@ -852,3 +855,3 @@ export class FilesRenderer implements ICompressibleTreeRenderer('workbench.tree.indent'); - const offset = Math.max(22 - indent, 0); // derived via inspection + const offset = Math.max(39 - indent, 0); // derived via inspection container.style.setProperty(`--vscode-explorer-align-offset-margin-left`, `${offset}px`); diff --git a/src/vs/workbench/contrib/files/browser/views/media/openeditors.css b/src/vs/workbench/contrib/files/browser/views/media/openeditors.css index d933ff9..3995b14 100644 --- a/src/vs/workbench/contrib/files/browser/views/media/openeditors.css +++ b/src/vs/workbench/contrib/files/browser/views/media/openeditors.css @@ -108 +108,28 @@ } + + + +.monaco-workbench .part.sidebar .pane-header .open-editors-dirty-count-container > .dirty-count.monaco-count-badge, .monaco-workbench .part.auxiliarybar .pane-header .open-editors-dirty-count-container > .dirty-count.monaco-count-badge { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) calc(var(--vscode-workbench-sidebar-font-size) * 0.307692); + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) +} +.monaco-workbench .part.sidebar .open-editors .monaco-list .monaco-list-row > .monaco-action-bar .action-label, .monaco-workbench .part.auxiliarybar .open-editors .monaco-list .monaco-list-row > .monaco-action-bar .action-label { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .open-editors .monaco-list .monaco-list-row > .monaco-action-bar .action-close-all-files, .monaco-workbench .part.sidebar .open-editors .monaco-list .monaco-list-row > .monaco-action-bar .save-all, .monaco-workbench .part.auxiliarybar .open-editors .monaco-list .monaco-list-row > .monaco-action-bar .action-close-all-files, .monaco-workbench .part.auxiliarybar .open-editors .monaco-list .monaco-list-row > .monaco-action-bar .save-all { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.769231); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench .part.sidebar .open-editors .monaco-list .monaco-list-row, .monaco-workbench .part.auxiliarybar .open-editors .monaco-list .monaco-list-row { + padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .open-editors .monaco-list .monaco-list-row .editor-group, .monaco-workbench .part.auxiliarybar .open-editors .monaco-list .monaco-list-row .editor-group { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154) +} +.monaco-workbench .part.sidebar .open-editors .open-editor, .monaco-workbench .part.sidebar .open-editors .editor-group, .monaco-workbench .part.auxiliarybar .open-editors .open-editor, .monaco-workbench .part.auxiliarybar .open-editors .editor-group { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308); + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench.hc-black .part.sidebar .open-editors .open-editor, .monaco-workbench.hc-black .part.sidebar .open-editors .editor-group, .monaco-workbench.hc-light .part.sidebar .open-editors .open-editor, .monaco-workbench.hc-light .part.sidebar .open-editors .editor-group, .monaco-workbench.hc-black .part.auxiliarybar .open-editors .open-editor, .monaco-workbench.hc-black .part.auxiliarybar .open-editors .editor-group, .monaco-workbench.hc-light .part.auxiliarybar .open-editors .open-editor, .monaco-workbench.hc-light .part.auxiliarybar .open-editors .editor-group { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.538462) +} \ No newline at end of file diff --git a/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts b/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts index 7229c14..33cae40 100644 --- a/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts +++ b/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts @@ -58,2 +58,3 @@ import { IHoverService } from '../../../../../platform/hover/browser/hover.js'; import { IFileService } from '../../../../../platform/files/common/files.js'; +import { FONT } from '../../../../../base/common/font.js'; @@ -519,3 +520,3 @@ export class OpenEditorsView extends ViewPane { - return (Math.max(this.elementCount, minVisibleOpenEditors)) * OpenEditorsDelegate.ITEM_HEIGHT; + return (Math.max(this.elementCount, minVisibleOpenEditors)) * FONT.sidebarSize22; } @@ -533,3 +534,3 @@ export class OpenEditorsView extends ViewPane { const itemsToShow = Math.min(Math.max(visibleOpenEditors, 1), this.elementCount); - return itemsToShow * OpenEditorsDelegate.ITEM_HEIGHT; + return itemsToShow * FONT.sidebarSize22; } @@ -581,6 +582,4 @@ class OpenEditorsDelegate implements IListVirtualDelegate { class VirtualDelegate implements IListVirtualDelegate { - getHeight() { return 20; } + getHeight() { return FONT.sidebarSize20; } getTemplateId(element: ExplorerItem): string { return 'default'; } diff --git a/src/vs/workbench/contrib/markers/browser/markersTreeViewer.ts b/src/vs/workbench/contrib/markers/browser/markersTreeViewer.ts index 0176fb6..140cda1 100644 --- a/src/vs/workbench/contrib/markers/browser/markersTreeViewer.ts +++ b/src/vs/workbench/contrib/markers/browser/markersTreeViewer.ts @@ -54,2 +54,3 @@ import type { IManagedHover } from '../../../../base/browser/ui/hover/hover.js'; import { IHoverService } from '../../../../platform/hover/browser/hover.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -101,4 +102,2 @@ export class VirtualDelegate implements IListVirtualDelegate { - static LINE_HEIGHT: number = 22; - constructor(private readonly markersViewState: MarkersViewModel) { } @@ -109,5 +108,5 @@ export class VirtualDelegate implements IListVirtualDelegate { const noOfLines = !viewModel || viewModel.multiline ? element.lines.length : 1; - return noOfLines * VirtualDelegate.LINE_HEIGHT; + return noOfLines * FONT.sidebarSize22; } - return VirtualDelegate.LINE_HEIGHT; + return FONT.sidebarSize22; } @@ -377,3 +376,3 @@ class MarkerWidget extends Disposable { if (lines[index] === '') { - lineElement.style.height = `${VirtualDelegate.LINE_HEIGHT}px`; + lineElement.style.height = `${FONT.sidebarSize22}px`; } diff --git a/src/vs/workbench/contrib/notebook/browser/contrib/notebookVariables/notebookVariablesTree.ts b/src/vs/workbench/contrib/notebook/browser/contrib/notebookVariables/notebookVariablesTree.ts index 4c95a37..fcb18e0 100644 --- a/src/vs/workbench/contrib/notebook/browser/contrib/notebookVariables/notebookVariablesTree.ts +++ b/src/vs/workbench/contrib/notebook/browser/contrib/notebookVariables/notebookVariablesTree.ts @@ -10,2 +10,3 @@ import { ITreeNode, ITreeRenderer } from '../../../../../../base/browser/ui/tree import { FuzzyScore } from '../../../../../../base/common/filters.js'; +import { FONT } from '../../../../../../base/common/font.js'; import { DisposableStore } from '../../../../../../base/common/lifecycle.js'; @@ -29,3 +30,3 @@ export class NotebookVariablesDelegate implements IListVirtualDelegate { getHeight(element: SettingsTreeElement): number { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/processExplorer/browser/processExplorerControl.ts b/src/vs/workbench/contrib/processExplorer/browser/processExplorerControl.ts index b54812a..05e5f75 100644 --- a/src/vs/workbench/contrib/processExplorer/browser/processExplorerControl.ts +++ b/src/vs/workbench/contrib/processExplorer/browser/processExplorerControl.ts @@ -35,2 +35,3 @@ import { Schemas } from '../../../../base/common/network.js'; import { isWeb } from '../../../../base/common/platform.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -75,3 +76,3 @@ class ProcessListDelegate implements IListVirtualDelegate { getHeight(element: IHelpItem): number { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/scm/browser/media/scm.css b/src/vs/workbench/contrib/scm/browser/media/scm.css index 20c78c3..e83c322 100644 --- a/src/vs/workbench/contrib/scm/browser/media/scm.css +++ b/src/vs/workbench/contrib/scm/browser/media/scm.css @@ -799 +799,215 @@ } + + + +/*** Generated for Custom Font Size ***/ + +.monaco-workbench .part.sidebar .scm-view .monaco-tl-contents > div, .monaco-workbench .part.auxiliarybar .scm-view .monaco-tl-contents > div { + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077) +} +.monaco-workbench .part.sidebar .scm-view .count, .monaco-workbench .part.auxiliarybar .scm-view .count { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) +} +.monaco-workbench .part.sidebar .scm-view .scm-provider > .codicon, .monaco-workbench .part.auxiliarybar .scm-view .scm-provider > .codicon { + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .scm-view .scm-provider > .actions, .monaco-workbench .part.auxiliarybar .scm-view .scm-provider > .actions { + min-width: calc(var(--vscode-workbench-sidebar-font-size) * 1.846154) +} +.monaco-workbench .part.sidebar .scm-view .scm-provider > .actions > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item, .monaco-workbench .part.auxiliarybar .scm-view .scm-provider > .actions > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item { + padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .scm-view .scm-provider > .actions > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item.scm-status-bar-action, .monaco-workbench .part.auxiliarybar .scm-view .scm-provider > .actions > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item.scm-status-bar-action { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .action-label > span:not(.codicon), .monaco-workbench .part.auxiliarybar .action-label > span:not(.codicon) { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .scm-view .scm-provider > .actions > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .action-label, .monaco-workbench .part.sidebar .scm-view .scm-provider > .actions > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .monaco-dropdown > .dropdown-label > .action-label, .monaco-workbench .part.auxiliarybar .scm-view .scm-provider > .actions > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .action-label, .monaco-workbench .part.auxiliarybar .scm-view .scm-provider > .actions > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .monaco-dropdown > .dropdown-label > .action-label { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .monaco-icon-label-container, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .monaco-icon-label-container { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .monaco-tl-twistie:not(.collapsed) + .monaco-tl-contents > .history-item > .graph-container > svg > path:last-of-type, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .monaco-tl-twistie:not(.collapsed) + .monaco-tl-contents > .history-item > .graph-container > svg > path:last-of-type { + stroke-width: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item > .graph-container, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item > .graph-container { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item > .label-container, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item > .label-container { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692); + gap: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item > .label-container > .label, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item > .label-container > .label { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item > .label-container > .label > .count, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item > .label-container > .label > .count { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077); + padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item > .label-container > .label > .codicon, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item > .label-container > .label > .codicon { + padding: 1px +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item > .label-container > .label > .codicon.codicon-git-branch, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item > .label-container > .label > .codicon.codicon-git-branch { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077); + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item > .label-container > .label > .description, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item > .label-container > .label > .description { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077); + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692); + max-width: calc(var(--vscode-workbench-sidebar-font-size) * 7.692308) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item .monaco-icon-label .icon-container, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item .monaco-icon-label .icon-container { + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item .monaco-icon-label .avatar, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item .monaco-icon-label .avatar { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.076923); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.076923) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item > .actions, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item > .actions { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .resource > .name > .monaco-icon-label::after, .monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item-change > .label-container > .monaco-icon-label::after, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .resource > .name > .monaco-icon-label::after, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item-change > .label-container > .monaco-icon-label::after { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .resource > .decoration-icon, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .resource > .decoration-icon { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769); + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.384615) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .resource > .decoration-icon.codicon, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .resource > .decoration-icon.codicon { + margin-top: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .actions .action-label, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .actions .action-label { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .scm-view .scm-input, .monaco-workbench .part.auxiliarybar .scm-view .scm-input { + padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154) +} +.monaco-workbench .part.sidebar .scm-view .scm-input .scm-editor .scm-editor-toolbar, .monaco-workbench .part.auxiliarybar .scm-view .scm-input .scm-editor .scm-editor-toolbar { + padding: 1px calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) 1px 1px +} +.monaco-workbench .part.sidebar .scm-view .scm-input .scm-editor .scm-editor-toolbar.scroll-decoration, .monaco-workbench .part.auxiliarybar .scm-view .scm-input .scm-editor .scm-editor-toolbar.scroll-decoration { + box-shadow: var(--vscode-scrollbar-shadow) 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) calc(var(--vscode-workbench-sidebar-font-size) * -0.461538) inset +} +.monaco-workbench .part.sidebar .scm-view .button-container, .monaco-workbench .part.auxiliarybar .scm-view .button-container { + padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154) +} +.monaco-workbench .part.sidebar .scm-view .button-container .codicon.codicon-cloud-upload, .monaco-workbench .part.sidebar .scm-view .button-container .codicon.codicon-sync, .monaco-workbench .part.auxiliarybar .scm-view .button-container .codicon.codicon-cloud-upload, .monaco-workbench .part.auxiliarybar .scm-view .button-container .codicon.codicon-sync { + margin: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) 0 0 +} +.monaco-workbench .part.sidebar .scm-view .button-container .codicon.codicon-arrow-up, .monaco-workbench .part.sidebar .scm-view .button-container .codicon.codicon-arrow-down, .monaco-workbench .part.auxiliarybar .scm-view .button-container .codicon.codicon-arrow-up, .monaco-workbench .part.auxiliarybar .scm-view .button-container .codicon.codicon-arrow-down { + margin: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) 0 0 +} +.monaco-workbench .part.sidebar .scm-view .button-container > .monaco-button-dropdown > .monaco-dropdown-button, .monaco-workbench .part.auxiliarybar .scm-view .button-container > .monaco-button-dropdown > .monaco-dropdown-button { + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.panel .scm-view .scm-editor-container, .monaco-workbench .part.panel .scm-view .scm-editor-container { + outline: 1px solid var(--vscode-panelInput-border) +} +.monaco-workbench .part.sidebar .scm-view .scm-editor.synthetic-focus, .monaco-workbench .part.panel .scm-view .scm-editor.synthetic-focus, .monaco-workbench .part.auxiliarybar .scm-view .scm-editor.synthetic-focus, .monaco-workbench .part.panel .scm-view .scm-editor.synthetic-focus { + outline: 1px solid var(--vscode-focusBorder); + outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923) +} +.monaco-workbench .part.sidebar .scm-view .scm-editor.validation-info, .monaco-workbench .part.auxiliarybar .scm-view .scm-editor.validation-info { + outline: 1px solid var(--vscode-inputValidation-infoBorder); + outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923) +} +.monaco-workbench .part.sidebar .scm-view .scm-editor.validation-warning, .monaco-workbench .part.auxiliarybar .scm-view .scm-editor.validation-warning { + outline: 1px solid var(--vscode-inputValidation-warningBorder); + outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923) +} +.monaco-workbench .part.sidebar .scm-view .scm-editor.validation-error, .monaco-workbench .part.auxiliarybar .scm-view .scm-editor.validation-error { + outline: 1px solid var(--vscode-inputValidation-errorBorder); + outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923) +} +.monaco-workbench .part.sidebar .scm-editor-validation-container, .monaco-workbench .part.auxiliarybar .scm-editor-validation-container { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .scm-editor-validation, .monaco-workbench .part.auxiliarybar .scm-editor-validation { + padding: 1px calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) +} +.monaco-workbench .part.sidebar .scm-editor-validation p, .monaco-workbench .part.auxiliarybar .scm-editor-validation p { + margin: 0; + padding: 0 +} +.monaco-workbench .part.sidebar .scm-editor-validation-actions, .monaco-workbench .part.auxiliarybar .scm-editor-validation-actions { + margin-top: 1px +} +.monaco-workbench .part.sidebar .scm-repositories-view .scm-artifact-group, .monaco-workbench .part.sidebar .scm-repositories-view .scm-artifact, .monaco-workbench .part.auxiliarybar .scm-repositories-view .scm-artifact-group, .monaco-workbench .part.auxiliarybar .scm-repositories-view .scm-artifact { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .icon, .monaco-workbench .part.auxiliarybar .icon { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .scm-repositories-view .scm-artifact .timestamp-container, .monaco-workbench .part.auxiliarybar .scm-repositories-view .scm-artifact .timestamp-container { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846); + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .scm-repositories-view .scm-artifact .timestamp-container.duplicate, .monaco-workbench .part.auxiliarybar .scm-repositories-view .scm-artifact .timestamp-container.duplicate { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308); + min-width: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) +} +.monaco-workbench .part.sidebar .monaco-hover.history-item-hover .history-item-hover-container > .rendered-markdown:first-child > p, .monaco-workbench .part.auxiliarybar .monaco-hover.history-item-hover .history-item-hover-container > .rendered-markdown:first-child > p { + margin-top: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .monaco-hover.history-item-hover .history-item-hover-container > .rendered-markdown:last-child p, .monaco-workbench .part.auxiliarybar .monaco-hover.history-item-hover .history-item-hover-container > .rendered-markdown:last-child p { + margin-bottom: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .monaco-hover.history-item-hover .history-item-hover-container > .rendered-markdown:last-child p span:not(.codicon), .monaco-workbench .part.auxiliarybar .monaco-hover.history-item-hover .history-item-hover-container > .rendered-markdown:last-child p span:not(.codicon) { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) 0 +} +.monaco-workbench .part.sidebar .monaco-hover.history-item-hover .history-item-hover-container > .rendered-markdown hr, .monaco-workbench .part.auxiliarybar .monaco-hover.history-item-hover .history-item-hover-container > .rendered-markdown hr { + margin-top: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692); + margin-bottom: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .monaco-hover.history-item-hover .history-item-hover-container > .rendered-markdown > p, .monaco-workbench .part.auxiliarybar .monaco-hover.history-item-hover .history-item-hover-container > .rendered-markdown > p { + margin: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) 0 +} +.monaco-workbench .part.sidebar .monaco-hover.history-item-hover .history-item-hover-container div:nth-of-type(3):nth-last-of-type(2) > p, .monaco-workbench .part.auxiliarybar .monaco-hover.history-item-hover .history-item-hover-container div:nth-of-type(3):nth-last-of-type(2) > p { + gap: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .monaco-hover.history-item-hover .history-item-hover-container p > span > span.codicon.codicon-git-branch, .monaco-workbench .part.auxiliarybar .monaco-hover.history-item-hover .history-item-hover-container p > span > span.codicon.codicon-git-branch { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077); + margin-bottom: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .monaco-hover.history-item-hover .history-item-hover-container p > span > span.codicon.codicon-tag, .monaco-workbench .part.sidebar .monaco-hover.history-item-hover .history-item-hover-container p > span > span.codicon.codicon-target, .monaco-workbench .part.auxiliarybar .monaco-hover.history-item-hover .history-item-hover-container p > span > span.codicon.codicon-tag, .monaco-workbench .part.auxiliarybar .monaco-hover.history-item-hover .history-item-hover-container p > span > span.codicon.codicon-target { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 1.076923); + margin-bottom: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .monaco-hover.history-item-hover .history-item-hover-container p > span > span.codicon.codicon-cloud, .monaco-workbench .part.auxiliarybar .monaco-hover.history-item-hover .history-item-hover-container p > span > span.codicon.codicon-cloud { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 1.076923); + margin-bottom: 1px +} +.monaco-workbench .part.sidebar .pane-header .scm-graph-view-badge-container > .scm-graph-view-badge.monaco-count-badge.long, .monaco-workbench .part.auxiliarybar .pane-header .scm-graph-view-badge-container > .scm-graph-view-badge.monaco-count-badge.long { + margin: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.461538); + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .monaco-toolbar .action-item > .action-label.scm-graph-repository-picker, .monaco-workbench .part.sidebar .monaco-toolbar .action-item > .action-label.scm-graph-history-item-picker, .monaco-workbench .part.auxiliarybar .monaco-toolbar .action-item > .action-label.scm-graph-repository-picker, .monaco-workbench .part.auxiliarybar .monaco-toolbar .action-item > .action-label.scm-graph-history-item-picker { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769) +} +.monaco-workbench .part.sidebar .monaco-toolbar .action-label.scm-graph-repository-picker > .name, .monaco-workbench .part.sidebar .monaco-toolbar .action-label.scm-graph-history-item-picker > .name, .monaco-workbench .part.auxiliarybar .monaco-toolbar .action-label.scm-graph-repository-picker > .name, .monaco-workbench .part.auxiliarybar .monaco-toolbar .action-label.scm-graph-history-item-picker > .name { + max-width: calc(var(--vscode-workbench-sidebar-font-size) * 7.692308); + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .scm-history-view .scm-provider .state-label.monaco-count-badge.long, .monaco-workbench .part.auxiliarybar .scm-history-view .scm-provider .state-label.monaco-count-badge.long { + margin: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.769231) +} +.monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item-change > .graph-placeholder, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item-change > .graph-placeholder { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench .part.sidebar .scm-history-view .history-item-load-more, .monaco-workbench .part.auxiliarybar .scm-history-view .history-item-load-more { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench .part.sidebar .scm-history-view .history-item-load-more .history-item-placeholder .monaco-highlighted-label .codicon, .monaco-workbench .part.auxiliarybar .scm-history-view .history-item-load-more .history-item-placeholder .monaco-highlighted-label .codicon { + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077) +} +.monaco-workbench .part.sidebar .scm-history-view .history-item-load-more .history-item-placeholder.shimmer, .monaco-workbench .part.auxiliarybar .scm-history-view .history-item-load-more .history-item-placeholder.shimmer { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) 0 +} +.monaco-workbench .part.sidebar .scm-history-view .history-item-load-more .history-item-placeholder.shimmer .monaco-icon-label-container, .monaco-workbench .part.auxiliarybar .scm-history-view .history-item-load-more .history-item-placeholder.shimmer .monaco-icon-label-container { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615) +} \ No newline at end of file diff --git a/src/vs/workbench/contrib/scm/browser/scmHistoryViewPane.ts b/src/vs/workbench/contrib/scm/browser/scmHistoryViewPane.ts index ab1900f..5ea8f3c 100644 --- a/src/vs/workbench/contrib/scm/browser/scmHistoryViewPane.ts +++ b/src/vs/workbench/contrib/scm/browser/scmHistoryViewPane.ts @@ -77,2 +77,3 @@ import { IMarkdownRendererService } from '../../../../platform/markdown/browser/ import { MarkdownString } from '../../../../base/common/htmlContent.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -412,3 +413,3 @@ class ListDelegate implements IListVirtualDelegate { getHeight(): number { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/scm/browser/scmRepositoriesViewPane.ts b/src/vs/workbench/contrib/scm/browser/scmRepositoriesViewPane.ts index 1523a82..fe78847 100644 --- a/src/vs/workbench/contrib/scm/browser/scmRepositoriesViewPane.ts +++ b/src/vs/workbench/contrib/scm/browser/scmRepositoriesViewPane.ts @@ -49,2 +49,3 @@ import { IActionViewItemProvider } from '../../../../base/browser/ui/actionbar/a import { fromNow } from '../../../../base/common/date.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -55,3 +56,3 @@ class ListDelegate implements IListVirtualDelegate { getHeight(): number { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/scm/browser/scmViewPane.ts b/src/vs/workbench/contrib/scm/browser/scmViewPane.ts index a2887d4..5e81511 100644 --- a/src/vs/workbench/contrib/scm/browser/scmViewPane.ts +++ b/src/vs/workbench/contrib/scm/browser/scmViewPane.ts @@ -77,2 +77,3 @@ import { AccessibilityCommandId } from '../../accessibility/common/accessibility import { SCMInputWidget } from './scmInput.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -143,4 +144,2 @@ interface ActionButtonTemplate { export class ActionButtonRenderer implements ICompressibleTreeRenderer { - static readonly DEFAULT_HEIGHT = 28; - static readonly TEMPLATE_ID = 'actionButton'; @@ -261,4 +260,2 @@ class InputRenderer implements ICompressibleTreeRenderer { } else if (isSCMActionButton(element)) { - return ActionButtonRenderer.DEFAULT_HEIGHT + 8; + return FONT.sidebarSize28 + 8; } else { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/search/browser/media/searchview.css b/src/vs/workbench/contrib/search/browser/media/searchview.css index 47e85d6..977a4dc 100644 --- a/src/vs/workbench/contrib/search/browser/media/searchview.css +++ b/src/vs/workbench/contrib/search/browser/media/searchview.css @@ -443 +443,121 @@ } + + + +/*** Generated for Custom Font Size ***/ + +.monaco-workbench .part.sidebar .search-view .search-widgets-container, .monaco-workbench .part.auxiliarybar .search-view .search-widgets-container { + margin: calc(var(--vscode-workbench-sidebar-font-size) * 0) calc(var(--vscode-workbench-sidebar-font-size) * 0.923077) 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.153846); + padding-top: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538); + padding-bottom: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) +} +.monaco-workbench .part.sidebar .search-view .search-widget .toggle-replace-button, .monaco-workbench .part.auxiliarybar .search-view .search-widget .toggle-replace-button { + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769) +} +.monaco-workbench .part.sidebar .search-view .search-widget .search-container, .monaco-workbench .part.sidebar .search-view .search-widget .replace-container, .monaco-workbench .part.auxiliarybar .search-view .search-widget .search-container, .monaco-workbench .part.auxiliarybar .search-view .search-widget .replace-container { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615) +} +.monaco-workbench .part.sidebar .search-view .search-widget .monaco-inputbox > .ibwrapper > .mirror, .monaco-workbench .part.sidebar .search-view .search-widget .monaco-inputbox > .ibwrapper > textarea.input, .monaco-workbench .part.auxiliarybar .search-view .search-widget .monaco-inputbox > .ibwrapper > .mirror, .monaco-workbench .part.auxiliarybar .search-view .search-widget .monaco-inputbox > .ibwrapper > textarea.input { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) calc(var(--vscode-workbench-sidebar-font-size) * 0) calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) +} +.monaco-workbench .part.sidebar .search-view .search-widget .monaco-inputbox > .ibwrapper > textarea.input, .monaco-workbench .part.auxiliarybar .search-view .search-widget .monaco-inputbox > .ibwrapper > textarea.input { + height: calc(var(--vscode-workbench-sidebar-font-size) * 2) +} +.monaco-workbench .part.sidebar .search-view .search-widget .replace-container, .monaco-workbench .part.auxiliarybar .search-view .search-widget .replace-container { + margin-top: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) +} +.monaco-workbench .part.sidebar .search-view .search-widget .replace-input, .monaco-workbench .part.auxiliarybar .search-view .search-widget .replace-input { + width: auto +} +.monaco-workbench .part.sidebar .search-view .search-widget .replace-input > .controls, .monaco-workbench .part.auxiliarybar .search-view .search-widget .replace-input > .controls { + top: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769); + right: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .search-view .search-widget .replace-container .monaco-action-bar, .monaco-workbench .part.auxiliarybar .search-view .search-widget .replace-container .monaco-action-bar { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.923077); + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .search-view .query-details, .monaco-workbench .part.auxiliarybar .search-view .query-details { + margin: 0 0 0 calc(var(--vscode-workbench-sidebar-font-size) * 1.384615) +} +.monaco-workbench .part.sidebar .search-view .query-details .more, .monaco-workbench .part.auxiliarybar .search-view .query-details .more { + right: calc(var(--vscode-workbench-sidebar-font-size) * -0.153846); + width: calc(var(--vscode-workbench-sidebar-font-size) * 1.923077); + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769) +} +.monaco-workbench .part.sidebar .search-view .query-details .file-types > .monaco-inputbox, .monaco-workbench .part.auxiliarybar .search-view .query-details .file-types > .monaco-inputbox { + height: calc(var(--vscode-workbench-sidebar-font-size) * 1.923077) +} +.monaco-workbench .part.sidebar .search-view .query-details.more .file-types:last-child, .monaco-workbench .part.auxiliarybar .search-view .query-details.more .file-types:last-child { + padding-bottom: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .search-view .query-details.more h4, .monaco-workbench .part.auxiliarybar .search-view .query-details.more h4 { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) 0 0; + margin: 0; + font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154) +} +.monaco-workbench .part.sidebar .search-view .messages, .monaco-workbench .part.auxiliarybar .search-view .messages { + margin-top: calc(var(--vscode-workbench-sidebar-font-size) * -0.384615) +} +.monaco-workbench .part.sidebar .search-view .message, .monaco-workbench .part.auxiliarybar .search-view .message { + padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) calc(var(--vscode-workbench-sidebar-font-size) * 0.615385) +} +.monaco-workbench .part.sidebar .search-view .message.ai-keywords, .monaco-workbench .part.auxiliarybar .search-view .message.ai-keywords { + margin: 0 calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) calc(var(--vscode-workbench-sidebar-font-size) * 0.615385); + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0) +} +.monaco-workbench .part.sidebar .search-view .message p:first-child, .monaco-workbench .part.auxiliarybar .search-view .message p:first-child { + margin-top: calc(var(--vscode-workbench-sidebar-font-size) * 0); + margin-bottom: calc(var(--vscode-workbench-sidebar-font-size) * 0); + padding-bottom: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .search-view .message .keyword-refresh, .monaco-workbench .part.auxiliarybar .search-view .message .keyword-refresh { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .search-view .foldermatch, .monaco-workbench .part.sidebar .search-view .filematch, .monaco-workbench .part.auxiliarybar .search-view .foldermatch, .monaco-workbench .part.auxiliarybar .search-view .filematch { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308); + padding: 0 +} +.monaco-workbench .part.sidebar .search-view .textsearchresult, .monaco-workbench .part.auxiliarybar .search-view .textsearchresult { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308); + padding: 0 +} +.monaco-workbench .part.sidebar .search-view .textsearchresult .monaco-icon-label .codicon, .monaco-workbench .part.auxiliarybar .search-view .textsearchresult .monaco-icon-label .codicon { + top: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769); + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) +} +.monaco-workbench .part.sidebar .pane-body.wide .search-view .foldermatch .badge, .monaco-workbench .part.sidebar .pane-body.wide .search-view .filematch .badge, .monaco-workbench .part.auxiliarybar .pane-body.wide .search-view .foldermatch .badge, .monaco-workbench .part.auxiliarybar .pane-body.wide .search-view .filematch .badge { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.769231) +} +.monaco-workbench .part.sidebar .search-view .linematch, .monaco-workbench .part.auxiliarybar .search-view .linematch { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692308) +} +.monaco-workbench .part.sidebar .search-view .linematch .matchLineNum, .monaco-workbench .part.auxiliarybar .search-view .linematch .matchLineNum { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.538462); + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .search-view .monaco-list .monaco-list-row .monaco-action-bar .action-item, .monaco-workbench .part.auxiliarybar .search-view .monaco-list .monaco-list-row .monaco-action-bar .action-item { + margin: 0 +} +.monaco-workbench .part.sidebar .search-view .monaco-list .monaco-list-row .monaco-action-bar .action-label, .monaco-workbench .part.auxiliarybar .search-view .monaco-list .monaco-list-row .monaco-action-bar .action-label { + padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench.hc-black .search-view .part.sidebar .monaco-list .monaco-list-row .monaco-action-bar .action-label, .monaco-workbench.hc-light .search-view .part.sidebar .monaco-list .monaco-list-row .monaco-action-bar .action-label, .monaco-workbench.hc-black .search-view .part.auxiliarybar .monaco-list .monaco-list-row .monaco-action-bar .action-label, .monaco-workbench.hc-light .search-view .part.auxiliarybar .monaco-list .monaco-list-row .monaco-action-bar .action-label { + margin-top: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} +.monaco-workbench .part.sidebar .search-view .monaco-count-badge, .monaco-workbench .part.auxiliarybar .search-view .monaco-count-badge { + margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077) +} +.monaco-workbench.hc-black .search-view .part.sidebar .foldermatch, .monaco-workbench.hc-black .search-view .part.sidebar .filematch, .monaco-workbench.hc-black .search-view .part.sidebar .linematch, .monaco-workbench.hc-light .search-view .part.sidebar .foldermatch, .monaco-workbench.hc-light .search-view .part.sidebar .filematch, .monaco-workbench.hc-light .search-view .part.sidebar .linematch, .monaco-workbench.hc-black .search-view .part.auxiliarybar .foldermatch, .monaco-workbench.hc-black .search-view .part.auxiliarybar .filematch, .monaco-workbench.hc-black .search-view .part.auxiliarybar .linematch, .monaco-workbench.hc-light .search-view .part.auxiliarybar .foldermatch, .monaco-workbench.hc-light .search-view .part.auxiliarybar .filematch, .monaco-workbench.hc-light .search-view .part.auxiliarybar .linematch { + line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.538462) +} +.monaco-workbench .part.sidebar .text-search-provider-messages .providerMessage, .monaco-workbench .part.auxiliarybar .text-search-provider-messages .providerMessage { + padding-top: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) +} +.monaco-workbench .part.sidebar .text-search-provider-messages .providerMessage .codicon, .monaco-workbench .part.auxiliarybar .text-search-provider-messages .providerMessage .codicon { + top: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769); + padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) +} +.monaco-workbench .search-container .part.sidebar .find-filter-button, .monaco-workbench .search-container .part.auxiliarybar .find-filter-button { + margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846) +} \ No newline at end of file diff --git a/src/vs/workbench/contrib/search/browser/searchResultsView.ts b/src/vs/workbench/contrib/search/browser/searchResultsView.ts index 62d5db9..f86dba1 100644 --- a/src/vs/workbench/contrib/search/browser/searchResultsView.ts +++ b/src/vs/workbench/contrib/search/browser/searchResultsView.ts @@ -36,2 +36,3 @@ import { ISearchTreeMatch, isSearchTreeMatch, RenderableMatch, ITextSearchHeadin import { isSearchTreeAIFileMatch } from './AISearch/aiSearchModelBase.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -77,6 +78,8 @@ export class SearchDelegate implements IListVirtualDelegate { - public static ITEM_HEIGHT = 22; + static getHeight(): number { + return FONT.sidebarSize22; + } getHeight(element: RenderableMatch): number { - return SearchDelegate.ITEM_HEIGHT; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/search/browser/searchView.ts b/src/vs/workbench/contrib/search/browser/searchView.ts index fb52bbb..09ca311 100644 --- a/src/vs/workbench/contrib/search/browser/searchView.ts +++ b/src/vs/workbench/contrib/search/browser/searchView.ts @@ -87,2 +87,3 @@ import { ITelemetryService } from '../../../../platform/telemetry/common/telemet import { forcedExpandRecursively } from './searchActionsTopBar.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -126,2 +127,3 @@ const SEARCH_CANCELLED_MESSAGE = nls.localize('searchCanceled', "Search was canc const DEBOUNCE_DELAY = 75; + export class SearchView extends ViewPane { @@ -963,3 +965,3 @@ export class SearchView extends ViewPane { overrideStyles: this.getLocationBasedColors().listOverrideStyles, - paddingBottom: SearchDelegate.ITEM_HEIGHT, + paddingBottom: SearchDelegate.getHeight(), collapseByDefault: (e: RenderableMatch) => { @@ -1341,6 +1343,6 @@ export class SearchView extends ViewPane { - this.searchWidget.setWidth(this.size.width - 28 /* container margin */); + this.searchWidget.setWidth(this.size.width - FONT.sidebarSize28); - this.inputPatternExcludes.setWidth(this.size.width - 28 /* container margin */); - this.inputPatternIncludes.setWidth(this.size.width - 28 /* container margin */); + this.inputPatternExcludes.setWidth(this.size.width - FONT.sidebarSize28); + this.inputPatternIncludes.setWidth(this.size.width - FONT.sidebarSize28); @@ -1348,3 +1350,3 @@ export class SearchView extends ViewPane { const messagesHeight = dom.getTotalHeight(this.messagesElement); - this.tree.layout(this.size.height - widgetHeight - messagesHeight, this.size.width - 28); + this.tree.layout(this.size.height - widgetHeight - messagesHeight, this.size.width - FONT.sidebarSize28); } diff --git a/src/vs/workbench/contrib/search/browser/searchWidget.ts b/src/vs/workbench/contrib/search/browser/searchWidget.ts index e9c0fcd..f3e23de 100644 --- a/src/vs/workbench/contrib/search/browser/searchWidget.ts +++ b/src/vs/workbench/contrib/search/browser/searchWidget.ts @@ -47,5 +47,3 @@ import { IDisposable, MutableDisposable } from '../../../../base/common/lifecycl import { NotebookFindScopeType } from '../../notebook/common/notebookCommon.js'; - -/** Specified in searchview.css */ -const SingleLineInputHeight = 26; +import { FONT } from '../../../../base/common/font.js'; @@ -99,3 +97,3 @@ function stopPropagationForMultiLineUpwards(event: IKeyboardEvent, value: string const isMultiline = !!value.match(/\n/); - if (textarea && (isMultiline || textarea.clientHeight > SingleLineInputHeight) && textarea.selectionStart > 0) { + if (textarea && (isMultiline || textarea.clientHeight > FONT.sidebarSize26) && textarea.selectionStart > 0) { event.stopPropagation(); @@ -107,3 +105,3 @@ function stopPropagationForMultiLineDownwards(event: IKeyboardEvent, value: stri const isMultiline = !!value.match(/\n/); - if (textarea && (isMultiline || textarea.clientHeight > SingleLineInputHeight) && textarea.selectionEnd < textarea.value.length) { + if (textarea && (isMultiline || textarea.clientHeight > FONT.sidebarSize26) && textarea.selectionEnd < textarea.value.length) { event.stopPropagation(); @@ -113,3 +111,2 @@ function stopPropagationForMultiLineDownwards(event: IKeyboardEvent, value: stri - export class SearchWidget extends Widget { @@ -316,3 +313,3 @@ export class SearchWidget extends Widget { if (this.replaceInput) { - this.replaceInput.width = width - 28; + this.replaceInput.width = width - FONT.sidebarSize28; this.replaceInput.inputBox.layout(); diff --git a/src/vs/workbench/contrib/terminal/browser/terminalTabsList.ts b/src/vs/workbench/contrib/terminal/browser/terminalTabsList.ts index 21118dd..b5e53a1 100644 --- a/src/vs/workbench/contrib/terminal/browser/terminalTabsList.ts +++ b/src/vs/workbench/contrib/terminal/browser/terminalTabsList.ts @@ -58,2 +58,3 @@ import { TerminalStorageKeys } from '../common/terminalStorageKeys.js'; import { isObject } from '../../../../base/common/types.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -62,3 +63,2 @@ const $ = DOM.$; export const enum TerminalTabsListSizes { - TabHeight = 22, NarrowViewWidth = 46, @@ -99,3 +99,3 @@ export class TerminalTabList extends WorkbenchList { { - getHeight: () => TerminalTabsListSizes.TabHeight, + getHeight: () => FONT.bottomPaneSize22, getTemplateId: () => 'terminal.tabs' @@ -113,3 +113,3 @@ export class TerminalTabList extends WorkbenchList { multipleSelectionSupport: true, - paddingBottom: TerminalTabsListSizes.TabHeight, + paddingBottom: FONT.bottomPaneSize22, dnd: instantiationService.createInstance(TerminalTabsDragAndDrop), @@ -458,3 +458,3 @@ class TerminalTabsRenderer implements IListRenderer { getHeight(element: TestExplorerTreeElement) { - return element instanceof TestTreeErrorMessage ? 17 + 10 : 22; + return element instanceof TestTreeErrorMessage ? FONT.sidebarSize17 + 10 : FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/timeline/browser/timelinePane.ts b/src/vs/workbench/contrib/timeline/browser/timelinePane.ts index c7c9cc7..84510c2 100644 --- a/src/vs/workbench/contrib/timeline/browser/timelinePane.ts +++ b/src/vs/workbench/contrib/timeline/browser/timelinePane.ts @@ -59,4 +59,3 @@ import { IHoverService, WorkbenchHoverDelegate } from '../../../../platform/hove import { HoverPosition } from '../../../../base/browser/ui/hover/hoverWidget.js'; - -const ItemHeight = 22; +import { FONT } from '../../../../base/common/font.js'; @@ -330,3 +329,3 @@ export class TimelinePane extends ViewPane { // If we are paging when scrolling, then add an extra item to the end to make sure the "Load more" item is out of view - pageSize = Math.max(20, Math.floor((this.tree?.renderHeight ?? 0 / ItemHeight) + (this.pageOnScroll ? 1 : -1))); + pageSize = Math.max(20, Math.floor((this.tree?.renderHeight ?? 0 / FONT.sidebarSize22) + (this.pageOnScroll ? 1 : -1))); } @@ -1147,3 +1146,3 @@ export class TimelineListVirtualDelegate implements IListVirtualDelegate { getHeight(_element: Type): number { - return 22; + return FONT.sidebarSize22; } diff --git a/src/vs/workbench/contrib/welcomeAgentSessions/browser/agentSessionsWelcome.ts b/src/vs/workbench/contrib/welcomeAgentSessions/browser/agentSessionsWelcome.ts index 70191ee..42cf995 100644 --- a/src/vs/workbench/contrib/welcomeAgentSessions/browser/agentSessionsWelcome.ts +++ b/src/vs/workbench/contrib/welcomeAgentSessions/browser/agentSessionsWelcome.ts @@ -49,3 +49,2 @@ import { AgentSessionsControl, IAgentSessionsControlOptions } from '../../chat/b import { AgentSessionsFilter } from '../../chat/browser/agentSessions/agentSessionsFilter.js'; -import { AgentSessionsListDelegate } from '../../chat/browser/agentSessions/agentSessionsViewer.js'; import { HoverPosition } from '../../../../base/browser/ui/hover/hoverWidget.js'; @@ -62,2 +61,3 @@ import { toErrorMessage } from '../../../../base/common/errorMessage.js'; import { ILogService } from '../../../../platform/log/common/log.js'; +import { FONT } from '../../../../base/common/font.js'; @@ -826,3 +826,3 @@ export class AgentSessionsWelcomePage extends EditorPane { ); - const sessionsHeight = visibleSessions * AgentSessionsListDelegate.ITEM_HEIGHT; + const sessionsHeight = visibleSessions * FONT.sidebarSize22; this.sessionsControl.layout(sessionsHeight, sessionsWidth); @@ -831,3 +831,3 @@ export class AgentSessionsWelcomePage extends EditorPane { // Visual height = ceil(n/2) * ITEM_HEIGHT, so offset = floor(n/2) * ITEM_HEIGHT - const marginOffset = Math.floor(visibleSessions / 2) * AgentSessionsListDelegate.ITEM_HEIGHT; + const marginOffset = Math.floor(visibleSessions / 2) * FONT.sidebarSize22; this.sessionsControl.element!.style.marginBottom = `-${marginOffset}px`;