Improved typescript visualizer. Opens browser window in chrome appmode by default.

extension/ui/src/Visualizers/TreeVisualizer/Views.tsx

@@ -92,6 +92,7 @@ export class TreeNodeViewModel {
 		public readonly id: string | undefined,
 		public readonly name: string,
 		public readonly value: string | undefined,
+		public readonly emphasizedValue: string | undefined,
 		public readonly children: TreeNodeViewModel[]
 	) {}
 
@@ -167,6 +168,20 @@ export class TreeNodeViewModel {
 	}
 }
 
+const isValidFunctionName = (function() {
+	var validName = /^[$A-Z_][0-9A-Z_$]*$/i;
+	var reserved = {
+		abstract: true,
+		boolean: true,
+		// ...
+		with: true,
+	} as any;
+	return function(s: string) {
+		// Ensure a valid name and not reserved.
+		return validName.test(s) && !reserved[s];
+	};
+})();
+
 @observer
 export class TreeWithPathView extends React.Component<{
 	model: TreeViewModel;
@@ -178,7 +193,39 @@ export class TreeWithPathView extends React.Component<{
 				<div className="part-path">
 					<span>
 						{model.selected ? (
-							<span>{model.selected.path.join(" / ")}</span>
+							<span>
+								{model.selected.path.reduce((acc, v) => {
+									acc = acc.slice();
+									function add() {
+										acc.push(
+											<span
+												className="part-path-item"
+												key={acc.length}
+											>
+												{v}
+											</span>
+										);
+									}
+									if (isValidFunctionName(v)) {
+										if (acc.length > 0) {
+											acc.push(
+												<span key={acc.length}>.</span>
+											);
+										}
+										add();
+									} else {
+										acc.push(
+											<span key={acc.length}>[</span>
+										);
+										add();
+										acc.push(
+											<span key={acc.length}>]</span>
+										);
+									}
+
+									return acc;
+								}, new Array<React.ReactElement>())}
+							</span>
 						) : (
 							"(Nothing Selected)"
 						)}
@@ -428,6 +475,11 @@ export class TreeNodeView extends React.Component<{
 						{model.value && (
 							<span className="part-value">{model.value}</span>
 						)}
+						{model.emphasizedValue && (
+							<span className="part-emphasized-value">
+								{model.emphasizedValue}
+							</span>
+						)}
 					</span>
 				</div>
 

extension/ui/src/Visualizers/TreeVisualizer/Visualizer.tsx

@@ -1,4 +1,9 @@
-import { TreeViewModel, TreeNodeViewModel, TreeView } from "./Views";
+import {
+	TreeViewModel,
+	TreeNodeViewModel,
+	TreeView,
+	TreeWithPathView,
+} from "./Views";
 import {
 	CommonDataTypes,
 	ExtractedData,
@@ -31,6 +36,7 @@ export function createTreeViewModelFromTreeNodeData(
 			node.id,
 			node.name,
 			node.value,
+			node.emphasizedValue,
 			children
 		);
 		model.isMarked = node.isMarked;
@@ -53,7 +59,7 @@ export class TreeVisualizer extends VisualizationProvider {
 				priority: 100,
 				render() {
 					const m = createTreeViewModelFromTreeNodeData(data.root);
-					return <TreeView model={m} />;
+					return <TreeWithPathView model={m} />;
 				},
 			});
 		}

extension/ui/src/Visualizers/TreeVisualizer/style.scss

@@ -58,6 +58,19 @@
 			}
 
 			.part-value {
+				color: darkgreen;
+				text-decoration: underline;
+
+				/*&::before,
+				&::after {
+					content: '"';
+				}*/
+
+				padding: 1px 3px;
+				margin-left: 5px;
+			}
+
+			.part-emphasized-value {
 				color: darkred;
 				border: black solid 1px;
 				padding: 1px 3px;
@@ -99,6 +112,14 @@
 		white-space: pre;
 		padding: 5px 10px;
 		border-bottom: solid gray 1px;
+
+		color: lightgray;
+
+		.part-path-item {
+			color: black;
+			margin-left: 1px;
+			margin-right: 1px;
+		}
 	}
 	.part-tree {
 		overflow: auto;