atom.io 0.33.12 → 0.33.14

package/src/react-devtools/devtools.css

@@ -1,9 +1,9 @@
 main[data-css="atom_io_devtools"] {
 	--fg-color: #ccc;
 	--fg-light: #aaa;
-	--fg-soft: #777;
-	--fg-faint: #555;
-	--fg-hint: #333;
+	--fg-soft: #888;
+	--fg-faint: #777;
+	--fg-hint: #4a4a4a;
 	--fg-max: #fff;
 	--bg-color: #111;
 	--bg-accent: #00f;
@@ -26,6 +26,9 @@ main[data-css="atom_io_devtools"] {
 		--bg-tint1: #e3e3e3;
 		--bg-tint2: #f3f3f3;
 	}
+	* {
+		box-sizing: border-box;
+	}
 	& {
 		pointer-events: all;
 		box-sizing: border-box;
@@ -44,7 +47,7 @@ main[data-css="atom_io_devtools"] {
 		overflow-y: scroll;
 	}
 	* {
-		font-size: 16px;
+		font-size: 14px;
 		font-family: theia, monospace;
 		line-height: 1em;
 		color: var(--fg-color);
@@ -83,54 +86,76 @@ main[data-css="atom_io_devtools"] {
 			}
 		}
 	}
+
 	> main {
 		background: var(--bg-tint1);
-	}
-	> main::before {
-		background-color: black;
-		height: 10px;
-	}
-	main {
 		overflow-y: scroll;
 		flex-grow: 1;
 		display: flex;
 		flex-flow: column;
 		gap: 0;
 		article.index {
+			margin-bottom: 0px;
+			padding-bottom: 24px;
+			border-top: var(--fg-border);
+			min-height: calc(100% - 24px);
+			display: flex;
+			flex-shrink: 0;
+			flex-flow: column;
 			.node .node {
-				border-right: var(--fg-border);
+				border-right: none;
 				padding-right: 0;
 				background: #ffffff08;
 				@media (prefers-color-scheme: light) {
 					background: #00000004;
 				}
 			}
+			.index-empty-state {
+				width: 100%;
+				height: 100%;
+				font-style: italic;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
 			.node > .node {
-				margin: 0px 2px 2px 18px;
+				margin: 0px 0px 0px 9px;
+				width: calc(100% - 9px);
 				border-left: var(--fg-border-soft);
+				&:first-of-type {
+					border-top: var(--fg-border-soft);
+				}
 				&:last-of-type {
-					margin-bottom: 6px;
+					border-bottom: none;
 				}
 			}
 			.node {
-				border-top: var(--fg-border);
+				position: relative;
+				border-bottom: var(--fg-border-soft);
 				overflow: visible;
-				&:last-of-type {
-					border-bottom: var(--fg-border);
-				}
+				width: 100%;
+				display: flex;
+				flex-flow: column;
 				&.transaction_update {
 					padding: 0;
 				}
+
 				> header {
+					width: auto;
 					display: flex;
 					flex-flow: row;
+					justify-content: space-between;
 					position: sticky;
 					z-index: 999;
 					top: 0;
 					height: 22px;
 					background: var(--bg-tint2);
-					border-bottom: var(--fg-border-soft);
+					border-bottom: none;
+					align-items: center;
+					overflow: hidden;
+
 					> main {
+						height: 100%;
 						display: flex;
 						flex-flow: row;
 						cursor: help;
@@ -146,47 +171,67 @@ main[data-css="atom_io_devtools"] {
 						h2 {
 							margin: 0;
 						}
-						.detail {
-							margin-left: 5px;
-							color: #777;
-							@media (prefers-color-scheme: light) {
-								color: #999;
-							}
-						}
 					}
-					> .json_viewer {
-						color: var(--fg-light);
-						font-size: 14px;
-						flex-shrink: 1;
-						overflow-x: scroll;
-					}
-					> .json_editor,
-					> .json_viewer {
+
+					> footer {
+						height: 16px;
+						width: fit-content;
+						min-width: 0;
 						display: flex;
-						flex-shrink: 1;
-						z-index: -1;
-						overflow-x: scroll;
+						justify-content: flex-start;
 						align-items: center;
-						border-left: var(--fg-border-soft);
-						white-space: pre;
-						background: var(--bg-tint2);
-						&:focus-within {
-							background-color: var(--bg-max);
-							outline: 2px solid var(--fg-max);
-							* {
-								color: var(--fg-max);
-							}
+						flex-shrink: 1;
+						> button {
+							border: none;
+							background: none;
+							border-left: var(--fg-border-soft);
 						}
-						&.nu * {
-							display: flex;
-							height: 100%;
+						> .json_viewer {
+							color: var(--fg-light);
+							flex-shrink: 1;
+							overflow: scroll;
+							align-self: center;
+							align-items: flex-start;
 						}
-						> span {
-							padding: 0px 5px;
-							z-index: 0;
+						> .json_editor,
+						> .json_viewer {
+							height: 16px;
+							min-width: 10px;
+							padding-left: 4px;
+							padding-right: 2px;
+							display: flex;
+							flex-flow: row;
+							margin-right: 0px;
+							overflow-x: scroll;
+							align-items: center;
+							justify-content: flex-start;
+							white-space: pre;
+							border-left: var(--fg-border-soft);
+							&:focus-within {
+								background-color: var(--bg-max);
+								outline: 2px solid var(--fg-max);
+								* {
+									color: var(--fg-max);
+								}
+							}
+							main {
+								height: 100%;
+							}
+							> span {
+								padding: 0px 5px;
+								z-index: 0;
+							}
+							input {
+								outline: none;
+							}
 						}
-						input {
-							outline: none;
+					}
+
+					.detail {
+						margin-left: 5px;
+						color: #777;
+						@media (prefers-color-scheme: light) {
+							color: #999;
 						}
 					}
 				}
@@ -196,8 +241,8 @@ main[data-css="atom_io_devtools"] {
 				main {
 					display: flex;
 					flex-flow: row wrap;
-					gap: 5px;
-					.transaction_update {
+					gap: 0;
+					article.transaction_update {
 						width: 100%;
 						display: flex;
 						flex-flow: row;
@@ -205,10 +250,14 @@ main[data-css="atom_io_devtools"] {
 						justify-content: flex-start;
 						justify-items: flex-start;
 						align-content: flex-start;
-						border-left: var(--fg-border);
+						border-left: none;
+						border-bottom: none;
 						border-top: var(--fg-border);
 						header {
+							height: 100%;
 							padding: 5px;
+							display: flex;
+							flex-flow: column;
 							h4 {
 								margin: 0;
 								padding: 0;
@@ -219,6 +268,7 @@ main[data-css="atom_io_devtools"] {
 							margin-left: 0;
 							display: flex;
 							flex-flow: column;
+							flex-grow: 1;
 							gap: 0px;
 							border-left: 1px solid #333;
 							section ~ section {
@@ -226,16 +276,22 @@ main[data-css="atom_io_devtools"] {
 							}
 							section {
 								padding: 5px;
+								border-bottom: none;
+								margin: 0;
 								&.transaction_output {
 									border-right: none;
 								}
 								&.transaction_impact {
 									padding: 5px;
 								}
-								margin: 0;
+
 								article {
+									padding: 3px 6px;
 									border-left: var(--fg-border);
 									border-right: var(--fg-border);
+									&:first-of-type {
+										border-top: var(--fg-border);
+									}
 									.summary {
 										white-space: nowrap;
 									}
@@ -245,6 +301,7 @@ main[data-css="atom_io_devtools"] {
 					}
 				}
 			}
+
 			section.timeline_log {
 				header {
 					display: flex;
@@ -285,7 +342,9 @@ main[data-css="atom_io_devtools"] {
 			}
 		}
 	}
-	footer {
+
+	> footer {
+		z-index: 10000;
 		display: flex;
 		justify-content: flex-end;
 		button {
@@ -302,31 +361,41 @@ main[data-css="atom_io_devtools"] {
 	.json_editor {
 		display: flex;
 		flex-flow: column;
-		align-items: flex-start;
 		> header {
+			width: 100%;
 			display: flex;
 			flex-flow: row;
-			width: 100%;
-			position: relative;
-			align-items: baseline;
+			align-items: center;
 			overflow: hidden;
 			white-space: nowrap;
-			> .json_viewer {
-				flex-shrink: 1;
-				overflow-x: scroll;
+			justify-content: space-between;
+			&:has(> main > button.carat) {
 				height: 21px;
-				font-size: 14px;
+			}
+			> main {
 				display: flex;
+				flex-flow: row;
 				align-items: center;
-				margin-left: 6px;
-				color: var(--fg-light);
-			}
-			> button {
-				padding: 0;
-				&.carat {
-					line-height: 0.5em;
+				align-self: center;
+				flex-shrink: 1;
+				overflow-x: hidden;
+				padding-right: 2px;
+				> .json_viewer {
+					flex-shrink: 1;
+					overflow-x: scroll;
+					height: 21px;
 					font-size: 14px;
-					align-self: flex-start;
+					display: flex;
+					align-items: center;
+					margin-left: 0px;
+					color: var(--fg-soft);
+				}
+				> button {
+					padding: 0;
+					&.carat {
+						line-height: 0.5em;
+						font-size: 14px;
+					}
 				}
 			}
 		}
@@ -343,7 +412,6 @@ main[data-css="atom_io_devtools"] {
 			}
 		}
 		input,
-		button,
 		select {
 			&:focus-within {
 				outline: 2px solid var(--fg-max);
@@ -351,6 +419,7 @@ main[data-css="atom_io_devtools"] {
 				color: var(--fg-max);
 			}
 		}
+
 		button:disabled {
 			cursor: default;
 			> span.json_editor_icon {
@@ -376,9 +445,20 @@ main[data-css="atom_io_devtools"] {
 			padding: 4px;
 			padding-bottom: 6px;
 			cursor: pointer;
-			&:hover {
-				color: #333;
-				background-color: #aaa;
+			&:hover,
+			&:focus-within {
+				background-color: var(--fg-faint);
+				&,
+				> * {
+					color: var(--bg-color);
+				}
+			}
+			&:active {
+				background: var(--fg-color);
+				&,
+				> * {
+					color: var(--bg-color);
+				}
 			}
 		}
 		select {
@@ -404,6 +484,7 @@ main[data-css="atom_io_devtools"] {
 			padding-right: 0px;
 			&::after {
 				content: ":";
+				color: var(--fg-soft);
 			}
 			input {
 				color: var(--fg-color);
@@ -412,26 +493,35 @@ main[data-css="atom_io_devtools"] {
 		.json_editor_object,
 		.json_editor_array {
 			border-left: var(--fg-border-soft);
-			padding-left: 10px;
-			margin-left: 10px;
-			width: calc(100% - 21px);
+			margin-left: 9px;
+			width: calc(100% - 9px);
+			> footer {
+				display: flex;
+				flex-flow: row;
+				justify-content: flex-start;
+				justify-items: flex-start;
+				height: 21px;
+				align-items: baseline;
+				position: relative;
+			}
 			.json_editor_properties,
 			.json_editor_elements {
+				border-top: var(--fg-border-soft);
 				.json_editor_property,
 				.json_editor_element {
 					display: flex;
 					border-bottom: var(--fg-border-soft);
-					margin-bottom: 2px;
-					min-height: 23px;
+					margin-bottom: 0;
+					min-height: 21px;
 					> header {
-						width: 100%;
-
-						> span {
-							input {
-								min-width: 10px;
-							}
-							> * {
-								border: var(--fg-border-hint);
+						> main {
+							> span {
+								input {
+									min-width: 10px;
+								}
+								> * {
+									border: var(--fg-border-hint);
+								}
 							}
 						}
 					}
@@ -442,7 +532,7 @@ main[data-css="atom_io_devtools"] {
 						&:last-of-type {
 							border-bottom: none;
 						}
-						> span > * {
+						span > * {
 							border: 1px solid transparent;
 						}
 					}
@@ -459,10 +549,6 @@ main[data-css="atom_io_devtools"] {
 		border: none;
 		cursor: pointer;
 		background: none;
-		&:focus-within {
-			outline: none;
-			background: none;
-		}
 		> .json_editor_icon {
 			line-height: 4px;
 		}

package/src/react-devtools/json-editor/developer-interface.tsx

@@ -48,6 +48,7 @@ export const JsonEditor = <T,>({
 	name,
 	rename,
 	remove,
+	path = [],
 	isReadonly = () => false,
 	isHidden = () => false,
 	className,
@@ -68,7 +69,7 @@ export const JsonEditor = <T,>({
 			name={name}
 			rename={rename}
 			remove={remove}
-			path={[]}
+			path={path}
 			isReadonly={isReadonly}
 			isHidden={isHidden}
 			className={className}

package/src/react-devtools/json-editor/editors-by-type/array-editor.tsx

@@ -25,7 +25,7 @@ type ArrayElementProps = {
 	recast: (newType: keyof JsonTypes) => void
 	Components: JsonEditorComponents
 	testid?: string | undefined
-	viewIsOpenAtom: RegularAtomToken<boolean, string>
+	viewIsOpenAtom: RegularAtomToken<boolean, readonly (number | string)[]>
 }
 const ArrayElement = ({
 	path,
@@ -80,15 +80,14 @@ export const ArrayEditor = ({
 
 	return (
 		<Components.ArrayWrapper>
-			<div className={`json_editor_elements${disabled ? ` readonly` : ``}`}>
+			<main className={`json_editor_elements${disabled ? ` readonly` : ``}`}>
 				{data.map((element, index) => {
 					const elementPath = [...path, index]
 					const pathKey = elementPath.join(`,`)
-					const viewIsOpenAtom = findInStore(
-						store,
-						viewIsOpenAtoms,
-						`${testid}__${pathKey}`,
-					)
+					const viewIsOpenAtom = findInStore(store, viewIsOpenAtoms, [
+						...path,
+						index,
+					])
 					return (
 						<ArrayElement
 							key={pathKey}
@@ -105,19 +104,23 @@ export const ArrayEditor = ({
 						/>
 					)
 				})}
-			</div>
-			<Components.Button
-				testid={`${testid}-add-element`}
-				disabled={disabled}
-				onClick={() => {
-					set((current) => {
-						const newData = [...current, JSON_DEFAULTS.string]
-						return newData
-					})
-				}}
-			>
-				<Components.AddIcon />
-			</Components.Button>
+			</main>
+			{!disabled ? (
+				<footer>
+					<Components.Button
+						testid={`${testid}-add-element`}
+						disabled={disabled}
+						onClick={() => {
+							set((current) => {
+								const newData = [...current, JSON_DEFAULTS.string]
+								return newData
+							})
+						}}
+					>
+						<Components.AddIcon />
+					</Components.Button>
+				</footer>
+			) : null}
 		</Components.ArrayWrapper>
 	)
 }

package/src/react-devtools/json-editor/editors-by-type/object-editor.tsx

@@ -60,7 +60,7 @@ type ObjectPropertyProps = {
 	recast: (newType: keyof JsonTypes) => void
 	Components: JsonEditorComponents
 	testid?: string | undefined
-	viewIsOpenAtom: RegularAtomToken<boolean, string>
+	viewIsOpenAtom: RegularAtomToken<boolean, readonly (number | string)[]>
 }
 const ObjectProperty = ({
 	path,
@@ -137,28 +137,12 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 					const propertyPath = [...path, key]
 					const originalPropertyPath = [...path, originalKey]
 					const stablePathKey = originalPropertyPath.join(`.`)
-					const viewIsOpenAtom = findInStore(
-						store,
-						viewIsOpenAtoms,
-						`${testid}__${stablePathKey}`,
-					)
+					const viewIsOpenAtom = findInStore(store, viewIsOpenAtoms, [
+						...path,
+						key,
+					])
 
 					return (
-						// <JsonEditor_INTERNAL
-						// 	key={originalPath.join(`.`)}
-						// 	path={newPath}
-						// 	name={key}
-						// 	isReadonly={isReadonly}
-						// 	isHidden={isHidden}
-						// 	data={data[key as keyof T]}
-						// 	set={setProperty[key as keyof T]}
-						// 	rename={renameProperty[key as keyof T]}
-						// 	remove={removeProperty[key as keyof T]}
-						// 	recast={recastProperty[key as keyof T]}
-						// 	className="json_editor_property"
-						// 	Components={Components}
-						// 	testid={`${testid}-property-${key}`}
-						// />
 						<ObjectProperty
 							key={stablePathKey}
 							path={propertyPath}
@@ -177,7 +161,7 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 				})}
 			</div>
 			{disabled ? null : (
-				<>
+				<footer>
 					<Components.Button
 						disabled={disabled}
 						testid={`${testid}-add-property`}
@@ -196,7 +180,7 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 					>
 						Sort
 					</Components.Button>
-				</>
+				</footer>
 			)}
 		</Components.ObjectWrapper>
 	)