Improve the Data panel's data display with monospaced text and copyable number values (#4040)

* Improve the Data panel's data display with monospaced text and copyable number values

* Revert attempted fix for dropdown menus appearing lower in scrolled Properties panel, since it makes other floating menus freeze the app

* Code review

editor/src/messages/layout/utility_types/widgets/input_widgets.rs

@@ -362,6 +362,7 @@ pub struct TextAreaInput {
 	pub value: String,
 	pub label: Option<String>,
 	pub disabled: bool,
+	pub monospace: bool,
 
 	// Tooltips
 	#[serde(rename = "tooltipLabel")]

editor/src/messages/portfolio/document/data_panel/data_panel_message_handler.rs

@@ -584,7 +584,7 @@ impl TableRowLayout for f64 {
 		"Number (f64)".to_string()
 	}
 	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
-		let widgets = vec![TextLabel::new(self.to_string()).widget_instance()];
+		let widgets = vec![NumberInput::new(Some(*self)).disabled(true).max_width(220).display_decimal_places(20).widget_instance()];
 		vec![LayoutGroup::row(widgets)]
 	}
 }
@@ -597,7 +597,7 @@ impl TableRowLayout for u32 {
 		"Number (u32)".to_string()
 	}
 	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
-		let widgets = vec![TextLabel::new(self.to_string()).widget_instance()];
+		let widgets = vec![NumberInput::new(Some(*self as f64)).disabled(true).max_width(220).display_decimal_places(20).widget_instance()];
 		vec![LayoutGroup::row(widgets)]
 	}
 }
@@ -610,7 +610,8 @@ impl TableRowLayout for u64 {
 		"Number (u64)".to_string()
 	}
 	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
-		let widgets = vec![TextLabel::new(self.to_string()).widget_instance()];
+		// TODO: Make this robust for large u64 values that don't fit in f64 (above roughly 2^53). Perhaps using a bigint kind of approach through the widget's data flow.
+		let widgets = vec![NumberInput::new(Some(*self as f64)).disabled(true).max_width(220).display_decimal_places(20).widget_instance()];
 		vec![LayoutGroup::row(widgets)]
 	}
 }
@@ -642,7 +643,7 @@ impl TableRowLayout for String {
 		}
 	}
 	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
-		let widgets = vec![TextAreaInput::new(self.to_string()).disabled(true).widget_instance()];
+		let widgets = vec![TextAreaInput::new(self.to_string()).monospace(true).disabled(true).widget_instance()];
 		vec![LayoutGroup::row(widgets)]
 	}
 }

editor/src/messages/portfolio/document/node_graph/node_properties.rs

@@ -2355,7 +2355,12 @@ pub mod choice {
 						.map(|(item, metadata)| {
 							let updater = updater_factory();
 							let committer = committer_factory();
-							MenuListEntry::new(metadata.name).label(metadata.label).on_update(move |_| updater(item)).on_commit(committer)
+							MenuListEntry::new(metadata.name)
+								.label(metadata.label)
+								.tooltip_label(metadata.label)
+								.tooltip_description(metadata.description.unwrap_or_default())
+								.on_update(move |_| updater(item))
+								.on_commit(committer)
 						})
 						.collect()
 				})

frontend/src/components/Editor.svelte

@@ -261,9 +261,27 @@
 		font-weight: 400;
 		font-size: 14px;
 		line-height: 1;
+		tab-size: 4;
 		color: var(--color-e-nearwhite);
 	}
 
