Skip to content

Commit bd0d4f3

Browse files
knightedcodemonkeyknightedcodemonkey
committed
refactor: clean up css cascade and svg location.
1 parent ef6ae05 commit bd0d4f3

5 files changed

Lines changed: 62 additions & 36 deletions

File tree

‎playwright/app.spec.ts‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -259,30 +259,41 @@ test('GitHub token info panel reflects missing and present token states', async
259259
}) => {
260260
await waitForAppReady(page, `${appEntryPath}?feature-ai=true`)
261261

262-
const infoButton = page.locator('#github-token-info')
263-
const infoPanel = page.locator('#github-token-info-panel')
264-
const missingMessage = page.locator('.github-token-info-message--missing-token')
265-
const presentMessage = page.locator('.github-token-info-message--has-token')
262+
const infoButtonMissing = page.getByRole('button', {
263+
name: 'About GitHub token features and privacy',
264+
})
265+
const infoButtonPresent = page.getByRole('button', {
266+
name: 'About GitHub token privacy',
267+
})
268+
const missingMessage = page.getByText('Provide a GitHub PAT', { exact: false })
269+
const presentMessage = page.getByText(
270+
'This token is stored only in your browser and is sent only to GitHub APIs you invoke. Use the trash icon to remove it from storage.',
271+
)
266272

267-
await expect(infoButton).toHaveText('?')
268-
await expect(infoButton).toHaveAttribute('data-token-state', 'missing')
273+
await expect(infoButtonMissing).toHaveAttribute('data-token-state', 'missing')
274+
await expect(infoButtonMissing).toHaveAttribute(
275+
'aria-label',
276+
'About GitHub token features and privacy',
277+
)
278+
await expect(presentMessage).toBeHidden()
269279

270-
await infoButton.click()
271-
await expect(infoPanel).toBeVisible()
280+
await infoButtonMissing.click()
272281
await expect(missingMessage).toBeVisible()
273282
await expect(missingMessage).toContainText('Provide a GitHub PAT')
274-
await expect(missingMessage.getByRole('link', { name: 'docs' })).toHaveAttribute(
283+
await expect(page.getByRole('link', { name: 'docs' })).toHaveAttribute(
275284
'href',
276285
'https://github.com/knightedcodemonkey/develop/blob/main/docs/byot.md',
277286
)
278287
await expect(presentMessage).toBeHidden()
279288

280289
await connectByotWithSingleRepo(page)
281-
await expect(infoButton).toHaveText('i')
282-
await expect(infoButton).toHaveAttribute('data-token-state', 'present')
290+
await expect(infoButtonPresent).toHaveAttribute('data-token-state', 'present')
291+
await expect(infoButtonPresent).toHaveAttribute(
292+
'aria-label',
293+
'About GitHub token privacy',
294+
)
283295

284-
await infoButton.click()
285-
await expect(infoPanel).toBeVisible()
296+
await infoButtonPresent.click()
286297
await expect(presentMessage).toBeVisible()
287298
await expect(presentMessage).toContainText(
288299
'Use the trash icon to remove it from storage.',

‎src/index.html‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,30 @@ <h1>
4949
aria-expanded="false"
5050
aria-controls="github-token-info-panel"
5151
>
52-
<svg viewBox="0 0 24 24" aria-hidden="true">
52+
<svg
53+
class="github-token-info__icon github-token-info__icon--missing"
54+
viewBox="0 0 24 24"
55+
aria-hidden="true"
56+
>
5357
<path
5458
d="M13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.517-7.665c.112-.223.268-.424.488-.57C11.186 8.12 11.506 8 12 8c.384 0 .766.118 1.034.319a.953.953 0 0 1 .403.806c0 .48-.218.81-.62 1.186a9.293 9.293 0 0 1-.409.354 19.8 19.8 0 0 0-.294.249c-.246.213-.524.474-.738.795l-.126.19V13.5a.75.75 0 0 0 1.5 0v-1.12c.09-.1.203-.208.347-.333.063-.055.14-.119.222-.187.166-.14.358-.3.52-.452.536-.5 1.098-1.2 1.098-2.283a2.45 2.45 0 0 0-1.003-2.006C13.37 6.695 12.658 6.5 12 6.5c-.756 0-1.373.191-1.861.517a2.944 2.944 0 0 0-.997 1.148.75.75 0 0 0 1.341.67Z"
5559
></path>
5660
<path
5761
d="M9.864 1.2a3.61 3.61 0 0 1 4.272 0l1.375 1.01c.274.2.593.333.929.384l1.686.259a3.61 3.61 0 0 1 3.021 3.02l.259 1.687c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.686a3.61 3.61 0 0 1-3.02 3.021l-1.687.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.686-.259a3.61 3.61 0 0 1-3.021-3.02l-.259-1.687a2.106 2.106 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.686a3.61 3.61 0 0 1 3.02-3.021l1.687-.259c.336-.051.655-.183.929-.384Zm3.384 1.209a2.11 2.11 0 0 0-2.496 0l-1.376 1.01a3.61 3.61 0 0 1-1.589.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.614 3.614 0 0 1-.658 1.59l-1.01 1.375a2.11 2.11 0 0 0 0 2.496l1.01 1.376a3.61 3.61 0 0 1 .658 1.589l.258 1.686a2.11 2.11 0 0 0 1.766 1.765l1.686.26a3.613 3.613 0 0 1 1.59.657l1.375 1.01a2.11 2.11 0 0 0 2.496 0l1.376-1.01a3.61 3.61 0 0 1 1.589-.658l1.686-.258a2.11 2.11 0 0 0 1.765-1.766l.26-1.686a3.613 3.613 0 0 1 .657-1.59l1.01-1.375a2.11 2.11 0 0 0 0-2.496l-1.01-1.376a3.61 3.61 0 0 1-.658-1.589l-.258-1.686a2.111 2.111 0 0 0-1.766-1.766l-1.686-.258a3.614 3.614 0 0 1-1.59-.658Z"
5862
></path>
5963
</svg>
64+
<svg
65+
class="github-token-info__icon github-token-info__icon--present"
66+
viewBox="0 0 24 24"
67+
aria-hidden="true"
68+
>
69+
<path
70+
d="M17.03 9.78a.75.75 0 0 0-1.06-1.06l-5.47 5.47-2.47-2.47a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l6-6Z"
71+
></path>
72+
<path
73+
d="m14.136 1.2 1.375 1.01c.274.201.593.333.929.384l1.687.259a3.61 3.61 0 0 1 3.02 3.021l.259 1.686c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.687a3.61 3.61 0 0 1-3.021 3.02l-1.686.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.687-.259a3.61 3.61 0 0 1-3.02-3.021l-.259-1.686a2.117 2.117 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.687a3.61 3.61 0 0 1 3.021-3.02l1.686-.259c.336-.051.655-.183.929-.384L9.864 1.2a3.61 3.61 0 0 1 4.272 0Zm-3.384 1.209-1.375 1.01a3.614 3.614 0 0 1-1.59.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.61 3.61 0 0 1-.658 1.589l-1.01 1.376a2.11 2.11 0 0 0 0 2.496l1.01 1.375c.344.469.57 1.015.658 1.59l.258 1.686c.14.911.855 1.626 1.766 1.766l1.686.258a3.61 3.61 0 0 1 1.589.658l1.376 1.01a2.11 2.11 0 0 0 2.496 0l1.375-1.01a3.613 3.613 0 0 1 1.59-.657l1.686-.26a2.11 2.11 0 0 0 1.766-1.765l.258-1.686a3.61 3.61 0 0 1 .658-1.589l1.01-1.376a2.11 2.11 0 0 0 0-2.496l-1.01-1.375a3.613 3.613 0 0 1-.657-1.59l-.26-1.686a2.11 2.11 0 0 0-1.765-1.766l-1.686-.258a3.61 3.61 0 0 1-1.589-.658l-1.376-1.01a2.11 2.11 0 0 0-2.496 0Z"
74+
></path>
75+
</svg>
6076
</button>
6177
<div class="github-token-info-panel" id="github-token-info-panel" hidden>
6278
<p

‎src/modules/github-byot-controls.js‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -89,20 +89,6 @@ export const createGitHubByotControls = ({
8989
</svg>
9090
`
9191

92-
const tokenInfoMissingIcon = `
93-
<svg viewBox="0 0 24 24" aria-hidden="true">
94-
<path d="M13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.517-7.665c.112-.223.268-.424.488-.57C11.186 8.12 11.506 8 12 8c.384 0 .766.118 1.034.319a.953.953 0 0 1 .403.806c0 .48-.218.81-.62 1.186a9.293 9.293 0 0 1-.409.354 19.8 19.8 0 0 0-.294.249c-.246.213-.524.474-.738.795l-.126.19V13.5a.75.75 0 0 0 1.5 0v-1.12c.09-.1.203-.208.347-.333.063-.055.14-.119.222-.187.166-.14.358-.3.52-.452.536-.5 1.098-1.2 1.098-2.283a2.45 2.45 0 0 0-1.003-2.006C13.37 6.695 12.658 6.5 12 6.5c-.756 0-1.373.191-1.861.517a2.944 2.944 0 0 0-.997 1.148.75.75 0 0 0 1.341.67Z"></path>
95-
<path d="M9.864 1.2a3.61 3.61 0 0 1 4.272 0l1.375 1.01c.274.2.593.333.929.384l1.686.259a3.61 3.61 0 0 1 3.021 3.02l.259 1.687c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.686a3.61 3.61 0 0 1-3.02 3.021l-1.687.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.686-.259a3.61 3.61 0 0 1-3.021-3.02l-.259-1.687a2.106 2.106 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.686a3.61 3.61 0 0 1 3.02-3.021l1.687-.259c.336-.051.655-.183.929-.384Zm3.384 1.209a2.11 2.11 0 0 0-2.496 0l-1.376 1.01a3.61 3.61 0 0 1-1.589.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.614 3.614 0 0 1-.658 1.59l-1.01 1.375a2.11 2.11 0 0 0 0 2.496l1.01 1.376a3.61 3.61 0 0 1 .658 1.589l.258 1.686a2.11 2.11 0 0 0 1.766 1.765l1.686.26a3.613 3.613 0 0 1 1.59.657l1.375 1.01a2.11 2.11 0 0 0 2.496 0l1.376-1.01a3.61 3.61 0 0 1 1.589-.658l1.686-.258a2.11 2.11 0 0 0 1.765-1.766l.26-1.686a3.613 3.613 0 0 1 .657-1.59l1.01-1.375a2.11 2.11 0 0 0 0-2.496l-1.01-1.376a3.61 3.61 0 0 1-.658-1.589l-.258-1.686a2.111 2.111 0 0 0-1.766-1.766l-1.686-.258a3.614 3.614 0 0 1-1.59-.658Z"></path>
96-
</svg>
97-
`
98-
99-
const tokenInfoPresentIcon = `
100-
<svg viewBox="0 0 24 24" aria-hidden="true">
101-
<path d="M17.03 9.78a.75.75 0 0 0-1.06-1.06l-5.47 5.47-2.47-2.47a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l6-6Z"></path>
102-
<path d="m14.136 1.2 1.375 1.01c.274.201.593.333.929.384l1.687.259a3.61 3.61 0 0 1 3.02 3.021l.259 1.686c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.687a3.61 3.61 0 0 1-3.021 3.02l-1.686.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.687-.259a3.61 3.61 0 0 1-3.02-3.021l-.259-1.686a2.117 2.117 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.687a3.61 3.61 0 0 1 3.021-3.02l1.686-.259c.336-.051.655-.183.929-.384L9.864 1.2a3.61 3.61 0 0 1 4.272 0Zm-3.384 1.209-1.375 1.01a3.614 3.614 0 0 1-1.59.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.61 3.61 0 0 1-.658 1.589l-1.01 1.376a2.11 2.11 0 0 0 0 2.496l1.01 1.375c.344.469.57 1.015.658 1.59l.258 1.686c.14.911.855 1.626 1.766 1.766l1.686.258a3.61 3.61 0 0 1 1.589.658l1.376 1.01a2.11 2.11 0 0 0 2.496 0l1.375-1.01a3.613 3.613 0 0 1 1.59-.657l1.686-.26a2.11 2.11 0 0 0 1.766-1.765l.258-1.686a3.61 3.61 0 0 1 .658-1.589l1.01-1.376a2.11 2.11 0 0 0 0-2.496l-1.01-1.375a3.613 3.613 0 0 1-.657-1.59l-.26-1.686a2.11 2.11 0 0 0-1.765-1.766l-1.686-.258a3.61 3.61 0 0 1-1.589-.658l-1.376-1.01a2.11 2.11 0 0 0-2.496 0Z"></path>
103-
</svg>
104-
`
105-
10692
const clearAddButtonResetTimer = () => {
10793
if (addButtonResetTimer) {
10894
clearTimeout(addButtonResetTimer)
@@ -132,9 +118,6 @@ export const createGitHubByotControls = ({
132118

133119
if (tokenInfoButton instanceof HTMLButtonElement) {
134120
tokenInfoButton.dataset.tokenState = hasProvidedToken ? 'present' : 'missing'
135-
tokenInfoButton.innerHTML = hasProvidedToken
136-
? tokenInfoPresentIcon
137-
: tokenInfoMissingIcon
138121
tokenInfoButton.setAttribute(
139122
'aria-label',
140123
hasProvidedToken

‎src/styles/ai-controls.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,26 @@
115115
fill: currentColor;
116116
}
117117

118+
.github-token-info__icon--present {
119+
display: none;
120+
}
121+
122+
.github-token-info[data-token-state='present'] .github-token-info__icon--missing {
123+
display: none;
124+
}
125+
126+
.github-token-info[data-token-state='present'] .github-token-info__icon--present {
127+
display: block;
128+
}
129+
130+
.github-token-info[data-token-state='missing'] .github-token-info__icon--missing {
131+
display: block;
132+
}
133+
134+
.github-token-info[data-token-state='missing'] .github-token-info__icon--present {
135+
display: none;
136+
}
137+
118138
.github-token-info[data-token-state='missing'] {
119139
color: color-mix(in srgb, #fbbf24 86%, var(--panel-text));
120140
}

‎src/styles/panels-editor.css‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,13 +93,9 @@
9393
color: var(--select-text);
9494
}
9595

96-
.editor-tools-toggle svg {
97-
fill: currentColor;
98-
stroke: none;
99-
}
100-
10196
.editor-tools-toggle svg path {
10297
fill: currentColor;
98+
stroke: none;
10399
}
104100

105101
.panel-collapse-toggle {

0 commit comments

Comments
 (0)