Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-31 23:31:30 -05:00
Code Issues Activity

[Toolbar] Final style polish and code cleanup (#9282)

Browse source 
Co-authored-by: Princesseuh <3019731+Princesseuh@users.noreply.github.com>
This commit is contained in:
Fred K. Schott 2023-12-04 05:26:34 -08:00 • committed by GitHub
parent 54fac60ee0
commit 29fa504467
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 93 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/astro/e2e/dev-overlay.test.js
View file

@ -200,7 +200,7 @@ test.describe('Dev Overlay', () => {
await expect(settingsWindow).toHaveCount(1);
await expect(settingsWindow).toBeVisible();
const hideOverlay = settingsWindow.getByRole('heading', { name: 'Hide overlay' });
const hideOverlay = settingsWindow.getByRole('heading', { name: 'Hide toolbar' });
await expect(hideOverlay).toBeVisible();
});
});

38
packages/astro/src/runtime/client/dev-overlay/overlay.ts
View file

@ -71,7 +71,7 @@ export class AstroDevOverlay extends HTMLElement {
}
#dev-overlay[data-hidden] #dev-bar .item {
opacity: 0;
opacity: 0.2;
}
#dev-bar-hitbox-above,
@ -340,38 +340,18 @@ export class AstroDevOverlay extends HTMLElement {
});
});
// On click, show the overlay if it's hidden, it's likely the user wants to interact with it
this.shadowRoot.addEventListener('click', () => {
if (!this.isHidden()) return;
this.setOverlayVisible(true);
});
this.devOverlay!.addEventListener('keyup', (event) => {
if (event.code === 'Space' || event.code === 'Enter') {
if (!this.isHidden()) return;
this.setOverlayVisible(true);
}
if (event.key === 'Escape') {
if (this.isHidden()) return;
if (this.getActivePlugin()) return;
document.addEventListener('keyup', (event) => {
if (event.key !== 'Escape') return;
if (this.isHidden()) return;
const activePlugin = this.getActivePlugin();
if (activePlugin) {
this.togglePluginStatus(activePlugin);
} else {
this.setOverlayVisible(false);
}
});
document.addEventListener('keyup', (event) => {
if (event.key !== 'Escape') {
return;
}
if (this.isHidden()) {
return;
}
const activePlugin = this.getActivePlugin();
if (activePlugin) {
this.setPluginStatus(activePlugin, false);
return;
}
this.setOverlayVisible(false);
});
}
async initPlugin(plugin: DevOverlayPlugin) {

26
packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts
View file

@ -31,6 +31,27 @@ export default {
document.addEventListener('astro:after-swap', async () => lint());
document.addEventListener('astro:page-load', async () => refreshLintPositions);
function onPageClick(event: MouseEvent) {
const target = event.target as Element | null;
if (!target) return;
if (!target.closest) return;
if (target.closest('astro-dev-toolbar')) return;
eventTarget.dispatchEvent(
new CustomEvent('toggle-plugin', {
detail: {
state: false,
},
})
);
}
eventTarget.addEventListener('plugin-toggled', (event: any) => {
if (event.detail.state === true) {
document.addEventListener('click', onPageClick, true);
} else {
document.removeEventListener('click', onPageClick, true);
}
});
async function lint() {
audits.forEach(({ highlightElement }) => {
highlightElement.remove();
@ -89,8 +110,11 @@ export default {
}
</style>
<header>
<h1><astro-dev-toolbar-icon icon="check-circle"></astro-dev-toolbar-icon>No issues detected.</h1>
<h1><astro-dev-toolbar-icon icon="check-circle"></astro-dev-toolbar-icon>No accessibility issues detected.</h1>
</header>
<p>
Nice work! This app scans the page and highlights common accessibility issues for you, like a missing "alt" attribute on an image.
</p>
`
);

27
packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts
View file

@ -80,7 +80,7 @@ export default {
font-size: 16px;
font-weight: 400;
color: white;
margin-bottom: 0;
margin-bottom: 4px;
}
label {
@ -114,30 +114,37 @@ export default {
padding: .3em;
}
p {
line-height: 2em;
label > section {
max-width: 67%;
}
p {
line-height: 1.5em;
}
a, a:visited {
color: var(--color-purple);
}
a:hover {
color: #f4ecfd;
}
</style>
<header>
<h1><astro-dev-toolbar-icon icon="gear"></astro-dev-toolbar-icon> Settings</h1>
</header>
<hr />
<hr id="general"/>
<h2 id="general">General</h2>
<hr />
<h3>Hide overlay</h3>
<p>Run <code>astro preferences disable devOverlay</code> in your terminal to disable this dev overlay in this project. <a href="https://docs.astro.build/en/reference/cli-reference/#astro-preferences">Learn more</a>.</p>
<label class="setting-row">
<section>
<h3>Hide toolbar</h3>
Run <code>astro preferences disable devToolbar</code> in your terminal to disable the toolbar. <a href="https://docs.astro.build/en/reference/cli-reference/#astro-preferences" target="_blank">Learn more</a>.
</section>
</label>
`
);
const general = windowElement.querySelector('#general')!;
for (const settingsRow of settingsRows) {
general.after(getElementForSettingAsString(settingsRow));
general.after(document.createElement('hr'));
general.after(getElementForSettingAsString(settingsRow));
}
canvas.append(windowElement);

39
packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts
View file

@ -15,7 +15,7 @@ export default {
id: 'astro:xray',
name: 'Inspect',
icon: icon,
init(canvas) {
init(canvas, eventTarget) {
let islandsOverlays: { highlightElement: DevOverlayHighlight; island: HTMLElement }[] = [];
addIslandsOverlay();
@ -23,6 +23,30 @@ export default {
document.addEventListener('astro:after-swap', addIslandsOverlay);
document.addEventListener('astro:page-load', refreshIslandsOverlayPositions);
function onPageClick(event: MouseEvent) {
const target = event.target as Element | null;
if (!target) return;
if (!target.closest) return;
if (target.closest('astro-dev-toolbar')) return;
event.preventDefault();
event.stopPropagation();
eventTarget.dispatchEvent(
new CustomEvent('toggle-plugin', {
detail: {
state: false,
},
})
);
}
eventTarget.addEventListener('plugin-toggled', (event: any) => {
if (event.detail.state === true) {
document.addEventListener('click', onPageClick, true);
} else {
document.removeEventListener('click', onPageClick, true);
}
});
function addIslandsOverlay() {
islandsOverlays.forEach(({ highlightElement }) => {
highlightElement.remove();
@ -60,6 +84,9 @@ export default {
<header>
<h1><astro-dev-toolbar-icon icon="lightbulb"></astro-dev-toolbar-icon>No islands detected.</h1>
</header>
<p>
It looks like there are no interactive component islands on this page. Did you forget to add a client directive to your interactive UI component?
</p>
`
);
@ -131,9 +158,8 @@ export default {
if (Object.keys(islandProps).length > 0) {
tooltip.sections.push({
title: 'Props',
content: `${Object.entries(islandProps)
.map((prop) => `<code>${prop[0]}=${getPropValue(prop[1] as any)}</code>`)
.join(', ')}`,
content: `<pre><code>${JSON.stringify(Object.fromEntries(Object.entries(islandProps)
.map((prop: any) =>([prop[0], prop[1][1]]))), undefined, 2)}</code></pre>`,
});
}
@ -159,10 +185,5 @@ export default {
return tooltip;
}
function getPropValue(prop: [number, any]) {
const [_, value] = prop;
return JSON.stringify(value, null, 2);
}
},
} satisfies DevOverlayPlugin;

9
packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts
View file

@ -101,13 +101,18 @@ export class DevOverlayTooltip extends HTMLElement {
cursor: pointer;
}
code {
background: rgba(136, 58, 234, 0.33);
pre, code {
background: rgb(78, 27, 145);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
border-radius: 2px;
font-size: 14px;
padding: 2px;
}
pre {
padding: 1em;
margin: 0 0;
overflow: auto;
}
`;
const fragment = new DocumentFragment();

4
packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts
View file

@ -70,6 +70,10 @@ export class DevOverlayWindow extends HTMLElement {
border: 1px solid rgba(27, 30, 36, 1);
margin: 1em 0;
}
p, ::slotted(p) {
line-height: 1.5em;
}
</style>
<slot />