Version 0.0.4

.vscodeignore

@@ -1,2 +1,5 @@
-src/
-libjs/
+src/**
+.vscode/**
+.gitignore
+tsconfig.json
+tslint.json

CHANGELOG.md

@@ -1,7 +1,13 @@
 # Change Log
 
-## 0.0.3 (Oct 22, 2019)
-Super minor readme fixes, added this changelog
+## 0.0.4
+- Fixed initialization & first display problems
+- Added preview icon to top right of editor menu bar
+- More robust activation options/filters
+- Extension is now a singleton panel
 
-## 0.0.2 (Oct 22, 2019)
-Initial release
+## 0.0.3
+- Super minor readme fixes, added this changelog
+
+## 0.0.2
+- Initial release. We don't talk about v0.0.1

README.md

@@ -2,7 +2,7 @@
 [![Version](https://vsmarketplacebadge.apphb.com/version/bencoleman.armview.svg)](https://marketplace.visualstudio.com/items?itemName=bencoleman.armview) 
 ![Installs](https://vsmarketplacebadge.apphb.com/installs-short/bencoleman.armview.svg)
 
-This extension displays a graphical preview of Azure Resource Manager (ARM) templates. The view will show all resources with the offical Azure icons and also linkage between the resources
+This extension displays a graphical preview of Azure Resource Manager (ARM) templates. The view will show all resources with the official Azure icons and also linkage between the resources. Uses the [Cytoscape.js library](http://js.cytoscape.org/)
 
 ![s1](assets/readme/screen1.png)
 
@@ -11,21 +11,26 @@ This extension displays a graphical preview of Azure Resource Manager (ARM) temp
 ![s3](assets/readme/screen3.png)
 
 # Usage
-- Open a ARM template JSON file, make sure the editor is focused/active
-- Open the VS Code command pallete with `Ctrl+Shift+P` or `⇧⌘P` on a mac
-- Start typing `ARM Viewer`
-- Pick `ARM Viewer: Preview ARM file graphically` from the list
+- Open a ARM template JSON file, and ensure it is active/focused
+  - Click the eye symbol in the top right of the editor tab bar
+- Or:
+  - Open the VS Code command pallet with `Ctrl+Shift+P` or `⇧⌘P` on a mac
+  - Start typing `ARM Viewer`
+  - Pick `ARM Viewer: Preview ARM file graphically` from the list
+- Or:
+  - Use keyboard shortcut `Ctrl+Alt+Q`
+
 
 ## Features
-- Click on a resource to show popup infobox for that resource
+- Click on a resource to show popup 'infobox' for that resource
 - Click 'LABELS' button to toggle labels from resource names to resource types
 - Click 'FIT' button to refit the view to the best zoom level
-- Click 'LAYOUT' button to relayout icons in default way
+- Click 'LAYOUT' button to re-layout icons in default way
 
 # Notes
-This is a port of a older project which was a standalone Node.js webapp https://github.com/benc-uk/azure-armviewer
+This is a port of a older *ARM Viewer* project, which was a standalone Node.js webapp https://github.com/benc-uk/azure-armviewer
 
-This project was inspired by the old ARMViz tool. ARMViz sadly seems to have been abandoned, it often has problems displaying templates, and personally I was never that pleased with the look of the output. These are some of the reasons why I created this project
+This project was inspired by the old ARMViz tool. ARMViz sadly seems to have been abandoned, it often has problems displaying templates, and personally I found the appearance of the output looked poor, and was hard to read. These are some of the reasons why I created this project
 
 # Limitations & Known Issues 
 - The code attempts to find the links (`dependsOn` relationships) between ARM resources, however due to the *many* subtle and complex ways these relationships can be defined & expressed, certain links may not be picked up & displayed.

assets/css/main.css

@@ -32,7 +32,7 @@ button:hover {
   display: block;
   font-size: 90%;
   border: 2px solid var(--vscode-button-background);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 35px rgba(0, 0, 0, 0.7);
   position: absolute;
   z-index: 8000;
   bottom: 10px;
@@ -46,6 +46,10 @@ button:hover {
   transition: all 0.4s ease-in
 }
 
+#infotable {
+  padding: 5px;
+}
+
 #infobox td:first-child {
   font-weight: bold;
   color: var(--vscode-button-background);
@@ -66,3 +70,18 @@ button:hover {
   font-weight: bold;
   cursor: pointer;
 }
+
+.panel-heading {
+  background-color: var(--vscode-selection-background);
+  font-size: 130%;
+  font-weight: bold;
+  cursor: pointer;
+  padding: 4px;
+  margin: auto;
+  vertical-align: middle;
+}
+
+#infobox .panel-heading img {
+  height: 25px;
+  vertical-align: middle;
+}

assets/js/main.js

@@ -12,20 +12,21 @@ var labelField = 'label';
 
 var iconPrefix
 
-window.addEventListener("resize", function() {
+window.addEventListener("resize", function() { 
   if(cy) {
     cy.resize();
     cy.fit();
   }
 });
 
-function displayData(data, prefix) {
+
+function init(prefix) {
   iconPrefix = prefix
 
   hideInfo();
 
   cy = cytoscape({ 
-    container: document.getElementById('mainview'),// $('#mainview'),
+    container: document.getElementById('mainview'),
     wheelSensitivity: 0.15,
     maxZoom: 5,
     minZoom: 0.2,
@@ -50,6 +51,7 @@ function displayData(data, prefix) {
       }
 
       // The rest of this is just pulling info from the node's data and showing it in a HTML div & table
+      document.getElementById('infoimg').setAttribute('src', iconPrefix + evt.target.data('img'));
 
       document.getElementById('infotable').innerHTML = ''
       addInfo('Name', evt.target.data('name'));
@@ -72,7 +74,15 @@ function displayData(data, prefix) {
     }
   })
 
-  // Important part! load the elements (nodes) to the view
+  // Send message that we're initialized and ready for data
+  const vscode = acquireVsCodeApi();
+  vscode.postMessage({ command: 'initialized' })  
+  console.log("armview: Initialization complete");
+}
+
+function displayData(data) {
+  console.log("armview: Displaying data");
+  cy.remove('*');
   cy.add(data);
   reLayout();
 }

package.json

@@ -2,7 +2,7 @@
 	"name": "armview",
 	"displayName": "ARM Template Viewer",
 	"description": "Graphically display ARM templates in an interactive map view",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"icon": "assets/img/icons/main.png",
 	"publisher": "bencoleman",
 	"author": {
@@ -41,9 +41,44 @@
 			{
 				"command": "armView.start",
 				"title": "Preview ARM file graphically",
-				"category": "ARM Viewer"
+				"category": "ARM Viewer",
+				"icon": {
+					"light": "./assets/img/icons/eye-light.svg",
+					"dark": "./assets/img/icons/eye-dark.svg"
+				}				
 			}
-		]
+		],
+		"menus": {
+			"editor/title": [
+				{
+					"command": "armView.start",
+					"when": "editorLangId == json",
+					"group": "navigation"
+				}
+			],
+			"editor/title/context": [
+				{
+					"command": "armView.start",
+					"when": "editorLangId == json",
+					"group": "navigation"
+				}
+			],			
+			"commandPalette": [
+				{
+					"command": "armView.start",
+					"when": "editorLangId == json",
+					"group": "navigation"
+				}
+			]
+		},
+		"keybindings": [
+      {
+        "command": "armView.start",
+        "key": "ctrl+alt+q",
+        "mac": "cmd+alt+q",
+        "when": "editorLangId == json"
+      }
+    ]
 	},
 	"scripts": {
 		"vscode:prepublish": "npm run compile",

src/extension.ts

@@ -10,6 +10,7 @@ import ARMParser from './lib/arm-parser';
 
 var panel: vscode.WebviewPanel | undefined = undefined;
 var extensionPath: string;
+var editor: vscode.TextEditor;
 
 //
 // Main extension activation
@@ -20,6 +21,7 @@ export function activate(context: vscode.ExtensionContext) {
   context.subscriptions.push(
     vscode.commands.registerCommand('armView.start', () => {
 			// Check for open editors that are showing JSON
+			// These are safe guards, the `when` clauses in package.json should prevent this
 			if(!vscode.window.activeTextEditor) {
 				vscode.window.showErrorMessage("No editor active, open a ARM template JSON file in the editor")
 				return;
@@ -29,6 +31,15 @@ export function activate(context: vscode.ExtensionContext) {
 					return;
 				}
 			}
+
+			// Store the active editor at start
+			editor = vscode.window.activeTextEditor
+
+			if (panel) {
+				// If we already have a panel, show it
+				panel.reveal();
+				return;
+			} 
 
 			// Create the panel (held globally)
       panel = vscode.window.createWebviewPanel(
@@ -49,28 +60,39 @@ export function activate(context: vscode.ExtensionContext) {
 
 			// Load the webview HTML/JS
 			panel.webview.html = getWebviewContent();
-
-			// Initial load of content
-			refreshView();
 
-			// Listen for editor changes
+			// Listen for active document changes, i.e. user typing
 			vscode.workspace.onDidChangeTextDocument(event => {
 				//console.log("### onDidChangeTextDocument");
 				try {
 					refreshView();
 				} catch(err) {}
 			});
-			// Listen for active document changes
+
+			// Listen for active editor changes
 			vscode.window.onDidChangeActiveTextEditor(event => {
 				//console.log("### onDidChangeActiveTextEditor");
 				try {
-					refreshView();
+					// Switch editor and refresh
+					if(vscode.window.activeTextEditor) {
+						editor = vscode.window.activeTextEditor;
+						refreshView();
+					}
 				} catch(err) {}
 			});
-
-			// Update contents based on view state changes - reserv
-			//panel.onDidChangeViewState(event => {}, null, context.subscriptions);
-
+
+      // Handle messages from the webview
+      panel.webview.onDidReceiveMessage(
+        message => {
+          if (message.command == 'initialized') {
+						// Initial load of content, done at startup
+						refreshView();
+          }
+        },
+        undefined,
+        context.subscriptions
+			);
+
 			// Dispose/cleanup
 			panel.onDidDispose(
         () => {
@@ -90,7 +112,6 @@ function refreshView() {
 	if(!panel)
 		return
 
-	var editor = vscode.window.activeTextEditor;
 	if(editor) {
 		// Skip non-JSON
 		if(editor.document.languageId != "json") {
@@ -108,6 +129,8 @@ function refreshView() {
 			// Send result as message
 			panel.webview.postMessage({ command: 'refresh', payload: parser.getResult() });
 		}
+	} else {
+		vscode.window.showErrorMessage("No editor active, open a ARM template JSON file in the editor")
 	}
 };
 
@@ -123,19 +146,20 @@ function getWebviewContent() {
 	const cytoscapeUri = panel.webview.asWebviewUri(vscode.Uri.file(path.join(extensionPath, 'assets', 'js', 'cytoscape.min.js')));
 	const prefix = panel.webview.asWebviewUri(vscode.Uri.file(path.join(extensionPath, 'assets')));
 
-  return `<!DOCTYPE html>
+	return `
+<!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<!--meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; script-src * 'unsafe-inline'; style-src * 'unsafe-inline'"-->
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<!--meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; script-src * 'unsafe-inline'; style-src * 'unsafe-inline'"-->
 
-		<script src="${cytoscapeUri}"></script>
-		<script src="${mainScriptUri}"></script>
+	<script src="${cytoscapeUri}"></script>
+	<script src="${mainScriptUri}"></script>
 
-		<link href="${mainCss}" rel="stylesheet" type="text/css">
+	<link href="${mainCss}" rel="stylesheet" type="text/css">
 
-    <title>ARM Viewer</title>
+	<title>ARM Viewer</title>
 </head>
 <body>
 	<div id="error"></div>
@@ -146,7 +170,8 @@ function getWebviewContent() {
 	</div>
 	<div id="mainview"></div>
 
-  <div id="infobox">
+	<div id="infobox">
+	  <div class="panel-heading" onclick="hideInfo()"><img id="infoimg" src=''/> &nbsp; Resource Details</div>
     <div class="panel-body">
       <table id="infotable">    
       </table>
@@ -158,11 +183,10 @@ function getWebviewContent() {
 			const message = event.data;
 
 			if(message.command == 'refresh') {
-				//console.log("### webview recv refresh command");
 				document.getElementById('error').style.display = "none"
 				document.getElementById('mainview').style.display = "block"
 				document.getElementById('buttons').style.display = "block"
-				displayData(message.payload, "${prefix}");
+				displayData(message.payload);
 			}
 
 			if(message.command == 'error') {
@@ -172,6 +196,8 @@ function getWebviewContent() {
 				document.getElementById('buttons').style.display = "none"
 			}			
 		});
+
+		init("${prefix}")
   </script>
 </body>
 </html>`;