Repository: preactjs/preact-devtools
Pull request #253 (2020-09-17 09:05:42)

Fix key hard to read in light theme in elements panel
Some minor color palette changes to increase readability.


Patch:
diff --git a/.changeset/friendly-kings-smile.md b/.changeset/friendly-kings-smile.md
new file mode 100644
index 0000000..0746eab
--- /dev/null
+++ b/.changeset/friendly-kings-smile.md
@@ -0,0 +1,5 @@
+---
+"preact-devtools": patch
+---
+
+Elements panel: Fix key value hard to read in light theme
diff --git a/.changeset/neat-dragons-swim.md b/.changeset/neat-dragons-swim.md
deleted file mode 100644
index b7f70d8..0000000
--- a/.changeset/neat-dragons-swim.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"preact-devtools": patch
----
-
-Display Component key in the sidebar
diff --git a/src/adapter/10/renderer/inspectVNode.ts b/src/adapter/10/renderer/inspectVNode.ts
index c05dc66..7a388f4 100644
--- a/src/adapter/10/renderer/inspectVNode.ts
+++ b/src/adapter/10/renderer/inspectVNode.ts
@@ -5,7 +5,6 @@ import { ID } from "../../../view/store/types";
 import { IdMappingState, getVNodeById } from "../IdMapper";
 import { Options } from "preact";
 import { inspectHooks } from "./hooks";
