Skip to content

Commit 6bdab5a

Browse files
eamodioeamodio
committed
Renames GlApp to GlAppHost to clarify its role
Renames `GraphApp` to `GraphAppHost` and `GraphAppWC` to `GraphApp`
1 parent 02c6535 commit 6bdab5a

File tree

9 files changed

+127
-125
lines changed

9 files changed

+127
-125
lines changed

‎src/webviews/apps/home/home.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
inactiveOverviewStateContext,
1414
} from '../plus/home/components/overviewState';
1515
import type { GlHomeHeader } from '../plus/shared/components/home-header';
16-
import { GlApp } from '../shared/app';
16+
import { GlAppHost } from '../shared/appHost';
1717
import { scrollableBase } from '../shared/components/styles/lit/base.css';
1818
import type { HostIpc } from '../shared/ipc';
1919
import { homeBaseStyles, homeStyles } from './home.css';
@@ -30,7 +30,7 @@ import './components/promo-banner';
3030
import './components/repo-alerts';
3131

3232
@customElement('gl-home-app')
33-
export class GlHomeApp extends GlApp<State> {
33+
export class GlHomeApp extends GlAppHost<State> {
3434
static override styles = [homeBaseStyles, scrollableBase, homeStyles];
3535

3636
@provide({ context: activeOverviewStateContext })

‎src/webviews/apps/home/stateProvider.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
DidChangeWalkthroughProgress,
1010
DidCompleteDiscoveringRepositories,
1111
} from '../../home/protocol';
12-
import type { ReactiveElementHost, StateProvider } from '../shared/app';
12+
import type { ReactiveElementHost, StateProvider } from '../shared/appHost';
1313
import type { Disposable } from '../shared/events';
1414
import type { HostIpc } from '../shared/ipc';
1515
import { stateContext } from './context';

‎src/webviews/apps/plus/graph/graph-app.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@ import './hover/graphHover';
2626
import './minimap/minimap-container';
2727
import './sidebar/sidebar';
2828

29-
@customElement('gl-graph-app-wc')
30-
export class GraphAppWC extends SignalWatcher(LitElement) {
29+
@customElement('gl-graph-app')
30+
export class GraphApp extends SignalWatcher(LitElement) {
31+
// use Light DOM
3132
protected override createRenderRoot(): HTMLElement | DocumentFragment {
3233
return this;
3334
}

‎src/webviews/apps/plus/graph/graph.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
data-placement="#{placement}"
2525
data-vscode-context='{ "preventDefaultContextMenuItems": true, "webview": "#{webviewId}", "webviewInstance": "#{webviewInstanceId}" }'
2626
>
27-
<gl-graph-app name="GraphView" placement="#{placement}" bootstrap="#{state}"></gl-graph-app>
27+
<gl-graph-apphost name="GraphView" placement="#{placement}" bootstrap="#{state}"></gl-graph-apphost>
2828
#{endOfBody}
2929
</body>
3030
</html>

‎src/webviews/apps/plus/graph/graph.ts‎

Lines changed: 115 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import { html } from 'lit';
55
import { customElement, query, state } from 'lit/decorators.js';
66
import { Color, getCssVariable, mix, opacity } from '../../../../system/color';
77
import type { State } from '../../../plus/graph/protocol';
8-
import type { StateProvider } from '../../shared/app';
9-
import { GlApp } from '../../shared/app';
8+
import type { StateProvider } from '../../shared/appHost';
9+
import { GlAppHost } from '../../shared/appHost';
1010
import type { HostIpc } from '../../shared/ipc';
1111
import type { ThemeChangeEvent } from '../../shared/theme';
12-
import type { GraphAppWC } from './graph-app';
12+
import type { GraphApp } from './graph-app';
1313
import { GraphAppState, graphStateContext, GraphStateProvider } from './stateProvider';
1414
import './graph-app';
1515
import './graph.scss';
@@ -27,8 +27,18 @@ const graphLaneThemeColors = new Map([
2727
['--vscode-gitlens-graphLane10Color', '#2ece9d'],
2828
]);
2929

30-
@customElement('gl-graph-app')
31-
export class GraphApp extends GlApp<State> {
30+
@customElement('gl-graph-apphost')
31+
export class GraphAppHost extends GlAppHost<State> {
32+
protected override createRenderRoot(): HTMLElement | DocumentFragment {
33+
return this;
34+
}
35+
36+
@query('gl-graph-app')
37+
private appElement!: GraphApp;
38+
39+
@provide({ context: graphStateContext })
40+
private readonly _graphState: typeof graphStateContext.__context__ = new GraphAppState();
41+
3242
@state()
3343
searching: string = '';
3444
searchResultsHidden: unknown;
@@ -38,17 +48,11 @@ export class GraphApp extends GlApp<State> {
3848

3949
return Object.values(this.state.excludeTypes).includes(true);
4050
}
41-
private applyTheme(theme: { cssVariables: CssVariables; themeOpacityFactor: number }) {
42-
this._graphState.theming = theme;
43-
}
4451

45-
protected override createRenderRoot(): HTMLElement | DocumentFragment {
46-
return this;
52+
override render() {
53+
return html`<gl-graph-app></gl-graph-app>`;
4754
}
4855

49-
@provide({ context: graphStateContext })
50-
private readonly _graphState: typeof graphStateContext.__context__ = new GraphAppState();
51-
5256
protected override createStateProvider(state: State, ipc: HostIpc): StateProvider<State> {
5357
return new GraphStateProvider(this, state, ipc, this._logger, {
5458
onStateUpdate: partial => {
@@ -68,103 +72,6 @@ export class GraphApp extends GlApp<State> {
6872
});
6973
}
7074

71-
private getGraphTheming(): { cssVariables: CssVariables; themeOpacityFactor: number } {
72-
// this will be called on theme updated as well as on config updated since it is dependent on the column colors from config changes and the background color from the theme
73-
const computedStyle = window.getComputedStyle(document.documentElement);
74-
const bgColor = getCssVariable('--color-background', computedStyle);
75-
76-
const mixedGraphColors: CssVariables = {};
77-
78-
let i = 0;
79-
let color;
80-
for (const [colorVar, colorDefault] of graphLaneThemeColors) {
81-
color = getCssVariable(colorVar, computedStyle) || colorDefault;
82-
83-
mixedGraphColors[`--column-${i}-color`] = color;
84-
85-
mixedGraphColors[`--graph-color-${i}`] = color;
86-
for (const mixInt of [15, 25, 45, 50]) {
87-
mixedGraphColors[`--graph-color-${i}-bg${mixInt}`] = mix(bgColor, color, mixInt);
88-
}
89-
for (const mixInt of [10, 50]) {
90-
mixedGraphColors[`--graph-color-${i}-f${mixInt}`] = opacity(color, mixInt);
91-
}
92-
93-
i++;
94-
}
95-
96-
const isHighContrastTheme =
97-
document.body.classList.contains('vscode-high-contrast') ||
98-
document.body.classList.contains('vscode-high-contrast-light');
99-
100-
return {
101-
cssVariables: {
102-
'--app__bg0': bgColor,
103-
'--panel__bg0': getCssVariable('--color-graph-background', computedStyle),
104-
'--panel__bg1': getCssVariable('--color-graph-background2', computedStyle),
105-
'--section-border': getCssVariable('--color-graph-background2', computedStyle),
106-
107-
'--selected-row': getCssVariable('--color-graph-selected-row', computedStyle),
108-
'--selected-row-border': isHighContrastTheme
109-
? `1px solid ${getCssVariable('--color-graph-contrast-border', computedStyle)}`
110-
: 'none',
111-
'--hover-row': getCssVariable('--color-graph-hover-row', computedStyle),
112-
'--hover-row-border': isHighContrastTheme
113-
? `1px dashed ${getCssVariable('--color-graph-contrast-border', computedStyle)}`
114-
: 'none',
115-
116-
'--scrollable-scrollbar-thickness': getCssVariable('--graph-column-scrollbar-thickness', computedStyle),
117-
'--scroll-thumb-bg': getCssVariable('--vscode-scrollbarSlider-background', computedStyle),
118-
119-
'--scroll-marker-head-color': getCssVariable('--color-graph-scroll-marker-head', computedStyle),
120-
'--scroll-marker-upstream-color': getCssVariable('--color-graph-scroll-marker-upstream', computedStyle),
121-
'--scroll-marker-highlights-color': getCssVariable(
122-
'--color-graph-scroll-marker-highlights',
123-
computedStyle,
124-
),
125-
'--scroll-marker-local-branches-color': getCssVariable(
126-
'--color-graph-scroll-marker-local-branches',
127-
computedStyle,
128-
),
129-
'--scroll-marker-remote-branches-color': getCssVariable(
130-
'--color-graph-scroll-marker-remote-branches',
131-
computedStyle,
132-
),
133-
'--scroll-marker-stashes-color': getCssVariable('--color-graph-scroll-marker-stashes', computedStyle),
134-
'--scroll-marker-tags-color': getCssVariable('--color-graph-scroll-marker-tags', computedStyle),
135-
'--scroll-marker-selection-color': getCssVariable(
136-
'--color-graph-scroll-marker-selection',
137-
computedStyle,
138-
),
139-
'--scroll-marker-pull-requests-color': getCssVariable(
140-
'--color-graph-scroll-marker-pull-requests',
141-
computedStyle,
142-
),
143-
144-
'--stats-added-color': getCssVariable('--color-graph-stats-added', computedStyle),
145-
'--stats-deleted-color': getCssVariable('--color-graph-stats-deleted', computedStyle),
146-
'--stats-files-color': getCssVariable('--color-graph-stats-files', computedStyle),
147-
'--stats-bar-border-radius': getCssVariable('--graph-stats-bar-border-radius', computedStyle),
148-
'--stats-bar-height': getCssVariable('--graph-stats-bar-height', computedStyle),
149-
150-
'--text-selected': getCssVariable('--color-graph-text-selected', computedStyle),
151-
'--text-selected-row': getCssVariable('--color-graph-text-selected-row', computedStyle),
152-
'--text-hovered': getCssVariable('--color-graph-text-hovered', computedStyle),
153-
'--text-dimmed-selected': getCssVariable('--color-graph-text-dimmed-selected', computedStyle),
154-
'--text-dimmed': getCssVariable('--color-graph-text-dimmed', computedStyle),
155-
'--text-normal': getCssVariable('--color-graph-text-normal', computedStyle),
156-
'--text-secondary': getCssVariable('--color-graph-text-secondary', computedStyle),
157-
'--text-disabled': getCssVariable('--color-graph-text-disabled', computedStyle),
158-
159-
'--text-accent': getCssVariable('--color-link-foreground', computedStyle),
160-
'--text-inverse': getCssVariable('--vscode-input-background', computedStyle),
161-
'--text-bright': getCssVariable('--vscode-input-background', computedStyle),
162-
...mixedGraphColors,
163-
},
164-
themeOpacityFactor: parseInt(getCssVariable('--graph-theme-opacity-factor', computedStyle)) || 1,
165-
};
166-
}
167-
16875
protected override onThemeUpdated(e: ThemeChangeEvent) {
16976
const rootStyle = document.documentElement.style;
17077

@@ -263,10 +170,104 @@ export class GraphApp extends GlApp<State> {
263170
this.applyTheme(th);
264171
}
265172

266-
@query('gl-graph-app-wc')
267-
private appElement!: GraphAppWC;
173+
private applyTheme(theme: { cssVariables: CssVariables; themeOpacityFactor: number }) {
174+
this._graphState.theming = theme;
175+
}
268176

269-
override render() {
270-
return html`<gl-graph-app-wc></gl-graph-app-wc>`;
177+
private getGraphTheming(): { cssVariables: CssVariables; themeOpacityFactor: number } {
178+
// this will be called on theme updated as well as on config updated since it is dependent on the column colors from config changes and the background color from the theme
179+
const computedStyle = window.getComputedStyle(document.documentElement);
180+
const bgColor = getCssVariable('--color-background', computedStyle);
181+
182+
const mixedGraphColors: CssVariables = {};
183+
184+
let i = 0;
185+
let color;
186+
for (const [colorVar, colorDefault] of graphLaneThemeColors) {
187+
color = getCssVariable(colorVar, computedStyle) || colorDefault;
188+
189+
mixedGraphColors[`--column-${i}-color`] = color;
190+
191+
mixedGraphColors[`--graph-color-${i}`] = color;
192+
for (const mixInt of [15, 25, 45, 50]) {
193+
mixedGraphColors[`--graph-color-${i}-bg${mixInt}`] = mix(bgColor, color, mixInt);
194+
}
195+
for (const mixInt of [10, 50]) {
196+
mixedGraphColors[`--graph-color-${i}-f${mixInt}`] = opacity(color, mixInt);
197+
}
198+
199+
i++;
200+
}
201+
202+
const isHighContrastTheme =
203+
document.body.classList.contains('vscode-high-contrast') ||
204+
document.body.classList.contains('vscode-high-contrast-light');
205+
206+
return {
207+
cssVariables: {
208+
'--app__bg0': bgColor,
209+
'--panel__bg0': getCssVariable('--color-graph-background', computedStyle),
210+
'--panel__bg1': getCssVariable('--color-graph-background2', computedStyle),
211+
'--section-border': getCssVariable('--color-graph-background2', computedStyle),
212+
213+
'--selected-row': getCssVariable('--color-graph-selected-row', computedStyle),
214+
'--selected-row-border': isHighContrastTheme
215+
? `1px solid ${getCssVariable('--color-graph-contrast-border', computedStyle)}`
216+
: 'none',
217+
'--hover-row': getCssVariable('--color-graph-hover-row', computedStyle),
218+
'--hover-row-border': isHighContrastTheme
219+
? `1px dashed ${getCssVariable('--color-graph-contrast-border', computedStyle)}`
220+
: 'none',
221+
222+
'--scrollable-scrollbar-thickness': getCssVariable('--graph-column-scrollbar-thickness', computedStyle),
223+
'--scroll-thumb-bg': getCssVariable('--vscode-scrollbarSlider-background', computedStyle),
224+
225+
'--scroll-marker-head-color': getCssVariable('--color-graph-scroll-marker-head', computedStyle),
226+
'--scroll-marker-upstream-color': getCssVariable('--color-graph-scroll-marker-upstream', computedStyle),
227+
'--scroll-marker-highlights-color': getCssVariable(
228+
'--color-graph-scroll-marker-highlights',
229+
computedStyle,
230+
),
231+
'--scroll-marker-local-branches-color': getCssVariable(
232+
'--color-graph-scroll-marker-local-branches',
233+
computedStyle,
234+
),
235+
'--scroll-marker-remote-branches-color': getCssVariable(
236+
'--color-graph-scroll-marker-remote-branches',
237+
computedStyle,
238+
),
239+
'--scroll-marker-stashes-color': getCssVariable('--color-graph-scroll-marker-stashes', computedStyle),
240+
'--scroll-marker-tags-color': getCssVariable('--color-graph-scroll-marker-tags', computedStyle),
241+
'--scroll-marker-selection-color': getCssVariable(
242+
'--color-graph-scroll-marker-selection',
243+
computedStyle,
244+
),
245+
'--scroll-marker-pull-requests-color': getCssVariable(
246+
'--color-graph-scroll-marker-pull-requests',
247+
computedStyle,
248+
),
249+
250+
'--stats-added-color': getCssVariable('--color-graph-stats-added', computedStyle),
251+
'--stats-deleted-color': getCssVariable('--color-graph-stats-deleted', computedStyle),
252+
'--stats-files-color': getCssVariable('--color-graph-stats-files', computedStyle),
253+
'--stats-bar-border-radius': getCssVariable('--graph-stats-bar-border-radius', computedStyle),
254+
'--stats-bar-height': getCssVariable('--graph-stats-bar-height', computedStyle),
255+
256+
'--text-selected': getCssVariable('--color-graph-text-selected', computedStyle),
257+
'--text-selected-row': getCssVariable('--color-graph-text-selected-row', computedStyle),
258+
'--text-hovered': getCssVariable('--color-graph-text-hovered', computedStyle),
259+
'--text-dimmed-selected': getCssVariable('--color-graph-text-dimmed-selected', computedStyle),
260+
'--text-dimmed': getCssVariable('--color-graph-text-dimmed', computedStyle),
261+
'--text-normal': getCssVariable('--color-graph-text-normal', computedStyle),
262+
'--text-secondary': getCssVariable('--color-graph-text-secondary', computedStyle),
263+
'--text-disabled': getCssVariable('--color-graph-text-disabled', computedStyle),
264+
265+
'--text-accent': getCssVariable('--color-link-foreground', computedStyle),
266+
'--text-inverse': getCssVariable('--vscode-input-background', computedStyle),
267+
'--text-bright': getCssVariable('--vscode-input-background', computedStyle),
268+
...mixedGraphColors,
269+
},
270+
themeOpacityFactor: parseInt(getCssVariable('--graph-theme-opacity-factor', computedStyle)) || 1,
271+
};
271272
}
272273
}

‎src/webviews/apps/plus/graph/stateProvider.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
DidStartFeaturePreviewNotification,
3030
} from '../../../plus/graph/protocol';
3131
import { DidChangeHostWindowFocusNotification } from '../../../protocol';
32-
import type { StateProvider } from '../../shared/app';
32+
import type { StateProvider } from '../../shared/appHost';
3333
import { signalObjectState, signalState } from '../../shared/components/signal-utils';
3434
import type { LoggerContext } from '../../shared/contexts/logger';
3535
import type { Disposable } from '../../shared/events';

‎src/webviews/apps/plus/timeline/stateProvider.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ContextProvider } from '@lit/context';
22
import type { State } from '../../../plus/timeline/protocol';
33
import { DidChangeNotification } from '../../../plus/timeline/protocol';
4-
import type { ReactiveElementHost, StateProvider } from '../../shared/app';
4+
import type { ReactiveElementHost, StateProvider } from '../../shared/appHost';
55
import type { Disposable } from '../../shared/events';
66
import type { HostIpc } from '../../shared/ipc';
77
import { stateContext } from './context';

‎src/webviews/apps/plus/timeline/timeline.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
UpdateConfigCommand,
1717
UpdateScopeCommand,
1818
} from '../../../plus/timeline/protocol';
19-
import { GlApp } from '../../shared/app';
19+
import { GlAppHost } from '../../shared/appHost';
2020
import type { Checkbox } from '../../shared/components/checkbox/checkbox';
2121
import type { GlRefButton } from '../../shared/components/ref-button';
2222
import type { HostIpc } from '../../shared/ipc';
@@ -38,7 +38,7 @@ import '../../shared/components/progress';
3838
import '../../shared/components/overlays/popover';
3939

4040
@customElement('gl-timeline-app')
41-
export class GlTimelineApp extends GlApp<State> {
41+
export class GlTimelineApp extends GlAppHost<State> {
4242
static override shadowRootOptions: ShadowRootInit = {
4343
...LitElement.shadowRootOptions,
4444
delegatesFocus: true,

src/webviews/apps/shared/app.ts renamed to src/webviews/apps/shared/appHost.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export interface StateProvider<State> extends Disposable {
2323
readonly state: State;
2424
}
2525

26-
export abstract class GlApp<
26+
export abstract class GlAppHost<
2727
State extends { webviewId: CustomEditorIds | WebviewIds | WebviewViewIds; timestamp: number } = {
2828
webviewId: CustomEditorIds | WebviewIds | WebviewViewIds;
2929
timestamp: number;

0 commit comments

Comments
 (0)