wlxsp
/
test1
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Fixes settings on Welcome 

Adds Visual File History
Componentizes svgs
main
Eric Amodio 1 year ago
parent
31eabdf0e0
commit
a6eef18682
11 changed files with 1086 additions and 663 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      src/system/configuration.ts
  2. +160
    -0
      src/webviews/apps/welcome/components/svg-annotations.ts
  3. +275
    -0
      src/webviews/apps/welcome/components/svg-blame.ts
  4. +192
    -0
      src/webviews/apps/welcome/components/svg-graph.ts
  5. +153
    -0
      src/webviews/apps/welcome/components/svg-revision-navigation.ts
  6. +200
    -0
      src/webviews/apps/welcome/components/svg-timeline.ts
  7. +35
    -241
      src/webviews/apps/welcome/welcome.html
  8. +13
    -351
      src/webviews/apps/welcome/welcome.scss
  9. +28
    -40
      src/webviews/apps/welcome/welcome.ts
  10. +3
    -4
      src/webviews/welcome/protocol.ts
  11. +26
    -27
      src/webviews/welcome/welcomeWebview.ts

+ 1
- 0
src/system/configuration.ts View File

@ -59,6 +59,7 @@ export class Configuration {
section: S, section: S,
scope: ConfigurationScope | null | undefined, scope: ConfigurationScope | null | undefined,
defaultValue: NonNullable<ConfigPathValue<S>>, defaultValue: NonNullable<ConfigPathValue<S>>,
skipOverrides?: boolean,
): NonNullable<ConfigPathValue<S>>; ): NonNullable<ConfigPathValue<S>>;
get<S extends ConfigPath>( get<S extends ConfigPath>(
section: S, section: S,

+ 160
- 0
src/webviews/apps/welcome/components/svg-annotations.ts View File

@ -0,0 +1,160 @@
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('gk-annotations-svg')
export class AnnotationsSvg extends LitElement {
static override styles = css`
:host > svg {
display: block;
max-width: 69.2rem;
width: calc(100% - 2rem);
height: auto;
margin: 0 1rem;
border: 0.1rem solid var(--vscode-editorWidget-border);
}
* {
user-select: none;
}
.codicon {
font-family: codicon;
cursor: default;
user-select: none;
}
.glicon {
font-family: glicons;
cursor: default;
user-select: none;
}
.line text {
font-family: var(--vscode-editor-font-family);
font-size: var(--vscode-editor-font-size);
font-weight: var(--vscode-editor-font-weight);
}
.cursor {
fill: var(--vscode-editorCursor-foreground);
}
.splitter {
stroke: var(--vscode-editorGroup-border);
}
.punctuation {
fill: var(--vscode-editor-foreground);
}
.function-declaration {
fill: var(--vscode-symbolIcon-functionForeground);
}
.function-name {
fill: var(--vscode-symbolIcon-colorForeground);
}
.function-argument {
fill: var(--vscode-symbolIcon-variableForeground);
}
.function-argument-type {
fill: var(--vscode-symbolIcon-typeParameterForeground);
}
.function-return {
fill: var(--vscode-debugTokenExpression-name);
}
.line-current {
fill: var(--vscode-editor-lineHighlightBackground);
stroke: var(--vscode-editor-lineHighlightBorder);
stroke-width: 0.1rem;
fill-opacity: 0.8;
}
.line-number {
fill: var(--vscode-editorLineNumber-foreground);
}
.line-number-active {
fill: var(--vscode-editorLineNumber-activeForeground);
}
.gutter {
fill: var(--vscode-gitlens-gutterBackgroundColor);
}
.gutter-avatar circle {
fill: var(--vscode-editorInfo-foreground);
}
.gutter-avatar text {
fill: var(--vscode-gitlens-gutterForegroundColor);
font-size: 0.75rem;
}
.gutter-text {
fill: var(--vscode-gitlens-gutterForegroundColor);
}
.heatmap {
stroke: #7162db;
}
.annotations-left {
transition: opacity 150ms ease-in-out;
}
.annotations-right {
transition: transform 150ms ease-in-out;
}
:host(:not([toggled])) .annotations-left {
opacity: 0;
}
:host(:not([toggled])) .annotations-right {
transform: translateX(-242px);
}
`;
@property({ type: Boolean, reflect: true })
toggled?: boolean;
override render() {
return html`
<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
<!-- prettier-ignore -->
<svg width="600" height="44" viewBox="0 0 600 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<g class="line">
<rect class="line-current" x="0" y="21" width="calc(100% - 1px)" height="21"></rect>
<text y="14"><tspan x="7" class="line-number">12</tspan></text>
<text y="36"><tspan x="7" class="line-number-active">13</tspan></text>
</g>
<g class="annotations-left">
<rect class="gutter" x="28" y="0" width="242" height="100%"></rect>
<g class="line">
<g class="gutter-avatar">
<circle cx="42" cy="9" r="7"></circle>
<text x="42" y="11.5" text-anchor="middle">EA</text>
</g>
<text y="14"><tspan x="58" class="gutter-text">Hello GitLens</tspan><tspan x="274" dx="-12" text-anchor="end" class="gutter-text">6 yrs ago</tspan></text>
<g class="gutter-avatar">
<circle cx="42" cy="31" r="7"></circle>
<text x="42" y="33.5" text-anchor="middle">EA</text>
</g>
<text y="36"><tspan x="58" class="gutter-text">Supercharged</tspan><tspan x="274" dx="-12" text-anchor="end" class="gutter-text">6 yrs ago</tspan></text>
</g>
<line class="heatmap" x1="270" y1="0" x2="270" y2="100%" />
</g>
<g class="annotations-right">
<g class="line">
<text y="14"><tspan x="278" class="function-declaration">function</tspan><tspan dx="6" class="function-name">gitlens</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">:</tspan><tspan dx="6" class="function-argument-type">object</tspan><tspan class="punctuation">)</tspan><tspan dx="6" class="punctuation">{</tspan></text>
<text y="36"><tspan x="278" dx="24" class="function-return">return</tspan><tspan dx="6" class="function-name">supercharged</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">)</tspan><tspan class="punctuation">;</tspan><tspan class="cursor">|</tspan></text>
</g>
</g>
</svg>
`;
}
}

+ 275
- 0
src/webviews/apps/welcome/components/svg-blame.ts View File

@ -0,0 +1,275 @@
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('gk-blame-svg')
export class BlameSvg extends LitElement {
static override styles = css`
:host {
position: relative;
}
:host svg:last-child {
display: block;
max-width: 69.2rem;
width: calc(100% - 2rem);
height: auto;
margin: 0 1rem;
border: 0.1rem solid var(--vscode-editorWidget-border);
}
* {
user-select: none;
}
.codicon {
font-family: codicon;
cursor: default;
user-select: none;
}
.glicon {
font-family: glicons;
cursor: default;
user-select: none;
}
.line text {
font-family: var(--vscode-editor-font-family);
font-size: var(--vscode-editor-font-size);
font-weight: var(--vscode-editor-font-weight);
}
.cursor {
fill: var(--vscode-editorCursor-foreground);
}
.splitter {
stroke: var(--vscode-editorGroup-border);
}
.punctuation {
fill: var(--vscode-editor-foreground);
}
.function-declaration {
fill: var(--vscode-symbolIcon-functionForeground);
}
.function-name {
fill: var(--vscode-symbolIcon-colorForeground);
}
.function-argument {
fill: var(--vscode-symbolIcon-variableForeground);
}
.function-argument-type {
fill: var(--vscode-symbolIcon-typeParameterForeground);
}
.function-return {
fill: var(--vscode-debugTokenExpression-name);
}
.line-current {
fill: var(--vscode-editor-lineHighlightBackground);
stroke: var(--vscode-editor-lineHighlightBorder);
stroke-width: 0.1rem;
fill-opacity: 0.8;
}
.line-number {
fill: var(--vscode-editorLineNumber-foreground);
}
.line-number-active {
fill: var(--vscode-editorLineNumber-activeForeground);
}
.blame {
fill: var(--vscode-gitlens-trailingLineForegroundColor);
cursor: pointer;
}
.codelens text {
font-family: var(--vscode-font-family);
font-size: var(--vscode-font-size);
font-weight: var(--vscode-font-weight);
fill: var(--vscode-editorCodeLens-foreground);
}
.codelens text tspan {
font-size: 0.8em;
}
.hover {
opacity: 0;
visibility: hidden;
position: absolute;
bottom: 30px;
right: -30px;
animation-duration: 0.25s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
.hover rect {
fill: var(--vscode-editorHoverWidget-background);
stroke: var(--vscode-editorHoverWidget-border);
stroke-width: 1;
}
.hover line {
stroke: var(--vscode-editorHoverWidget-border);
stroke-width: 1;
}
.hover text {
font-family: var(--vscode-font-family);
font-weight: var(--vscode-font-weight);
font-size: 1.1rem;
fill: var(--vscode-editorHoverWidget-foreground);
}
.hover__diff tspan {
font-family: var(--vscode-editor-font-family);
font-weight: var(--vscode-editor-font-weight);
font-size: var(--vscode-editor-font-size);
}
.hover__diff-removed {
fill: var(--vscode-gitDecoration-deletedResourceForeground);
}
.hover__diff-added {
fill: var(--vscode-gitDecoration-addedResourceForeground);
}
.hover__author {
font-weight: 700;
}
.hover__date {
font-style: italic;
}
.hover__link {
fill: #3794ff !important;
}
@keyframes fadeInHover {
0% {
opacity: 0;
visibility: visible;
}
100% {
opacity: 1;
visibility: visible;
}
}
@keyframes fadeOutHover {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
:host([hovered][hovering]) .hover {
animation-name: fadeInHover;
}
:host([hovered]:not([hovering])) .hover {
animation-name: fadeOutHover;
}
.blame,
.codelens {
transition: opacity 150ms ease-in-out;
}
:host(:not([inline])) .blame,
:host(:not([codelens])) .codelens {
cursor: default;
opacity: 0;
}
`;
@property({ type: Boolean, reflect: true })
inline?: boolean;
@property({ type: Boolean, reflect: true })
codelens?: boolean;
@property({ type: Boolean, reflect: true })
hovered?: boolean;
@property({ type: Boolean, reflect: true })
hovering?: boolean;
protected onMouseOver() {
this.hovered = true;
this.hovering = this.inline;
}
protected onMouseOut() {
this.hovered = true;
this.hovering = false;
}
override render() {
return html`
<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
<!-- prettier-ignore -->
<svg class="hover" width="600" height="177" viewBox="30 0 80 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="370" height="177" rx="3"></rect>
<text x="9" y="41" text-anchor="start"><tspan class="codicon" font-size="32">&#xeb99;</tspan></text>
<text>
<tspan class="hover__author hover__link" x="52" y="30">You</tspan><tspan>, 6 years ago via PR&nbsp;</tspan><tspan class="hover__author hover__link">#1</tspan><tspan class="hover__date" dx="12">(November 12th, 2016 3:41pm)</tspan><tspan x="52" y="55">Supercharge Git</tspan>
</text>
<line x1="0" y1="70" x2="371" y2="70" />
<text y="89">
<tspan x="9" dy="1.5" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeafd;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xea82;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeb01;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xea7c;</tspan>
</text>
<line x1="0" y1="99" x2="371" y2="99" />
<text class="hover__diff">
<tspan class="hover__diff-removed" x="9" y="119">- return git;</tspan>
<tspan class="hover__diff-added" x="9" y="136">+ return supercharged(git);</tspan>
</text>
<line x1="0" y1="147" x2="371" y2="147" />
<text y="166">
<tspan x="9">Changes</tspan><tspan dx="12" dy="1.5" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">3ac1d3f</tspan><tspan dx="9" dy="1.5" class="codicon">&#xea99;</tspan><tspan dx="6" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeafd;</tspan>
</text>
</svg>
<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
<!-- prettier-ignore -->
<svg width="600" height="45" viewBox="0 0 600 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<g class="codelens">
<text y="18"><tspan x="38">Eric Amodio, 3 minutes ago | 1 author (Eric Amodio)</tspan></text>
</g>
<g class="line">
<text y="34"><tspan x="7" class="line-number">13</tspan><tspan x="38" class="function-return">return</tspan><tspan dx="6" class="function-name">supercharged</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">)</tspan><tspan class="punctuation">;</tspan><tspan class="cursor">|</tspan><tspan dx="24" class="blame" @mouseover=${this
.onMouseOver} @mouseout=${this.onMouseOut}>You, 6 years ago via PR #1 • Supercharge Git</tspan></text>
</g>
<!-- <g class="line">
<text y="34"><tspan x="7" class="line-number">12</tspan><tspan x="38" class="function-declaration">function</tspan><tspan dx="6" class="function-name">gitlens</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">:</tspan><tspan dx="6" class="function-argument-type">object</tspan><tspan class="punctuation">)</tspan><tspan dx="6" class="punctuation">{</tspan><tspan class="cursor">|</tspan><tspan dx="24" class="blame" data-feature-blame="on">You, 6 years ago via PR #1 • Supercharge Git</tspan></text>
</g> -->
</svg>
`;
}
}

+ 192
- 0
src/webviews/apps/welcome/components/svg-graph.ts View File

@ -0,0 +1,192 @@
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('gk-graph-svg')
export class GraphSvg extends LitElement {
static override styles = css`
:host > svg {
display: block;
max-width: 69.2rem;
width: calc(100% - 2rem);
height: auto;
margin: 0 1rem;
border: 0.1rem solid var(--vscode-editorWidget-border);
fill: var(--vscode-editor-background);
}
* {
user-select: none;
}
text {
font-family: var(--vscode-font-family);
font-weight: var(--vscode-font-weight);
font-size: 1.1rem;
}
.codicon {
font-family: codicon;
cursor: default;
user-select: none;
}
.foreground {
fill: var(--vscode-editor-foreground);
}
.branch {
fill: white;
}
.branch-current {
font-weight: 700 !important;
}
.messages {
opacity: 0.7;
}
.authors {
opacity: 0.45;
}
.wip {
opacity: 0.45;
}
.lane1-foreground {
stroke: var(--vscode-gitlens-graphLane1Color);
}
.lane1-background {
fill: var(--vscode-gitlens-graphLane1Color);
}
.lane2-foreground {
stroke: var(--vscode-gitlens-graphLane2Color);
}
.lane2-background {
fill: var(--vscode-gitlens-graphLane2Color);
}
.lane3-foreground {
stroke: var(--vscode-gitlens-graphLane3Color);
}
.lane3-background {
fill: var(--vscode-gitlens-graphLane3Color);
}
.lane4-foreground {
stroke: var(--vscode-gitlens-graphLane4Color);
}
.lane4-background {
fill: var(--vscode-gitlens-graphLane4Color);
}
.lane5-foreground {
stroke: var(--vscode-gitlens-graphLane5Color);
}
.lane5-background {
fill: var(--vscode-gitlens-graphLane5Color);
}
`;
override render() {
return html`
<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
<!-- prettier-ignore -->
<svg width="850" height="290" viewBox="0 0 850 290" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="lane2-background" x="70" y="46" width="126" height="19" rx="4"/>
<text class="branch branch-current" x="74" y="59"><tspan dy="1" class="codicon">&#xeab2;</tspan><tspan dx="4" class="codicon">&#xea7a;</tspan><tspan dx="6" dy="-1">main</tspan></text>
<rect class="lane3-background" opacity="0.5" x="70" y="73" width="126" height="19" rx="4"/>
<text class="branch" x="74" y="87"><tspan dy="1" class="codicon">&#xebaa;</tspan><tspan dx="4" class="codicon">&#xea64;</tspan><tspan dx="6" dy="-1">feature/onboard</tspan></text>
<rect class="lane4-background" opacity="0.5" x="70" y="99" width="126" height="19" rx="4"/>
<text class="branch" x="74" y="113"><tspan dy="1" class="codicon">&#xea7a;</tspan><tspan dx="4" class="codicon">&#xea64;</tspan><tspan dx="6" dy="-1">feature/graph</tspan></text>
<rect class="lane5-background" opacity="0.5" x="70" y="237" width="126" height="19" rx="4"/>
<text class="branch" x="74" y="251"><tspan dy="1" class="codicon">&#xea7a;</tspan><tspan dx="6" dy="-1">bug/crash</tspan></text>
<rect class="lane1-background" opacity="0.2" x="216" y="20" width="128" height="18"/>
<rect class="lane1-background" x="342" y="20" width="2" height="18"/>
<line class="lane2-foreground" opacity="0.4" x1="196" y1="56" x2="230" y2="56" stroke-width="2"/>
<rect class="lane2-background" opacity="0.2" x="238" y="47" width="106" height="18"/>
<rect class="lane2-background" x="342" y="47" width="2" height="18"/>
<rect class="lane2-background" opacity="0.2" x="238" y="128" width="106" height="18" />
<rect class="lane2-background" x="342" y="128" width="2" height="18"/>
<rect class="lane2-background" opacity="0.2" x="238" y="263" width="106" height="18"/>
<rect class="lane2-background" x="342" y="263" width="2" height="18"/>
<line class="lane3-foreground" opacity="0.4" x1="196" y1="83" x2="253" y2="83" stroke-width="2"/>
<rect class="lane3-background" opacity="0.2" x="260" y="74" width="84" height="18"/>
<rect class="lane3-background" x="342" y="74" width="2" height="18"/>
<rect class="lane3-background" opacity="0.2" x="260" y="155" width="84" height="18"/>
<rect class="lane3-background" x="342" y="155" width="2" height="18"/>
<rect class="lane3-background" opacity="0.2" x="260" y="209" width="84" height="18"/>
<rect class="lane3-background" x="342" y="209" width="2" height="18"/>
<line class="lane4-foreground" opacity="0.4" x1="196" y1="109" x2="275" y2="109" stroke-width="2"/>
<rect class="lane4-background" opacity="0.2" x="282" y="101" width="62" height="18"/>
<rect class="lane4-background" x="342" y="101" width="2" height="18"/>
<rect class="lane4-background" x="342" y="182" width="2" height="18"/>
<rect class="lane4-background" opacity="0.2" x="282" y="182" width="62" height="18"/>
<line class="lane5-foreground" opacity="0.3" x1="196" y1="246" x2="297" y2="246" stroke-width="2"/>
<rect class="lane5-background" opacity="0.2" x="304" y="236" width="40" height="18"/>
<rect class="lane5-background" x="342" y="236" width="2" height="18"/>
<path class="lane5-foreground" d="M239 270.74H297C301.418 270.74 305 267.158 305 262.74V247" stroke-width="2"/>
<line class="lane1-foreground" x1="217" y1="38" x2="217" y2="319" stroke-width="2" stroke-dasharray="4 4"/>
<circle class="lane1-foreground container" cx="217" cy="29" r="8" stroke-width="2" stroke-dasharray="4 4"/>
<rect class="lane2-background" x="238" y="47" width="2" height="332"/>
<circle class="lane2-foreground container" cx="239" cy="56" r="8" stroke-width="2"/>
<circle class="lane2-foreground container" cx="239" cy="137" r="8" stroke-width="2"/>
<circle class="lane2-foreground container" cx="239" cy="271" r="8" stroke-width="2"/>
<rect class="lane3-background" x="260" y="74" width="2" height="305"/>
<circle class="lane3-foreground container" cx="261" cy="83" r="8" stroke-width="2"/>
<circle class="lane3-foreground container" cx="261" cy="164" r="8" stroke-width="2"/>
<circle class="lane3-foreground container" cx="261" cy="218" r="8" stroke-width="2"/>
<rect class="lane4-background" x="282" y="106" width="2" height="209"/>
<circle class="lane4-foreground container" cx="283" cy="110" r="8" stroke-width="2"/>
<circle class="lane4-foreground container" cx="283" cy="191" r="8" stroke-width="2"/>
<circle class="lane5-foreground container" cx="305" cy="245" r="8" stroke-width="2"/>
<text x="366" y="33.5" class="foreground wip"><tspan>Work in progress</tspan><tspan dx="9" dy="1" class="codicon">&#xea73;</tspan><tspan dx="3" dy="-1">2</tspan><tspan dx="9" dy="1" class="codicon">&#xea60;</tspan><tspan dx="3" dy="-1">1</tspan></text>
<text class="foreground messages">
<tspan x="366" y="59.5">Improves performance &amp; reduces bundle size</tspan>
<tspan x="366" y="86.5">Adds brand new welcome experience</tspan>
<tspan x="366" y="113.5">Adds new Commit Graph panel layout</tspan>
<tspan x="366" y="140.5">Optimizes startup performance</tspan>
<tspan x="366" y="167.5">Revamps Home view experience for better utility</tspan>
<tspan x="366" y="194.5">Optimizes Commit Graph loading performance</tspan>
<tspan x="366" y="221.5">Adds new GitLens Inspect side bar for a better experience</tspan>
<tspan x="366" y="248.5">Fixes crash when run on a phone</tspan>
<tspan x="366" y="275.5">Updates package dependencies</tspan>
</text>
<text class="foreground authors">
<tspan x="696" y="59.5">Eric Amodio</tspan>
<tspan x="696" y="86.5">Keith Daulton</tspan>
<tspan x="696" y="113.5">Eric Amodio</tspan>
<tspan x="696" y="140.5">Ramin Tadayon</tspan>
<tspan x="696" y="167.5">Keith Daulton</tspan>
<tspan x="696" y="194.5">Eric Amodio</tspan>
<tspan x="696" y="221.5">Keith Daulton</tspan>
<tspan x="696" y="248.5">Ramin Tadayon</tspan>
<tspan x="696" y="275.5">Ramin Tadayon</tspan>
</text>
</svg>
`;
}
}

+ 153
- 0
src/webviews/apps/welcome/components/svg-revision-navigation.ts View File

@ -0,0 +1,153 @@
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('gk-revision-navigation-svg')
export class RevisionNavigationSvg extends LitElement {
static override styles = css`
:host > svg {
display: block;
max-width: 69.2rem;
width: calc(100% - 2rem);
height: auto;
margin: 0 1rem;
border: 0.1rem solid var(--vscode-editorWidget-border);
}
* {
user-select: none;
}
.codicon {
font-family: codicon;
cursor: default;
user-select: none;
}
.glicon {
font-family: glicons;
cursor: default;
user-select: none;
}
.line text {
font-family: var(--vscode-editor-font-family);
font-size: var(--vscode-editor-font-size);
font-weight: var(--vscode-editor-font-weight);
}
.cursor {
fill: var(--vscode-editorCursor-foreground);
}
.punctuation {
fill: var(--vscode-editor-foreground);
}
.function-declaration {
fill: var(--vscode-symbolIcon-functionForeground);
}
.function-name {
fill: var(--vscode-symbolIcon-colorForeground);
}
.function-argument {
fill: var(--vscode-symbolIcon-variableForeground);
}
.function-argument-type {
fill: var(--vscode-symbolIcon-typeParameterForeground);
}
.function-return {
fill: var(--vscode-debugTokenExpression-name);
}
.line-current {
fill: var(--vscode-editor-lineHighlightBackground);
stroke: var(--vscode-editor-lineHighlightBorder);
stroke-width: 0.1rem;
fill-opacity: 0.8;
}
.line-number {
fill: var(--vscode-editorLineNumber-foreground);
}
.line-number-active {
fill: var(--vscode-editorLineNumber-activeForeground);
}
.splitter {
stroke: var(--vscode-editorGroup-border);
}
.added-line {
fill: var(--vscode-diffEditor-insertedLineBackground);
}
.removed-line {
fill: var(--vscode-diffEditor-removedLineBackground);
}
.added-text {
outline: 1px solid green;
fill: green;
}
.revision-left {
transition: opacity 150ms ease-in-out;
}
.revision-right {
transition: transform 150ms ease-in-out;
}
:host(:not([toggled])) .revision-left {
opacity: 0;
}
:host(:not([toggled])) .revision-right {
transform: translateX(-283px);
}
:host(:not([toggled])) .revision-right .added-text {
outline-color: transparent;
fill: inherit;
}
`;
@property({ type: Boolean, reflect: true })
toggled?: boolean;
override render() {
return html`
<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
<!-- prettier-ignore -->
<svg width="600" height="44" viewBox="0 0 600 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip-left">
<rect x="0" y="0" width="279" height="100%"></rect>
</clipPath>
</defs>
<g class="revision-left">
<rect class="removed-line" x="28" y="21" width="251" height="21"></rect>
<rect class="added-line" x="311" y="21" width="309" height="21"></rect>
<!-- <rect class="added-text" x="433" y="21" width="38" height="21"></rect> -->
<rect class="line-current" x="0" y="21" width="calc(100% - 1px)" height="21"></rect>
<g class="line line-left" style="clip-path: url(#clip-left)">
<text y="14"><tspan x="7" class="line-number">12</tspan><tspan x="40" class="function-declaration">function</tspan><tspan dx="6" class="function-name">gitlens</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">:</tspan><tspan dx="6" class="function-argument-type">object</tspan><tspan class="punctuation">)</tspan><tspan dx="6" class="punctuation">{</tspan></text>
<text y="36"><tspan x="7" class="line-number">13</tspan><tspan x="40" dx="24" class="function-return">return</tspan><tspan dx="6" class="function-name">supercharged</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">)</tspan><tspan class="punctuation">;</tspan></text>
</g>
<line class="splitter" x1="280" y1="0" x2="280" y2="100%" />
</g>
<g class="revision-right">
<g class="line line-right">
<text y="14"><tspan x="290" class="line-number">12</tspan><tspan x="323" class="function-declaration">function</tspan><tspan dx="6" class="function-name">gitlens</tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">:</tspan><tspan dx="6" class="function-argument-type">object</tspan><tspan class="punctuation">)</tspan><tspan dx="6" class="punctuation">{</tspan></text>
<text y="36"><tspan x="290" class="line-number-active">13</tspan><tspan x="323" dx="24" class="function-return">return</tspan><tspan dx="6" class="function-name"><tspan>super</tspan><tspan class="added-text">DuperC</tspan><tspan>harged</tspan></tspan><tspan class="punctuation">(</tspan><tspan class="function-argument">git</tspan><tspan class="punctuation">)</tspan><tspan class="punctuation">;</tspan><tspan class="cursor">|</tspan></text>
</g>
</g>
</svg>
`;
}
}

+ 200
- 0
src/webviews/apps/welcome/components/svg-timeline.ts View File

@ -0,0 +1,200 @@
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('gk-timeline-svg')
export class TimelineSvg extends LitElement {
static override styles = css`
:host > svg {
display: block;
max-width: 69.2rem;
width: calc(100% - 2rem);
height: auto;
margin: 0 1rem;
border: 0.1rem solid var(--vscode-editorWidget-border);
}
* {
user-select: none;
}
.additions line {
stroke: var(--vscode-gitlens-decorations-addedForegroundColor, #339e3e);
stroke-width: 1.2;
}
.deletions line {
stroke: var(--vscode-gitlens-decorations-deletedForegroundColor, #9e2716);
stroke-width: 1.2;
}
.grid-line {
stroke: var(--vscode-editorWidget-border, #474747);
stroke-dasharray: 4.5 4.5;
}
.lane1 circle {
fill: #7101ff; /*var(--vscode-gitlens-graphLane1Color, #7101ff);*/
opacity: 0.3;
}
.lane1 circle:hover {
cursor: pointer;
opacity: 0.8;
}
.lane2 circle {
fill: #f90; /*var(--vscode-gitlens-graphLane2Color, #f90);*/
opacity: 0.3;
}
.lane2 circle:hover {
cursor: pointer;
opacity: 0.8;
}
`;
override render() {
return html`
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 850 290">
<g class="additions">
<line x1="39" x2="39" y1="278" y2="276" />
<line x1="45" x2="45" y1="272" y2="265" />
<line x1="99" x2="99" y1="264" y2="249" />
<line x1="106" x2="106" y1="252" y2="225" />
<line x1="161" x2="161" y1="272" y2="265" />
<line x1="174" x2="174" y1="278" y2="276" />
<line x1="228" x2="228" y1="272" y2="265" />
<line x1="234" x2="234" y1="264" y2="249" />
<line x1="288" x2="288" y1="278" y2="276" />
<line x1="342" x2="342" y1="272" y2="265" />
<line x1="350" x2="350" y1="172" y2="63" />
<line x1="357" x2="357" y1="249" y2="218" />
<line x1="364" x2="364" y1="266" y2="254" />
<line x1="371" x2="371" y1="273" y2="266" />
<line x1="378" x2="378" y1="273" y2="266" />
<line x1="385" x2="385" y1="273" y2="266" />
<line x1="440" x2="440" y1="249" y2="218" />
<line x1="447" x2="447" y1="249" y2="218" />
<line x1="454" x2="454" y1="264" y2="249" />
<line x1="461" x2="461" y1="264" y2="249" />
<line x1="468" x2="468" y1="273" y2="266" />
<line x1="475" x2="475" y1="117" y2="20" />
<line x1="482" x2="482" y1="273" y2="266" />
<line x1="490" x2="490" y1="273" y2="266" />
<line x1="497" x2="497" y1="204" y2="129" />
<line x1="504" x2="504" y1="200" y2="120" />
<line x1="511" x2="511" y1="200" y2="120" />
<line x1="518" x2="518" y1="213" y2="145" />
<line x1="525" x2="525" y1="252" y2="225" />
<line x1="580" x2="580" y1="278" y2="276" />
<line x1="587" x2="587" y1="273" y2="266" />
<line x1="594" x2="594" y1="252" y2="225" />
<line x1="601" x2="601" y1="247" y2="214" />
<line x1="608" x2="608" y1="271" y2="263" />
<line x1="615" x2="615" y1="274" y2="268" />
<line x1="623" x2="623" y1="271" y2="263" />
<line x1="677" x2="677" y1="264" y2="249" />
<line x1="731" x2="731" y1="273" y2="266" />
<line x1="739" x2="739" y1="252" y2="225" />
<line x1="743" x2="743" y1="264" y2="249" />
<line x1="751" x2="751" y1="224" y2="168" />
<line x1="805" x2="805" y1="278" y2="276" />
</g>
<g class="deletions">
<line x1="39" x2="39" y1="276" y2="289" />
<line x1="45" x2="45" y1="270" y2="289" />
<line x1="99" x2="99" y1="262" y2="289" />
<line x1="106" x2="106" y1="250" y2="289" />
<line x1="161" x2="161" y1="270" y2="289" />
<line x1="174" x2="174" y1="276" y2="289" />
<line x1="228" x2="228" y1="270" y2="289" />
<line x1="234" x2="234" y1="262" y2="289" />
<line x1="288" x2="288" y1="276" y2="289" />
<line x1="342" x2="342" y1="270" y2="289" />
<line x1="350" x2="350" y1="170" y2="289" />
<line x1="357" x2="357" y1="249" y2="289" />
<line x1="364" x2="364" y1="264" y2="289" />
<line x1="371" x2="371" y1="271" y2="289" />
<line x1="378" x2="378" y1="271" y2="289" />
<line x1="385" x2="385" y1="271" y2="289" />
<line x1="440" x2="440" y1="247" y2="289" />
<line x1="447" x2="447" y1="247" y2="289" />
<line x1="454" x2="454" y1="262" y2="289" />
<line x1="461" x2="461" y1="262" y2="289" />
<line x1="468" x2="468" y1="271" y2="289" />
<line x1="475" x2="475" y1="115" y2="289" />
<line x1="482" x2="482" y1="271" y2="289" />
<line x1="490" x2="490" y1="271" y2="289" />
<line x1="497" x2="497" y1="202" y2="289" />
<line x1="504" x2="504" y1="198" y2="289" />
<line x1="511" x2="511" y1="198" y2="289" />
<line x1="518" x2="518" y1="211" y2="289" />
<line x1="525" x2="525" y1="250" y2="289" />
<line x1="580" x2="580" y1="276" y2="289" />
<line x1="587" x2="587" y1="271" y2="289" />
<line x1="594" x2="594" y1="250" y2="289" />
<line x1="601" x2="601" y1="245" y2="289" />
<line x1="608" x2="608" y1="269" y2="289" />
<line x1="615" x2="615" y1="272" y2="289" />
<line x1="623" x2="623" y1="269" y2="289" />
<line x1="677" x2="677" y1="262" y2="289" />
<line x1="731" x2="731" y1="271" y2="289" />
<line x1="739" x2="739" y1="250" y2="289" />
<line x1="743" x2="743" y1="262" y2="289" />
<line x1="751" x2="751" y1="222" y2="289" />
<line x1="805" x2="805" y1="276" y2="289" />
</g>
<g class="lane1">
<line class="grid-line" x1="39" x2="809" y1="99" y2="99" />
<circle cx="39" cy="99" r="4" />
<circle cx="45" cy="99" r="8" />
<circle cx="99" cy="99" r="17" />
<circle cx="106" cy="99" r="29" />
<circle cx="174" cy="99" r="4" />
<circle cx="350" cy="99" r="96" />
<circle cx="364" cy="99" r="12" />
<circle cx="378" cy="99" r="8" />
<circle cx="385" cy="99" r="8" />
<circle cx="447" cy="99" r="32" />
<circle cx="461" cy="99" r="17" />
<circle cx="468" cy="99" r="8" />
<circle cx="475" cy="99" r="100" />
<circle cx="482" cy="99" r="8" />
<circle cx="490" cy="99" r="8" />
<circle cx="497" cy="99" r="67" />
<circle cx="504" cy="99" r="71" />
<circle cx="511" cy="99" r="71" />
<circle cx="518" cy="99" r="61" />
<circle cx="525" cy="99" r="29" />
<circle cx="580" cy="99" r="4" />
<circle cx="594" cy="99" r="29" />
<circle cx="677" cy="99" r="17" />
<circle cx="731" cy="99" r="8" />
<circle cx="739" cy="99" r="29" />
</g>
<g class="lane2">
<line class="grid-line" x1="39" x2="809" y1="154" y2="154" />
<circle cx="161" cy="154" r="8" />
<circle cx="228" cy="154" r="8" />
<circle cx="234" cy="154" r="17" />
<circle cx="288" cy="154" r="4" />
<circle cx="342" cy="154" r="8" />
<circle cx="357" cy="154" r="31" />
<circle cx="371" cy="154" r="8" />
<circle cx="385" cy="154" r="8" />
<circle cx="440" cy="154" r="32" />
<circle cx="454" cy="154" r="17" />
<circle cx="587" cy="154" r="8" />
<circle cx="601" cy="154" r="33" />
<circle cx="608" cy="154" r="9" />
<circle cx="615" cy="154" r="7" />
<circle cx="623" cy="154" r="9" />
<circle cx="743" cy="154" r="17" />
<circle cx="751" cy="154" r="50" />
<circle cx="805" cy="154" r="4" />
</g>
</svg>
`;
}
}

+ 35
- 241
src/webviews/apps/welcome/welcome.html View File

@ -71,65 +71,7 @@
In-editor code annotations and rich hovers help you better understand how code changed and by whom In-editor code annotations and rich hovers help you better understand how code changed and by whom
</p> </p>
<div class="hover__box">
<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
<!-- prettier-ignore -->
<svg
id="blame-hover"
class="hover welcome__illustration"
width="600"
height="177"
viewBox="30 0 80 177"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="370" height="177" rx="3"></rect>
<text x="9" y="41" text-anchor="start"><tspan class="codicon" font-size="32">&#xeb99;</tspan></text>
<text>
<tspan class="hover__author hover__link" x="52" y="30">You</tspan><tspan>, 6 years ago via PR&nbsp;</tspan><tspan class="hover__author hover__link">#1</tspan><tspan class="hover__date" dx="12">(November 12th, 2016 3:41pm)</tspan><tspan x="52" y="55">Supercharge Git</tspan>
</text>
<line x1="0" y1="70" x2="371" y2="70" />
<text y="89">
<tspan x="9" dy="1.5" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeafd;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xea82;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeb01;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xea7c;</tspan>
</text>
<line x1="0" y1="99" x2="371" y2="99" />
<text class="hover__diff">
<tspan class="hover__diff-removed" x="9" y="119">- return git;</tspan>
<tspan class="hover__diff-added" x="9" y="136">+ return supercharged(git);</tspan>
</text>
<line x1="0" y1="147" x2="371" y2="147" />
<text y="166">
<tspan x="9">Changes</tspan><tspan dx="12" dy="1.5" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">3ac1d3f</tspan><tspan dx="9" dy="1.5" class="codicon">&#xea99;</tspan><tspan dx="6" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeafd;</tspan>
</text>
</svg>
<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
<!-- prettier-ignore -->
<svg
class="editor welcome__illustration"
width="600"
height="45"
viewBox="0 0 600 43"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g class="editor-codelens" data-feature-codelens="on">
<text y="18"><tspan x="38">Eric Amodio, 3 minutes ago | 1 author (Eric Amodio)</tspan></text>
</g>
<g class="editor-line">
<text y="34"><tspan x="7" class="editor-line-number">13</tspan><tspan x="38" class="editor-function-return">return</tspan><tspan dx="6" class="editor-function-name">supercharged</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">)</tspan><tspan class="editor-punctuation">;</tspan><tspan class="editor-cursor">|</tspan><tspan dx="24" class="editor-blame" data-hover="blame-hover" data-feature-blame="on">You, 6 years ago via PR #1 • Supercharge Git</tspan></text>
</g>
<!-- <g class="editor-line">
<text y="34"><tspan x="7" class="editor-line-number">12</tspan><tspan x="38" class="editor-function-declaration">function</tspan><tspan dx="6" class="editor-function-name">gitlens</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">:</tspan><tspan dx="6" class="editor-function-argument-type">object</tspan><tspan class="editor-punctuation">)</tspan><tspan dx="6" class="editor-punctuation">{</tspan><tspan class="editor-cursor">|</tspan><tspan dx="24" class="editor-blame" data-feature-blame="on">You, 6 years ago via PR #1 • Supercharge Git</tspan></text>
</g> -->
</svg>
</div>
<gk-blame-svg id="blame" inline codelens></gk-blame-svg>
<p style="margin: 0.5rem 1rem 0 1rem"> <p style="margin: 0.5rem 1rem 0 1rem">
<strong>Want more control?</strong> <strong>Want more control?</strong>
@ -175,45 +117,7 @@
></rect> ></rect>
</svg> </svg>
</p> </p>
<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
<!-- prettier-ignore -->
<svg
class="editor welcome__illustration"
width="600"
height="44"
viewBox="0 0 600 42"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g class="editor-line">
<rect class="editor-line-current" x="0" y="21" width="calc(100% - 1px)" height="21"></rect>
<text y="14"><tspan x="7" class="editor-line-number">12</tspan></text>
<text y="36"><tspan x="7" class="editor-line-number-active">13</tspan></text>
</g>
<g class="editor-annotations-left">
<rect class="editor-gutter" x="28" y="0" width="242" height="100%"></rect>
<g class="editor-line">
<g class="editor-gutter-avatar">
<circle cx="42" cy="9" r="7"></circle>
<text x="42" y="11.5" text-anchor="middle">EA</text>
</g>
<text y="14"><tspan x="58" class="editor-gutter-text">Hello GitLens</tspan><tspan x="274" dx="-12" text-anchor="end" class="editor-gutter-text">6 yrs ago</tspan></text>
<g class="editor-gutter-avatar">
<circle cx="42" cy="31" r="7"></circle>
<text x="42" y="33.5" text-anchor="middle">EA</text>
</g>
<text y="36"><tspan x="58" class="editor-gutter-text">Supercharged</tspan><tspan x="274" dx="-12" text-anchor="end" class="editor-gutter-text">6 yrs ago</tspan></text>
</g>
<line class="editor-heatmap" x1="270" y1="0" x2="270" y2="100%" />
</g>
<g class="editor-annotations-right">
<g class="editor-line">
<text y="14"><tspan x="278" class="editor-function-declaration">function</tspan><tspan dx="6" class="editor-function-name">gitlens</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">:</tspan><tspan dx="6" class="editor-function-argument-type">object</tspan><tspan class="editor-punctuation">)</tspan><tspan dx="6" class="editor-punctuation">{</tspan></text>
<text y="36"><tspan x="278" dx="24" class="editor-function-return">return</tspan><tspan dx="6" class="editor-function-name">supercharged</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">)</tspan><tspan class="editor-punctuation">;</tspan><tspan class="editor-cursor">|</tspan></text>
</g>
</g>
</svg>
<gk-annotations-svg id="annotations" toggled></gk-annotations-svg>
<h3>Revision Navigation</h3> <h3>Revision Navigation</h3>
<p class="welcome__toolbar"> <p class="welcome__toolbar">
@ -255,152 +159,21 @@
></rect> ></rect>
</svg> </svg>
</p> </p>
<gk-revision-navigation-svg id="revision" toggled></gk-revision-navigation-svg>
<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
<!-- prettier-ignore -->
<svg
class="editor welcome__illustration"
width="600"
height="44"
viewBox="0 0 600 42"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<clipPath id="left-clip">
<rect x="0" y="0" width="279" height="100%"></rect>
</clipPath>
</defs>
<g class="editor-revision-left">
<rect class="editor-removed-line" x="28" y="21" width="251" height="21"></rect>
<rect class="editor-added-line" x="311" y="21" width="309" height="21"></rect>
<!-- <rect class="editor-added-text" x="433" y="21" width="38" height="21"></rect> -->
<rect class="editor-line-current" x="0" y="21" width="calc(100% - 1px)" height="21"></rect>
<g class="editor-line editor-line-left" style="clip-path: url(#left-clip)">
<text y="14"><tspan x="7" class="editor-line-number">12</tspan><tspan x="40" class="editor-function-declaration">function</tspan><tspan dx="6" class="editor-function-name">gitlens</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">:</tspan><tspan dx="6" class="editor-function-argument-type">object</tspan><tspan class="editor-punctuation">)</tspan><tspan dx="6" class="editor-punctuation">{</tspan></text>
<text y="36"><tspan x="7" class="editor-line-number">13</tspan><tspan x="40" dx="24" class="editor-function-return">return</tspan><tspan dx="6" class="editor-function-name">supercharged</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">)</tspan><tspan class="editor-punctuation">;</tspan></text>
</g>
<line class="editor-splitter" x1="280" y1="0" x2="280" y2="100%" />
</g>
<g class="editor-revision-right">
<g class="editor-line editor-line-right">
<text y="14"><tspan x="290" class="editor-line-number">12</tspan><tspan x="323" class="editor-function-declaration">function</tspan><tspan dx="6" class="editor-function-name">gitlens</tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">:</tspan><tspan dx="6" class="editor-function-argument-type">object</tspan><tspan class="editor-punctuation">)</tspan><tspan dx="6" class="editor-punctuation">{</tspan></text>
<text y="36"><tspan x="290" class="editor-line-number">13</tspan><tspan x="323" dx="24" class="editor-function-return">return</tspan><tspan dx="6" class="editor-function-name"><tspan>super</tspan><tspan class="editor-added-text">DuperC</tspan><tspan>harged</tspan></tspan><tspan class="editor-punctuation">(</tspan><tspan class="editor-function-argument">git</tspan><tspan class="editor-punctuation">)</tspan><tspan class="editor-punctuation">;</tspan><tspan class="editor-cursor">|</tspan></text>
</g>
</g>
</svg>
<h3>Commit Graph ✨</h3>
<p>
The
<h3>
<a <a
class="muted"
href="command:gitlens.showGraph" href="command:gitlens.showGraph"
data-requires="repo" data-requires="repo"
title="Open Commit Graph" title="Open Commit Graph"
aria-label="Open Commit Graph" aria-label="Open Commit Graph"
>Commit Graph</a >Commit Graph</a
> >
helps you easily visualize and keep track of all work in progress<br />
</p>
<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
<!-- prettier-ignore -->
<svg class="graph welcome__illustration" width="850" height="290" viewBox="0 0 850 290" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="graph__container" width="850" height="290" rx="14"/>
<rect class="graph__lane-2-background" x="70" y="46" width="126" height="19" rx="4"/>
<text class="graph__branch graph__branch-current" x="74" y="59"><tspan dy="1" class="codicon">&#xeab2;</tspan><tspan dx="4" class="codicon">&#xea7a;</tspan><tspan dx="6" dy="-1">main</tspan></text>
<rect class="graph__lane-3-background" opacity="0.5" x="70" y="73" width="126" height="19" rx="4"/>
<text class="graph__branch" x="74" y="87"><tspan dy="1" class="codicon">&#xebaa;</tspan><tspan dx="4" class="codicon">&#xea64;</tspan><tspan dx="6" dy="-1">feature/onboard</tspan></text>
<rect class="graph__lane-4-background" opacity="0.5" x="70" y="99" width="126" height="19" rx="4"/>
<text class="graph__branch" x="74" y="113"><tspan dy="1" class="codicon">&#xea7a;</tspan><tspan dx="4" class="codicon">&#xea64;</tspan><tspan dx="6" dy="-1">feature/graph</tspan></text>
<rect class="graph__lane-5-background" opacity="0.5" x="70" y="237" width="126" height="19" rx="4"/>
<text class="graph__branch" x="74" y="251"><tspan dy="1" class="codicon">&#xea7a;</tspan><tspan dx="6" dy="-1">bug/crash</tspan></text>
<rect class="graph__lane-1-background" opacity="0.2" x="216" y="20" width="128" height="18"/>
<rect class="graph__lane-1-background" x="342" y="20" width="2" height="18"/>
<line class="graph__lane-2-foreground" opacity="0.4" x1="196" y1="56" x2="230" y2="56" stroke-width="2"/>
<rect class="graph__lane-2-background" opacity="0.2" x="238" y="47" width="106" height="18"/>
<rect class="graph__lane-2-background" x="342" y="47" width="2" height="18"/>
<rect class="graph__lane-2-background" opacity="0.2" x="238" y="128" width="106" height="18" />
<rect class="graph__lane-2-background" x="342" y="128" width="2" height="18"/>
<rect class="graph__lane-2-background" opacity="0.2" x="238" y="263" width="106" height="18"/>
<rect class="graph__lane-2-background" x="342" y="263" width="2" height="18"/>
<line class="graph__lane-3-foreground" opacity="0.4" x1="196" y1="83" x2="253" y2="83" stroke-width="2"/>
<rect class="graph__lane-3-background" opacity="0.2" x="260" y="74" width="84" height="18"/>
<rect class="graph__lane-3-background" x="342" y="74" width="2" height="18"/>
<rect class="graph__lane-3-background" opacity="0.2" x="260" y="155" width="84" height="18"/>
<rect class="graph__lane-3-background" x="342" y="155" width="2" height="18"/>
<rect class="graph__lane-3-background" opacity="0.2" x="260" y="209" width="84" height="18"/>
<rect class="graph__lane-3-background" x="342" y="209" width="2" height="18"/>
<line class="graph__lane-4-foreground" opacity="0.4" x1="196" y1="109" x2="275" y2="109" stroke-width="2"/>
<rect class="graph__lane-4-background" opacity="0.2" x="282" y="101" width="62" height="18"/>
<rect class="graph__lane-4-background" x="342" y="101" width="2" height="18"/>
<rect class="graph__lane-4-background" x="342" y="182" width="2" height="18"/>
<rect class="graph__lane-4-background" opacity="0.2" x="282" y="182" width="62" height="18"/>
<line class="graph__lane-5-foreground" opacity="0.3" x1="196" y1="246" x2="297" y2="246" stroke-width="2"/>
<rect class="graph__lane-5-background" opacity="0.2" x="304" y="236" width="40" height="18"/>
<rect class="graph__lane-5-background" x="342" y="236" width="2" height="18"/>
<path class="graph__lane-5-foreground" d="M239 270.74H297C301.418 270.74 305 267.158 305 262.74V247" stroke-width="2"/>
<line class="graph__lane-1-foreground" x1="217" y1="38" x2="217" y2="319" stroke-width="2" stroke-dasharray="4 4"/>
<circle class="graph__lane-1-foreground graph__container" cx="217" cy="29" r="8" stroke-width="2" stroke-dasharray="4 4"/>
<rect class="graph__lane-2-background" x="238" y="47" width="2" height="332"/>
<circle class="graph__lane-2-foreground graph__container" cx="239" cy="56" r="8" stroke-width="2"/>
<circle class="graph__lane-2-foreground graph__container" cx="239" cy="137" r="8" stroke-width="2"/>
<circle class="graph__lane-2-foreground graph__container" cx="239" cy="271" r="8" stroke-width="2"/>
<rect class="graph__lane-3-background" x="260" y="74" width="2" height="305"/>
<circle class="graph__lane-3-foreground graph__container" cx="261" cy="83" r="8" stroke-width="2"/>
<circle class="graph__lane-3-foreground graph__container" cx="261" cy="164" r="8" stroke-width="2"/>
<circle class="graph__lane-3-foreground graph__container" cx="261" cy="218" r="8" stroke-width="2"/>
<rect class="graph__lane-4-background" x="282" y="106" width="2" height="209"/>
<circle class="graph__lane-4-foreground graph__container" cx="283" cy="110" r="8" stroke-width="2"/>
<circle class="graph__lane-4-foreground graph__container" cx="283" cy="191" r="8" stroke-width="2"/>
<circle class="graph__lane-5-foreground graph__container" cx="305" cy="245" r="8" stroke-width="2"/>
<text x="366" y="33.5" class="graph__foreground graph__wip"><tspan>Work in progress</tspan><tspan dx="9" dy="1" class="codicon">&#xea73;</tspan><tspan dx="3" dy="-1">2</tspan><tspan dx="9" dy="1" class="codicon">&#xea60;</tspan><tspan dx="3" dy="-1">1</tspan></text>
<text class="graph__foreground graph__messages">
<tspan x="366" y="59.5">Improves performance &amp; reduces bundle size</tspan>
<tspan x="366" y="86.5">Adds brand new welcome experience</tspan>
<tspan x="366" y="113.5">Adds new Commit Graph panel layout</tspan>
<tspan x="366" y="140.5">Optimizes startup performance</tspan>
<tspan x="366" y="167.5">Revamps Home view experience for better utility</tspan>
<tspan x="366" y="194.5">Optimizes Commit Graph loading performance</tspan>
<tspan x="366" y="221.5">Adds new GitLens Inspect side bar for a better experience</tspan>
<tspan x="366" y="248.5">Fixes crash when run on a phone</tspan>
<tspan x="366" y="275.5">Updates package dependencies</tspan>
</text>
<text class="graph__foreground graph__authors">
<tspan x="696" y="59.5">Eric Amodio</tspan>
<tspan x="696" y="86.5">Keith Daulton</tspan>
<tspan x="696" y="113.5">Eric Amodio</tspan>
<tspan x="696" y="140.5">Ramin Tadayon</tspan>
<tspan x="696" y="167.5">Keith Daulton</tspan>
<tspan x="696" y="194.5">Eric Amodio</tspan>
<tspan x="696" y="221.5">Keith Daulton</tspan>
<tspan x="696" y="248.5">Ramin Tadayon</tspan>
<tspan x="696" y="275.5">Ramin Tadayon</tspan>
</text>
</svg>
✨
</h3>
<p>Helps you easily visualize and keep track of all work in progress<br /></p>
<gk-graph-svg></gk-graph-svg>
<h3>Side Bar Views</h3> <h3>Side Bar Views</h3>
<p>Powerful views into Git that don't come with VS Code</p> <p>Powerful views into Git that don't come with VS Code</p>
@ -497,20 +270,40 @@
<code-icon icon="question"></code-icon> Features which need a repository are currently unavailable <code-icon icon="question"></code-icon> Features which need a repository are currently unavailable
</p> </p>
<h3>Focus ✨</h3>
<p>
The
<h3>
<a <a
class="muted"
href="command:gitlens.showFocusPage" href="command:gitlens.showFocusPage"
data-requires="repo" data-requires="repo"
title="Open Focus" title="Open Focus"
aria-label="Open Focus" aria-label="Open Focus"
>Focus</a >Focus</a
> >
view helps you focus on what's important by providing you with a comprehensive list of all your pull
✨
</h3>
<p>
Helps you focus on what's important by providing you with a comprehensive list of all your pull
requests and issues on your GitHub repos. requests and issues on your GitHub repos.
</p> </p>
<h3>
<a
class="muted"
href="command:gitlens.showTimelineView"
data-requires="repo"
title="Show Visual File History view"
aria-label="Show Visual File History view"
>Visual File History</a
>
✨
</h3>
<p>
Enables you to quickly see the evolution of a file, including when changes were made, how large they
were, and who made them. Use it to quickly find when the most impactful changes were made to a file
or who best to talk to about file changes and more.
</p>
<gk-timeline-svg></gk-timeline-svg>
<h3>Integrations</h3> <h3>Integrations</h3>
<p>GitLens provides issue and pull request auto-linking with many Git hosting services.</p> <p>GitLens provides issue and pull request auto-linking with many Git hosting services.</p>
<p> <p>
@ -518,6 +311,7 @@
issues and pull requests, pull requests associated with branches and commits, and avatars. issues and pull requests, pull requests associated with branches and commits, and avatars.
</p> </p>
</section> </section>
<section class="welcome__section welcome__section-bar"> <section class="welcome__section welcome__section-bar">
<h2>Get Started</h2> <h2>Get Started</h2>
<p> <p>
@ -703,7 +497,7 @@
</section> </section>
</main> </main>
<footer> <footer>
<p>✨ Requires a trial or subscription to use this on privately hosted repos</p>
<p>✨ Requires a trial or subscription for use on privately hosted repos</p>
</footer> </footer>
#{endOfBody} #{endOfBody}
</body> </body>

+ 13
- 351
src/webviews/apps/welcome/welcome.scss View File

@ -16,6 +16,10 @@ a {
} }
} }
a.muted {
color: var(--color-foreground);
}
a, a,
button:not([disabled]), button:not([disabled]),
[tabindex]:not([tabindex='-1']) { [tabindex]:not([tabindex='-1']) {
@ -24,10 +28,6 @@ button:not([disabled]),
} }
} }
// code-icon {
// font-size: inherit;
// }
nav { nav {
margin-bottom: 1.6rem; margin-bottom: 1.6rem;
} }
@ -396,140 +396,20 @@ gk-card p {
} }
} }
.editor {
border: 0.1rem solid var(--vscode-editorWidget-border);
* {
user-select: none;
}
&-line text {
font-family: var(--vscode-editor-font-family);
font-size: var(--vscode-editor-font-size);
font-weight: var(--vscode-editor-font-weight);
}
&-cursor {
fill: var(--vscode-editorCursor-foreground);
}
&-blame {
fill: var(--vscode-gitlens-trailingLineForegroundColor);
cursor: pointer;
&.is-disabled {
opacity: 0;
}
}
&-codelens text {
font-family: var(--vscode-font-family);
font-size: var(--vscode-font-size);
font-weight: var(--vscode-font-weight);
fill: var(--vscode-editorCodeLens-foreground);
tspan {
font-size: 0.8em;
}
&.is-disabled {
opacity: 0;
}
}
&-heatmap {
stroke: #7162db;
}
&-punctuation {
fill: var(--vscode-editor-foreground);
}
&-function-declaration {
fill: var(--vscode-symbolIcon-functionForeground);
}
&-function-name {
fill: var(--vscode-symbolIcon-colorForeground);
}
&-function-argument {
fill: var(--vscode-symbolIcon-variableForeground);
}
&-function-argument-type {
fill: var(--vscode-symbolIcon-typeParameterForeground);
}
&-function-return {
fill: var(--vscode-debugTokenExpression-name);
}
&-line-current {
fill: var(--vscode-editor-lineHighlightBackground);
stroke: var(--vscode-editor-lineHighlightBorder);
stroke-width: 0.1rem;
fill-opacity: 0.8;
}
&-line-number {
fill: var(--vscode-editorLineNumber-foreground);
}
&-line-number-active {
fill: var(--vscode-editorLineNumber-activeForeground);
}
&-gutter {
fill: var(--vscode-gitlens-gutterBackgroundColor);
}
&-gutter-avatar {
circle {
fill: var(--vscode-editorInfo-foreground);
}
text {
fill: var(--vscode-gitlens-gutterForegroundColor);
font-size: 0.75rem;
}
}
&-gutter-text {
fill: var(--vscode-gitlens-gutterForegroundColor);
}
&-removed-line {
fill: var(--vscode-diffEditor-removedLineBackground);
}
&-added-line {
fill: var(--vscode-diffEditor-insertedLineBackground);
}
&-added-text {
outline: 1px solid green;
fill: green;
}
&-splitter {
stroke: var(--vscode-editorGroup-border);
}
}
@keyframes wiggle { @keyframes wiggle {
0%, 0%,
5%,
8%,
100% { 100% {
transform: rotate(0) scale(1); transform: rotate(0) scale(1);
} }
1%, 1%,
3% {
4% {
transform: rotate(0.02turn) scale(var(--wiggle-scale-1)); transform: rotate(0.02turn) scale(var(--wiggle-scale-1));
} }
2%, 2%,
4% {
6% {
transform: rotate(-0.02turn) scale(var(--wiggle-scale-2)); transform: rotate(-0.02turn) scale(var(--wiggle-scale-2));
} }
} }
@ -555,11 +435,11 @@ gk-card p {
&__annotations { &__annotations {
&:not(.inactive) { &:not(.inactive) {
--wiggle-scale-1: 1.08;
--wiggle-scale-2: 1.15;
--wiggle-scale-1: 1.14;
--wiggle-scale-2: 1.28;
transform-origin: 60%; transform-origin: 60%;
animation: wiggle 8s ease-in-out 4s infinite;
animation: wiggle 5s ease-in-out 2s infinite;
animation-timing-function: steps(8); animation-timing-function: steps(8);
} }
@ -586,11 +466,11 @@ gk-card p {
} }
&__revision { &__revision {
--wiggle-scale-1: 1.08;
--wiggle-scale-2: 1.2;
--wiggle-scale-1: 1.14;
--wiggle-scale-2: 1.28;
transform-origin: 5%; transform-origin: 5%;
animation: wiggle 8s ease-in-out 6s infinite;
animation: wiggle 5s ease-in-out 4s infinite;
animation-timing-function: steps(8); animation-timing-function: steps(8);
} }
@ -624,224 +504,6 @@ gk-card p {
} }
} }
.graph {
border: 0.1rem solid var(--vscode-editorWidget-border);
text {
font-family: var(--vscode-font-family);
font-weight: var(--vscode-font-weight);
font-size: 1.1rem;
}
&__container {
fill: var(--vscode-editor-background);
}
&__foreground {
fill: var(--vscode-editor-foreground);
}
&__branch {
fill: white;
}
&__branch-current {
font-weight: 700 !important;
}
&__messages {
opacity: 0.7;
}
&__authors {
opacity: 0.45;
}
&__wip {
opacity: 0.45;
}
&__lane-1-foreground {
stroke: var(--vscode-gitlens-graphLane1Color);
}
&__lane-1-background {
fill: var(--vscode-gitlens-graphLane1Color);
}
&__lane-2-foreground {
stroke: var(--vscode-gitlens-graphLane2Color);
}
&__lane-2-background {
fill: var(--vscode-gitlens-graphLane2Color);
}
&__lane-3-foreground {
stroke: var(--vscode-gitlens-graphLane3Color);
}
&__lane-3-background {
fill: var(--vscode-gitlens-graphLane3Color);
}
&__lane-4-foreground {
stroke: var(--vscode-gitlens-graphLane4Color);
}
&__lane-4-background {
fill: var(--vscode-gitlens-graphLane4Color);
}
&__lane-5-foreground {
stroke: var(--vscode-gitlens-graphLane5Color);
}
&__lane-5-background {
fill: var(--vscode-gitlens-graphLane5Color);
}
}
@keyframes fadeInHover {
0% {
opacity: 0;
visibility: visible;
}
100% {
opacity: 1;
visibility: visible;
}
}
@keyframes fadeOutHover {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
.hover {
opacity: 0;
visibility: hidden;
position: absolute;
bottom: 30px;
right: -30px;
animation-duration: 0.2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
&[hovering='true'] {
animation-name: fadeInHover;
}
&[hovering='false'] {
animation-name: fadeOutHover;
}
&__box {
position: relative;
}
rect {
fill: var(--vscode-editorHoverWidget-background);
stroke: var(--vscode-editorHoverWidget-border);
stroke-width: 1;
}
line {
stroke: var(--vscode-editorHoverWidget-border);
stroke-width: 1;
}
text {
font-family: var(--vscode-font-family);
font-weight: var(--vscode-font-weight);
font-size: 1.1rem;
fill: var(--vscode-editorHoverWidget-foreground);
}
&__diff {
tspan {
font-family: var(--vscode-editor-font-family);
font-weight: var(--vscode-editor-font-weight);
font-size: var(--vscode-editor-font-size);
}
&-removed {
fill: var(--vscode-gitDecoration-deletedResourceForeground);
}
&-added {
fill: var(--vscode-gitDecoration-addedResourceForeground);
}
}
&__author {
font-weight: 700;
}
&__date {
font-style: italic;
}
&__link {
fill: #3794ff !important;
}
}
[data-action] {
cursor: pointer;
}
body[data-feature-blame='off'] {
[data-feature-blame='on'] {
opacity: 0;
}
}
.editor-annotations-left,
.editor-revision-left,
[data-feature-blame='on'],
[data-feature-codelens='on'] {
transition: opacity 150ms ease-in-out;
}
.editor-annotations-right,
.editor-revision-right {
transition: transform 150ms ease-in-out;
}
body[data-feature-codelens='off'] {
[data-feature-codelens='on'] {
opacity: 0;
}
}
body[data-feature-annotations='off'] {
.editor-annotations-left {
opacity: 0;
}
.editor-annotations-right {
transform: translateX(-242px);
}
}
body[data-feature-revision='off'] {
.editor-revision-left {
opacity: 0;
}
.editor-revision-right {
transform: translateX(-283px);
.editor-added-text {
outline-color: transparent;
fill: inherit;
}
}
}
body { body {
&[data-repos='blocked'] [data-requires='repo'] { &[data-repos='blocked'] [data-requires='repo'] {
opacity: 0.5; opacity: 0.5;

+ 28
- 40
src/webviews/apps/welcome/welcome.ts View File

@ -4,15 +4,22 @@ import type { Disposable } from 'vscode';
import type { IpcMessage } from '../../protocol'; import type { IpcMessage } from '../../protocol';
import { onIpc } from '../../protocol'; import { onIpc } from '../../protocol';
import type { State } from '../../welcome/protocol'; import type { State } from '../../welcome/protocol';
import { DidChangeRepositoriesType, UpdateConfigurationCommandType } from '../../welcome/protocol';
import { DidChangeNotificationType, UpdateConfigurationCommandType } from '../../welcome/protocol';
import { App } from '../shared/appBase'; import { App } from '../shared/appBase';
import { DOM } from '../shared/dom'; import { DOM } from '../shared/dom';
import type { AnnotationsSvg } from './components/svg-annotations';
import type { BlameSvg } from './components/svg-blame';
import type { RevisionNavigationSvg } from './components/svg-revision-navigation';
// import { Snow } from '../shared/snow'; // import { Snow } from '../shared/snow';
import '../shared/components/code-icon'; import '../shared/components/code-icon';
import '../shared/components/button'; import '../shared/components/button';
import './components/card'; import './components/card';
import './components/gitlens-logo'; import './components/gitlens-logo';
import './components/gitlens-plus-logo';
import './components/svg-annotations';
import './components/svg-blame';
import './components/svg-graph';
import './components/svg-revision-navigation';
import './components/svg-timeline';
export class WelcomeApp extends App<State> { export class WelcomeApp extends App<State> {
constructor() { constructor() {
@ -28,18 +35,6 @@ export class WelcomeApp extends App {
...(super.onBind?.() ?? []), ...(super.onBind?.() ?? []),
DOM.on('[data-feature]', 'change', (e, target: HTMLInputElement) => this.onFeatureToggled(e, target)), DOM.on('[data-feature]', 'change', (e, target: HTMLInputElement) => this.onFeatureToggled(e, target)),
DOM.on('[data-feature]', 'click', (e, target: HTMLElement) => this.onFeatureToggled(e, target)), DOM.on('[data-feature]', 'click', (e, target: HTMLElement) => this.onFeatureToggled(e, target)),
DOM.on('[data-hover]', 'mouseover', (e, target: HTMLElement) => {
const hoverTargetId = target.dataset.hover;
if (!hoverTargetId) return;
document.getElementById(hoverTargetId)?.setAttribute('hovering', 'true');
}),
DOM.on('[data-hover]', 'mouseout', (e, target: HTMLElement) => {
const hoverTargetId = target.dataset.hover;
if (!hoverTargetId) return;
document.getElementById(hoverTargetId)?.setAttribute('hovering', 'false');
}),
DOM.on('[data-requires="repo"]', 'click', (e, target: HTMLElement) => this.onRepoFeatureClicked(e, target)), DOM.on('[data-requires="repo"]', 'click', (e, target: HTMLElement) => this.onRepoFeatureClicked(e, target)),
]; ];
return disposables; return disposables;
@ -49,13 +44,13 @@ export class WelcomeApp extends App {
const msg = e.data as IpcMessage; const msg = e.data as IpcMessage;
switch (msg.method) { switch (msg.method) {
case DidChangeRepositoriesType.method:
case DidChangeNotificationType.method:
this.log(`onMessageReceived(${msg.id}): name=${msg.method}`); this.log(`onMessageReceived(${msg.id}): name=${msg.method}`);
onIpc(DidChangeRepositoriesType, msg, params => {
this.state.repoFeaturesBlocked = params.repoFeaturesBlocked;
onIpc(DidChangeNotificationType, msg, params => {
this.state = params.state;
this.setState(this.state); this.setState(this.state);
this.updateRepoState();
this.updateState();
}); });
break; break;
default: default:
@ -79,7 +74,13 @@ export class WelcomeApp extends App {
if (!feature) return; if (!feature) return;
if (e.type !== 'change') { if (e.type !== 'change') {
this.toggleFeatureState(feature);
if (feature === 'revision') {
const $el = document.getElementById('revision') as RevisionNavigationSvg;
$el.toggled = !$el.toggled;
} else if (feature === 'annotations') {
const $el = document.getElementById('annotations') as AnnotationsSvg;
$el.toggled = !$el.toggled;
}
return; return;
} }
@ -109,24 +110,21 @@ export class WelcomeApp extends App {
} }
private updateVersion() { private updateVersion() {
const { version } = this.state;
document.getElementById('version')!.textContent = version;
document.getElementById('version')!.textContent = this.state.version;
} }
private updateFeatures() { private updateFeatures() {
const { config } = this.state; const { config } = this.state;
this.setFeatureState('blame', config.currentLine ?? false);
this.setFeatureState('codelens', config.codeLens ?? false);
}
const $el = document.getElementById('blame') as BlameSvg;
$el.inline = config.currentLine ?? false;
$el.codelens = config.codeLens ?? false;
private setFeatureState(feature: string, on: boolean) {
document.body.setAttribute(`data-feature-${feature}`, on ? 'on' : 'off');
}
let $input = document.getElementById('inline-blame') as HTMLInputElement;
$input.checked = config.currentLine ?? false;
private toggleFeatureState(feature: string) {
const state = document.body.getAttribute(`data-feature-${feature}`);
this.setFeatureState(feature, state === 'off');
$input = document.getElementById('codelens') as HTMLInputElement;
$input.checked = config.codeLens ?? false;
} }
private updateRepoState() { private updateRepoState() {
@ -137,13 +135,3 @@ export class WelcomeApp extends App {
new WelcomeApp(); new WelcomeApp();
// requestAnimationFrame(() => new Snow()); // requestAnimationFrame(() => new Snow());
function gitlens(code: string) {
return supercharged(code);
}
gitlens('');
function supercharged(code: string) {
return code;
}

+ 3
- 4
src/webviews/welcome/protocol.ts View File

@ -8,7 +8,6 @@ export interface State {
codeLens: Config['codeLens']['enabled']; codeLens: Config['codeLens']['enabled'];
currentLine: Config['currentLine']['enabled']; currentLine: Config['currentLine']['enabled'];
}; };
customSettings?: Record<string, boolean>;
repoFeaturesBlocked?: boolean; repoFeaturesBlocked?: boolean;
} }
@ -20,7 +19,7 @@ export const UpdateConfigurationCommandType = new IpcCommandType
'welcome/configuration/update', 'welcome/configuration/update',
); );
export interface DidChangeRepositoriesParams {
repoFeaturesBlocked?: boolean;
export interface DidChangeParams {
state: State;
} }
export const DidChangeRepositoriesType = new IpcNotificationType<DidChangeRepositoriesParams>('repositories/didChange');
export const DidChangeNotificationType = new IpcNotificationType<DidChangeParams>('welcome/didChange', true);

+ 26
- 27
src/webviews/welcome/welcomeWebview.ts View File

@ -1,11 +1,12 @@
import type { ConfigurationChangeEvent } from 'vscode';
import { Disposable, workspace } from 'vscode'; import { Disposable, workspace } from 'vscode';
import type { Container } from '../../container'; import type { Container } from '../../container';
import { configuration } from '../../system/configuration'; import { configuration } from '../../system/configuration';
import type { IpcMessage } from '../protocol'; import type { IpcMessage } from '../protocol';
import { onIpc } from '../protocol'; import { onIpc } from '../protocol';
import type { WebviewController, WebviewProvider } from '../webviewController'; import type { WebviewController, WebviewProvider } from '../webviewController';
import type { DidChangeRepositoriesParams, State, UpdateConfigurationParams } from './protocol';
import { DidChangeRepositoriesType, UpdateConfigurationCommandType } from './protocol';
import type { State, UpdateConfigurationParams } from './protocol';
import { DidChangeNotificationType, UpdateConfigurationCommandType } from './protocol';
const emptyDisposable = Object.freeze({ const emptyDisposable = Object.freeze({
dispose: () => { dispose: () => {
@ -18,10 +19,9 @@ export class WelcomeWebviewProvider implements WebviewProvider {
constructor(private readonly container: Container, private readonly host: WebviewController<State>) { constructor(private readonly container: Container, private readonly host: WebviewController<State>) {
this._disposable = Disposable.from( this._disposable = Disposable.from(
this.container.git.onDidChangeRepositories(this.notifyDidChangeRepositories, this),
!workspace.isTrusted
? workspace.onDidGrantWorkspaceTrust(this.notifyDidChangeRepositories, this)
: emptyDisposable,
configuration.onDidChange(this.onConfigurationChanged, this),
this.container.git.onDidChangeRepositories(this.notifyDidChange, this),
!workspace.isTrusted ? workspace.onDidGrantWorkspaceTrust(this.notifyDidChange, this) : emptyDisposable,
); );
} }
@ -30,18 +30,13 @@ export class WelcomeWebviewProvider implements WebviewProvider {
} }
includeBootstrap(): State { includeBootstrap(): State {
const { repoFeaturesBlocked } = this.getRepositoriesState();
return this.getState();
}
return {
timestamp: Date.now(),
version: this.container.version,
// Make sure to get the raw config, not from the container which has the modes mixed in
config: {
codeLens: configuration.get('codeLens.enabled'),
currentLine: configuration.get('currentLine.enabled'),
},
repoFeaturesBlocked: repoFeaturesBlocked,
};
private onConfigurationChanged(e: ConfigurationChangeEvent) {
if (!configuration.changed(e, 'codeLens.enabled') && !configuration.changed(e, 'currentLine.enabled')) return;
this.notifyDidChange();
} }
onMessageReceived(e: IpcMessage) { onMessageReceived(e: IpcMessage) {
@ -51,15 +46,19 @@ export class WelcomeWebviewProvider implements WebviewProvider {
break; break;
} }
} }
private getRepositoriesState(): DidChangeRepositoriesParams {
// const count = this.container.git.repositoryCount;
const openCount = this.container.git.openRepositoryCount;
const hasUnsafe = this.container.git.hasUnsafeRepositories();
const trusted = workspace.isTrusted;
private getState(): State {
return { return {
repoFeaturesBlocked: !trusted || openCount === 0 || hasUnsafe,
timestamp: Date.now(),
version: this.container.version,
// Make sure to get the raw config so to avoid having the mode mixed in
config: {
codeLens: configuration.get('codeLens.enabled', undefined, true, true),
currentLine: configuration.get('currentLine.enabled', undefined, true, true),
},
repoFeaturesBlocked:
!workspace.isTrusted ||
this.container.git.openRepositoryCount === 0 ||
this.container.git.hasUnsafeRepositories(),
}; };
} }
@ -67,7 +66,7 @@ export class WelcomeWebviewProvider implements WebviewProvider {
void configuration.updateEffective(`${params.type}.enabled`, params.value); void configuration.updateEffective(`${params.type}.enabled`, params.value);
} }
private notifyDidChangeRepositories() {
void this.host.notify(DidChangeRepositoriesType, this.getRepositoriesState());
private notifyDidChange() {
void this.host.notify(DidChangeNotificationType, { state: this.getState() });
} }
} }

Write Preview
Loading…
Cancel
Save