-import { InspectData } from "../../adapter/adapter";
 
 /**
  * Serialize all properties/attributes of a `VNode` like `props`, `context`,
@@ -19,7 +18,7 @@ export function inspectVNode(
 	options: Options,
 	id: ID,
 	supportsHooks: boolean,
-): InspectData | null {
+) {
 	const vnode = getVNodeById(ids, id);
 	if (!vnode) return null;
 
@@ -39,7 +38,6 @@ export function inspectVNode(
 
 	return {
 		context,
-		key: vnode.key || null,
 		hooks: supportsHooks ? hooks : !supportsHooks && hasHooks ? [] : null,
 		id,
 		name: getDisplayName(vnode, config),
diff --git a/src/adapter/adapter/adapter.ts b/src/adapter/adapter/adapter.ts
index 60b3cfb..6fb84b9 100644
--- a/src/adapter/adapter/adapter.ts
+++ b/src/adapter/adapter/adapter.ts
@@ -28,7 +28,6 @@ export interface InspectData {
 	id: ID;
 	name: string;
 	type: any;
-	key: string | null;
 	context: Record<string, any> | null;
 	hooks: PropData[] | null;
 	props: Record<string, any> | null;
diff --git a/src/view/components/Devtools.css b/src/view/components/Devtools.css
index 095d2c2..6692dd4 100644
--- a/src/view/components/Devtools.css
+++ b/src/view/components/Devtools.css
@@ -86,8 +86,10 @@ input {
 	--color-empty-logo: #e0e0e0;
 	--color-key-label: gray;
 	--color-key-label-selected: #dadada;
+	--color-key-label-selected-nofocus: #303030;
 	--color-key-value: #ff5722;
-	--color-key-value-selected: orange;
+	--color-key-value-selected-focus: yellow;
+	--color-key-value-selected: #ff5722;
 	--color-radio: #7245c7;
 	--color-shadow: rgba(0, 0, 0, 0.15);
 
@@ -169,7 +171,9 @@ input {
 	--color-empty-logo: #3d3d3d;
 	--color-key-label: gray;
 	--color-key-label-selected: #dedede;
+	--color-key-label-selected-nofocus: #dedede;
 	--color-key-value: #ff5722;
+	--color-key-value-selected-focus: yellow;
 	--color-key-value-selected: yellow;
 	--color-radio: #d2adff;
 	--color-shadow: rgba(255, 255, 255, 0.15);
diff --git a/src/view/components/elements/TreeView.css b/src/view/components/elements/TreeView.css
index 2d01d08..5967197 100644
--- a/src/view/components/elements/TreeView.css
+++ b/src/view/components/elements/TreeView.css
@@ -160,7 +160,10 @@
 	color: var(--color-key-label);
 }
 
-[data-selected] .keyLabel {
+.tree:not(:focus-within) [data-selected] .keyLabel {
+	color: var(--color-key-label-selected-no-focus);
+}
+.tree:focus-within [data-selected] .keyLabel {
 	color: var(--color-key-label-selected);
 }
 
@@ -168,9 +171,12 @@
 	color: var(--color-key-value);
 }
 
-[data-selected] .key {
+.tree:not(:focus-within) [data-selected] .key {
 	color: var(--color-key-value-selected);
 }
+.tree:focus-within [data-selected] .key {
+	color: var(--color-key-value-selected-focus);
+}
 
 /* Marker */
 .mark {
diff --git a/src/view/components/sidebar/KeyPanel.css b/src/view/components/sidebar/KeyPanel.css
deleted file mode 100644
index b95474b..0000000
--- a/src/view/components/sidebar/KeyPanel.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.key {
-	color: var(--color-key-value);
-	font-family: var(--font-monospace);
-	font-size: var(--font-small);
-	padding-left: 1.25rem;
-	display: inline-block;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	width: 100%;
-}
diff --git a/src/view/components/sidebar/KeyPanel.tsx b/src/view/components/sidebar/KeyPanel.tsx
deleted file mode 100644
index b32cfba..0000000
--- a/src/view/components/sidebar/KeyPanel.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { h } from "preact";
-import { SidebarPanel } from "./SidebarPanel";
-import s from "./KeyPanel.css";
-
-export interface Props {
-	onCopy: () => void;
-	value: string;
-}
-
-export function KeyPanel(props: Props) {
-	return (
-		<SidebarPanel title="Key" testId="key-panel" onCopy={props.onCopy}>
-			<span class={s.key} data-testid="vnode-key">
-				{props.value}
-			</span>
-		</SidebarPanel>
-	);
-}
diff --git a/src/view/components/sidebar/Sidebar.tsx b/src/view/components/sidebar/Sidebar.tsx
index 8aef211..188e8b8 100644
--- a/src/view/components/sidebar/Sidebar.tsx
+++ b/src/view/components/sidebar/Sidebar.tsx
@@ -4,7 +4,6 @@ import { PropsPanel } from "./inspect/PropsPanel";
 import { serializeProps } from "./inspect/serializeProps";
 import { DebugTreeStats } from "./DebugTreeStats";
 import { DebugNodeNavTree } from "./DebugNodeNavTree";
-import { KeyPanel } from "./KeyPanel";
 
 export function Sidebar() {
 	const store = useStore();
@@ -15,12 +14,6 @@ export function Sidebar() {
 
 	return (
 		<Fragment>
-			{inspect && inspect.key !== null && (
-				<KeyPanel
-					value={inspect.key}
-					onCopy={() => emit("copy", inspect.key!)}
-				/>
-			)}
 			<PropsPanel
 				label="Props"
 				items={propData.items}


Test patch:
diff --git a/src/adapter/events/events.test.ts b/src/adapter/events/events.test.ts
index 043b8b8..d1aa377 100644
--- a/src/adapter/events/events.test.ts
+++ b/src/adapter/events/events.test.ts
@@ -223,7 +223,6 @@ describe("applyEvent", () => {
 
 		store.inspectData.$ = {
 			id: 2,
-			key: null,
 			context: null,
 			hooks: null,
 			name: "Foo",
@@ -248,7 +247,6 @@ describe("applyEvent", () => {
 
 		store.inspectData.$ = {
 			id: 2,
-			key: null,
 			context: null,
 			hooks: null,
 			name: "Foo",
@@ -264,7 +262,6 @@ describe("applyEvent", () => {
 		applyEvent(store, "inspect-result", {
 			id: 42,
 			name: "foo",
-			key: null,
 			type: "string",
 			context: null,
 			hooks: null,
diff --git a/test-e2e/fixtures/index.html b/test-e2e/fixtures/index.html
index d0bf765..395eb9b 100644
--- a/test-e2e/fixtures/index.html
+++ b/test-e2e/fixtures/index.html
@@ -51,7 +51,6 @@
 				{ name: "truncate" },
 				{ name: "update-all" },
 				{ name: "useCallback" },
-				{ name: "keys" },
 			];
 
 			const list = document.querySelector("#list");
diff --git a/test-e2e/fixtures/keys.js b/test-e2e/fixtures/keys.js
deleted file mode 100644
index 73d6318..0000000
--- a/test-e2e/fixtures/keys.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const { h, render } = preact;
-
-function ListItem(props) {
-	return html`<li>${props.children}</li>`;
-}
-function NoKey(props) {
-	return html`<li>${props.children}</li>`;
-}
-
-function Keys() {
-	return html`
-		<div style="padding: 2rem;">
-			<ul>
-				<${ListItem} key="ABC">abc<//>
-				<${ListItem} key="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789">long key<//>
-				<${NoKey}>no key<//>
-			</ul>
-		</div>
-	`;
-}
-
-render(h(Keys), document.getElementById("app"));
diff --git a/test-e2e/tests/inspect-key.test.ts b/test-e2e/tests/inspect-key.test.ts
deleted file mode 100644
index d454074..0000000
--- a/test-e2e/tests/inspect-key.test.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { newTestPage, click } from "../test-utils";
-import { expect } from "chai";
-import {
-	assertNotTestId,
-	clickNestedText,
-	getText,
-	waitForTestId,
-} from "pentf/browser_utils";
-import { assertEventually } from "pentf/assert_utils";
-
-export const description = "Show vnode key in the sidebar";
-
-export async function run(config: any) {
-	const { page, devtools } = await newTestPage(config, "keys");
-	const origin = await page.evaluate(() => location.origin);
-	await page.browserContext().overridePermissions(origin, ["clipboard-read"]);
-
-	await clickNestedText(devtools, /ABC$/);
-	await waitForTestId(devtools, "key-panel");
-
-	const target = '[data-testid="vnode-key"]';
-	expect(await getText(devtools, target)).to.equal("ABC");
-
-	const copy = '[data-testid="key-panel"] button[title="Copy Key"]';
-	await click(devtools, copy);
-
-	const clipboard = await page.evaluate(() => navigator.clipboard.readText());
-	expect(JSON.parse(clipboard)).to.equal("ABC");
-
-	// Check that the keypanel is not present for keyless components
-	await clickNestedText(devtools, "NoKey");
-	await assertEventually(
-		async () => {
-			await assertNotTestId(devtools, "key-panel");
-			return true;
-		},
-		{ timeout: 2000, crashOnError: false },
-	);
-}