Skip to content

Commit 59b030e

Browse files
HugoDFHugoDF
committed
2.4.1 add basecoat-css based tooltips, add scroll el into view
1 parent 341ffa3 commit 59b030e

File tree

10 files changed

+91
-32
lines changed

10 files changed

+91
-32
lines changed

‎packages/shell-chrome-v3/cypress/e2e/v2/component-list.cy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ it('v2 - should create globals + add annotation for each component', () => {
3131
.then((componentCount) => {
3232
cy.get('[data-testid="console-global"]')
3333
.should('contain.text', '= $x0')
34-
.should('have.attr', 'title', 'Available as $x0 in the console')
34+
.should('have.attr', 'data-tooltip', 'Available as $x0 in the console')
3535
.should('contain.text', '= $x1')
3636
.should('contain.text', '= $x2')
3737
.should('contain.text', '= $x3')

‎packages/shell-chrome-v3/cypress/e2e/v3/component-list.cy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ it('v3 - should create globals + add annotation for each component', () => {
2929
.then((componentCount) => {
3030
cy.get('[data-testid="console-global"]')
3131
.should('contain.text', '= $x0')
32-
.should('have.attr', 'title', 'Available as $x0 in the console')
32+
.should('have.attr', 'data-tooltip', 'Available as $x0 in the console')
3333
.should('contain.text', '= $x1')
3434
.should('contain.text', '= $x2')
3535
.should('contain.text', '= $x3')

‎packages/shell-chrome-v3/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "Alpine.js devtools - Early Access",
33
"description": "DevTools extension for debugging Alpine.js applications.",
4-
"version": "2.4.0",
4+
"version": "2.4.1",
55
"manifest_version": 3,
66
"icons": {
77
"16": "icons/16.png",

‎packages/shell-chrome-v3/package-lock.json‎

Lines changed: 9 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/shell-chrome-v3/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "shell-chrome-v3",
33
"private": true,
4-
"version": "2.4.0",
4+
"version": "2.4.1",
55
"description": "Alpine.js devtools with Chrome manifest v3 compatibility",
66
"type": "module",
77
"scripts": {
@@ -31,6 +31,7 @@
3131
},
3232
"dependencies": {
3333
"@tailwindcss/vite": "4.1.3",
34+
"basecoat-css": "0.1.2",
3435
"solid-js": "^1.9.5",
3536
"tailwindcss": "4.1.3"
3637
}

‎packages/shell-chrome-v3/src/devtools/components/component-list-item.tsx‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
selectComponent,
88
} from '../state';
99
import { isEarlyAccess } from '../../lib/isEarlyAccess';
10-
import { inspectUserGlobal } from '../inspect';
10+
import { inspectUserGlobal, scrollElGlobalIntoView } from '../inspect';
1111
import { metric } from '../metrics';
1212

1313
export function ComponentListItem({ component }: { component: Component }) {
@@ -42,13 +42,44 @@ export function ComponentListItem({ component }: { component: Component }) {
4242
<div
4343
data-testid="console-global"
4444
class="text-gray pl-2 text-xs"
45-
title={`Available as $x${component.id - 1} in the console`}
45+
data-tooltip={`Available as $x${component.id - 1} in the console`}
46+
data-align="center"
47+
data-side="bottom"
4648
>
4749
= <span>{`$x${component.id - 1}`}</span>
4850
</div>
4951
<Show when={isEarlyAccess()}>
5052
<button
51-
class="ml-auto px-2 py-2 flex-row"
53+
class="ml-auto px-1 py-2 flex-row cursor-pointer"
54+
onClick={(e) => {
55+
e.preventDefault();
56+
e.stopPropagation();
57+
if (!isEarlyAccess()) {
58+
return;
59+
} else {
60+
metric('component_root_el_scrolled');
61+
scrollElGlobalIntoView(`$x${component.id - 1}.$el`);
62+
}
63+
}}
64+
data-tooltip="Scroll page to element"
65+
data-side="left"
66+
>
67+
<svg
68+
xmlns="http://www.w3.org/2000/svg"
69+
viewBox="0 0 16 16"
70+
fill="currentColor"
71+
class="h-4 w-4 opacity-85"
72+
>
73+
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
74+
<path
75+
fill-rule="evenodd"
76+
d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
77+
clip-rule="evenodd"
78+
/>
79+
</svg>
80+
</button>
81+
<button
82+
class="py-2 flex-row cursor-pointer"
5283
onClick={(e) => {
5384
e.preventDefault();
5485
e.stopPropagation();
@@ -60,7 +91,8 @@ export function ComponentListItem({ component }: { component: Component }) {
6091
inspectUserGlobal(`$x${component.id - 1}.$el`);
6192
}
6293
}}
63-
title={'Inspect Root Element'}
94+
data-tooltip="Inspect in Elements tab"
95+
data-side="left"
6496
>
6597
<svg
6698
class="w-4 h-4 flex"

‎packages/shell-chrome-v3/src/devtools/components/footer.tsx‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -29,40 +29,45 @@ export function Footer({ setActiveTab }: FooterProps) {
2929
<div class="flex-1 pl-3" data-testid="footer-line">
3030
Watching{' '}
3131
<div class="inline-flex">
32-
<a
33-
href="#"
32+
<button
33+
class="cursor-pointer"
3434
data-testid="footer-components-link"
35+
data-tooltip="View Components"
36+
data-side="top"
3537
onClick={(e) => {
3638
e.preventDefault();
3739
setActiveTab('components');
3840
}}
3941
>
4042
{componentsValue().length}{' '}
4143
{componentsValue().length !== 1 ? 'components' : 'component'}
42-
</a>
44+
</button>
4345
,&nbsp;
44-
<a
45-
href="#"
46+
<button
47+
class="cursor-pointer"
4648
data-testid="footer-stores-link"
49+
data-tooltip="View Stores"
50+
data-side="top"
4751
onClick={(e) => {
4852
e.preventDefault();
4953
setActiveTab('stores');
5054
}}
5155
>
5256
{storesValue().length} {storesValue().length !== 1 ? 'stores' : 'store'}
53-
</a>
57+
</button>
5458
,&nbsp;
55-
<a
56-
href="#"
59+
<button
60+
class={errors().length > 0 ? 'cursor-pointer text-red-400' : 'cursor-pointer'}
5761
data-testid="footer-warnings-link"
62+
data-tooltip="View Warnings"
63+
data-side="top"
5864
onClick={(e) => {
5965
e.preventDefault();
6066
setActiveTab('warnings');
6167
}}
62-
class={errors().length > 0 ? 'text-red-400' : ''}
6368
>
6469
{errors().length} {errors().length !== 1 ? 'warnings' : 'warning'}
65-
</a>
70+
</button>
6671
</div>
6772
</div>
6873

@@ -101,8 +106,9 @@ export function Footer({ setActiveTab }: FooterProps) {
101106
: 'https://github.com/alpine-collective/alpinejs-devtools/issues/new'
102107
}
103108
target="_blank"
104-
title="Report a Bug"
105-
class="hover:opacity-75"
109+
data-tooltip="Report a Bug"
110+
data-side="top"
111+
class="hover:opacity-75 leading-9 font-medium font-mono"
106112
onClick={() => {
107113
metric('footer_cta', {
108114
target: isEarlyAccess()
@@ -123,8 +129,9 @@ export function Footer({ setActiveTab }: FooterProps) {
123129
<a
124130
href="https://alpinejs.dev"
125131
target="_blank"
126-
title="Alpine.js Docs"
127-
class="hover:opacity-75"
132+
data-tooltip="Alpine.js Docs"
133+
data-side="top"
134+
class="leading-9 font-medium font-mono"
128135
onClick={() => {
129136
metric('footer_cta', {
130137
target: 'alpinejs_dev',
@@ -136,7 +143,7 @@ export function Footer({ setActiveTab }: FooterProps) {
136143
fill="none"
137144
viewBox="0 0 24 24"
138145
stroke="currentColor"
139-
class="w-5 h-5"
146+
class="w-5 h-5 hover:opacity-75"
140147
>
141148
<path
142149
stroke-linecap="round"
@@ -149,16 +156,18 @@ export function Footer({ setActiveTab }: FooterProps) {
149156
<a
150157
href="https://github.com/alpine-collective/alpinejs-devtools"
151158
target="_blank"
152-
title="Alpine Devtools GitHub"
153-
class="hover:opacity-75"
159+
data-tooltip="Alpine.js devtools GitHub"
160+
data-side="top"
161+
data-align="end"
162+
class="leading-9 font-medium font-mono"
154163
onClick={() => {
155164
metric('footer_cta', {
156165
target: 'alpinejs_devtools_gh',
157166
});
158167
}}
159168
>
160169
<svg
161-
class="fill-current w-5 h-5"
170+
class="fill-current w-5 h-5 hover:opacity-75"
162171
xmlns="http://www.w3.org/2000/svg"
163172
viewBox="-2 -2 24 24"
164173
>
@@ -168,16 +177,18 @@ export function Footer({ setActiveTab }: FooterProps) {
168177
<a
169178
href="https://alpinedevtools.com/pricing?utm_source=extension&utm_campaign=footer-heart-icon"
170179
target="_blank"
171-
title="Devtools Early Access"
172-
class="hover:opacity-75"
180+
data-tooltip="Support Alpine Devtools"
181+
data-side="top"
182+
data-align="end"
183+
class="leading-9 font-medium font-mono"
173184
onClick={() => {
174185
metric('footer_cta', {
175186
target: 'alpine_devtools_pricing',
176187
});
177188
}}
178189
>
179190
<svg
180-
class="fill-current w-5 h-5"
191+
class="fill-current w-5 h-5 hover:opacity-75"
181192
xmlns="http://www.w3.org/2000/svg"
182193
fill="none"
183194
viewBox="0 0 24 24"

‎packages/shell-chrome-v3/src/devtools/components/store-list-item.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ export function StoreListItem({ idx, storeName, isOpen }: StoreListItemProps) {
3030
<div
3131
data-testid="console-global"
3232
class="text-gray pl-2 text-xs"
33-
title={`Available as $s${idx} in the console`}
33+
data-tooltip={`Available as $s${idx} in the console`}
34+
data-align="center"
35+
data-side="bottom"
3436
>
3537
= <span>{`$s${idx}`}</span>
3638
</div>

‎packages/shell-chrome-v3/src/devtools/inspect.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,8 @@ export function inspectUserGlobal(valueToInspect: string) {
33
chrome.devtools.inspectedWindow.eval(`inspect(${valueToInspect})`);
44
}
55
}
6+
export function scrollElGlobalIntoView(valueToInspect: string) {
7+
if (typeof chrome !== 'undefined') {
8+
chrome.devtools.inspectedWindow.eval(`${valueToInspect}.scrollIntoView({ block: 'center' })`);
9+
}
10+
}

‎packages/shell-chrome-v3/src/devtools/styles.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@config "../../../../tailwind.config.js";
22
@import 'tailwindcss';
3+
@import 'basecoat-css';
34

45
/*
56
Redefine outside of tailwind generation,

0 commit comments

Comments
 (0)