+	body,
+	textarea,
+	input {
+		&::selection {
+			background-color: var(--color-4-dimgray);
+
+			// Target only Safari
+			@supports (background: -webkit-named-image(i)) {
+				& {
+					// Setting an alpha value opts out of Safari's "fancy" (but not visible on dark backgrounds) selection highlight rendering
+					// https://stackoverflow.com/a/71753552/775283
+					background-color: rgba(var(--color-4-dimgray-rgb), calc(254 / 255));
+				}
+			}
+		}
+	}
+
 	svg,
 	img {
 		display: block;

frontend/src/components/panels/Data.svelte

@@ -54,11 +54,16 @@
 		.widget-span:has(.text-area-input) {
 			flex: 1 1 100%;
 
-			.text-area-input textarea {
-				height: 100%;
-				margin-top: 0;
-				margin-bottom: 0;
-				resize: none;
+			.text-area-input {
+				margin: 0;
+				padding: 4px 0;
+
+				textarea {
+					height: 100%;
+					margin-top: 0;
+					margin-bottom: 0;
+					resize: none;
+				}
 			}
 		}
 	}

frontend/src/components/views/Graph.svelte

@@ -519,7 +519,7 @@
 				style:--node-chain-area-left-extension={layerChainWidth !== 0 ? layerChainWidth + 0.5 : 0}
 				data-tooltip-label={nodeNameTooltipLabel(node)}
 				data-tooltip-description={`
-					${(description || "").trim()}${editor.inDevelopmentMode() ? `\n\nID: ${node.id}. Position: (${node.position[0]}, ${node.position[1]}).` : ""}
+					${(description || "").trim()}${editor.inDevelopmentMode() ? `\n\n*ID: ${node.id}. Position: (${node.position[0]}, ${node.position[1]}).*` : ""}
 					`.trim()}
 				data-node={node.id}
 			>
@@ -682,7 +682,7 @@
 				style:--data-color-dim={`var(--color-data-${(node.primaryOutput?.dataType || "General").toLowerCase()}-dim)`}
 				data-tooltip-label={nodeNameTooltipLabel(node)}
 				data-tooltip-description={`
-					${(description || "").trim()}${editor.inDevelopmentMode() ? `\n\nID: ${node.id}. Position: (${node.position[0]}, ${node.position[1]}).` : ""}
+					${(description || "").trim()}${editor.inDevelopmentMode() ? `\n\n*ID: ${node.id}. Position: (${node.position[0]}, ${node.position[1]}).*` : ""}
 					`.trim()}
 				data-node={node.id}
 			>

frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte

@@ -12,11 +12,31 @@
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	// Callbacks
 	export let action: (index: number) => void;
+
+	function truncate(label: string): string {
+		let maxLength = 40;
+
+		if (label.length <= maxLength) return label;
+
+		let truncated = label;
+		const hasQuotes = label.startsWith(`"`) && label.endsWith(`"`);
+
+		if (hasQuotes) {
+			truncated = label.slice(1, -1);
+			maxLength -= 2;
+		}
+
+		truncated = truncated.slice(0, maxLength - 1) + "…";
+
+		if (hasQuotes) truncated = `"${truncated}"`;
+
+		return truncated;
+	}
 </script>
 
 <LayoutRow class="breadcrumb-trail-buttons" {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
 	{#each labels as label, index}
-		<TextButton {label} emphasized={index === labels.length - 1} {disabled} action={() => !disabled && index !== labels.length - 1 && action(index)} />
+		<TextButton label={truncate(label)} emphasized={index === labels.length - 1} {disabled} action={() => !disabled && index !== labels.length - 1 && action(index)} />
 	{/each}
 </LayoutRow>
 

frontend/src/components/widgets/inputs/FieldInput.svelte

@@ -22,6 +22,7 @@
 	export let label: string | undefined = undefined;
 	export let spellcheck = false;
 	export let disabled = false;
+	export let monospace = false;
 	export let narrow = false;
 	export let textarea = false;
 	export let tooltipLabel: string | undefined = undefined;
@@ -75,7 +76,7 @@
 </script>
 
 <!-- This is a base component, extended by others like NumberInput and TextInput. It should not be used directly. -->
-<LayoutRow class={`field-input ${className}`} classes={{ disabled, narrow, ...classes }} style={styleName} {styles} {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
+<LayoutRow class={`field-input ${className}`} classes={{ disabled, narrow, monospace, ...classes }} style={styleName} {styles} {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
 	{#if !textarea}
 		<input
 			type="text"
@@ -133,6 +134,13 @@
 			--widget-height: 20px;
 		}
 
+		&.monospace {
+			input,
+			textarea {
+				font-family: "Source Code Pro", monospace;
+			}
+		}
+
 		label {
 			flex: 0 0 auto;
 			line-height: calc(var(--widget-height) - 6px);
@@ -163,19 +171,6 @@
 			color: var(--color-e-nearwhite);
 			caret-color: var(--color-e-nearwhite);
 			unicode-bidi: plaintext;
-
-			&::selection {
-				background-color: var(--color-4-dimgray);
-
-				// Target only Safari
-				@supports (background: -webkit-named-image(i)) {
-					& {
-						// Setting an alpha value opts out of Safari's "fancy" (but not visible on dark backgrounds) selection highlight rendering
-						// https://stackoverflow.com/a/71753552/775283
-						background-color: rgba(var(--color-4-dimgray-rgb), calc(254 / 255));
-					}
-				}
-			}
 		}
 
 		input {
@@ -210,11 +205,6 @@
 			textarea {
 				color: var(--color-8-uppergray);
 			}
-
-			input {
-				// Disables drag-selecting the text, since `user-select: none` doesn't work for input elements
-				pointer-events: none;
-			}
 		}
 	}
 </style>

frontend/src/components/widgets/inputs/TextAreaInput.svelte

@@ -11,6 +11,7 @@
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	export let disabled = false;
+	export let monospace = false;
 
 	let self: FieldInput | undefined;
 	let editing = false;
@@ -57,6 +58,7 @@
 	spellcheck={true}
 	{label}
 	{disabled}
+	{monospace}
 	{tooltipLabel}
 	{tooltipDescription}
 	{tooltipShortcut}