Add XML Tree View

src/constants.ts

@@ -1 +1,13 @@
 export const extensionPrefix = "xmlTools";
+
+export namespace commands {
+    export const setContext = "setContext";
+}
+
+export namespace contextKeys {
+    export const xmlTreeViewEnabled = "xmlTreeViewEnabled";
+}
+
+export namespace configKeys {
+    export const enableXmlTreeView = "enableXmlTreeView";
+}

src/extension.ts

@@ -7,6 +7,7 @@ import { MinifyXmlCommandName, minifyXml } from "./formatting/commands/minifyXml
 import { XmlFormatterFactory } from "./formatting/xml-formatter";
 import { XmlFormattingEditProvider } from "./formatting/xml-formatting-edit-provider";
 import { XQueryLinter } from "./linting/xquery-linter";
+import { XmlTreeDataProvider } from "./tree-view/xml-tree-data-provider";
 
 import * as constants from "./constants";
 
@@ -33,6 +34,11 @@ export function activate(context: ExtensionContext) {
         window.onDidChangeActiveTextEditor(_handleChangeActiveTextEditor),
         window.onDidChangeTextEditorSelection(_handleChangeTextEditorSelection)
     );
+
+    /* Tree View Features */
+    context.subscriptions.push(
+        window.registerTreeDataProvider("xmlTreeView", new XmlTreeDataProvider(context))
+    );
 }
 
 export function deactivate() {

src/formatting/xml-formatting-options.ts

@@ -14,7 +14,7 @@ export interface XmlFormattingOptions {
 export class XmlFormattingOptionsFactory {
     static getXmlFormattingOptions(formattingOptions: FormattingOptions, eol: EndOfLine): XmlFormattingOptions {
         const config = workspace.getConfiguration(constants.extensionPrefix);
-        
+
         return {
             editorOptions: formattingOptions,
             newLine: (eol === EndOfLine.CRLF) ? "\r\n" : "\n",
@@ -23,4 +23,4 @@ export class XmlFormattingOptionsFactory {
             splitXmlnsOnFormat: config.get<boolean>("splitXmlnsOnFormat")
         };
     }
-}
+}

src/tree-view/xml-tree-data-provider.ts

@@ -0,0 +1,142 @@
+import { commands, window, workspace } from "vscode";
+import {
+    Event, EventEmitter, ExtensionContext, TextEditor, TreeDataProvider,
+    TreeItem, TreeItemCollapsibleState
+} from "vscode";
+
+import * as path from "path";
+import { DOMParser } from "xmldom";
+
+import * as constants from "../constants";
+
+export class XmlTreeDataProvider implements TreeDataProvider<any> {
+    private _onDidChangeTreeData: EventEmitter<any> = new EventEmitter<any>();
+    private _xmlDocument: any;
+
+    constructor(private _context: ExtensionContext) {
+        window.onDidChangeActiveTextEditor(() => {
+            this._refreshTree();
+        });
+
+        workspace.onDidChangeTextDocument(() => {
+            this._refreshTree();
+        });
+    }
+
+    onDidChangeTreeData = this._onDidChangeTreeData.event;
+
+    get activeEditor(): TextEditor {
+        return window.activeTextEditor || null;
+    }
+
+    getTreeItem(element: any): TreeItem | Thenable<TreeItem> {
+        const treeItem = new TreeItem(element.localName);
+
+        if (this._getChildAttributeArray(element).length > 0) {
+            treeItem.collapsibleState = TreeItemCollapsibleState.Collapsed;
+        }
+
+        if (this._getChildElementArray(element).length > 0) {
+            treeItem.collapsibleState = TreeItemCollapsibleState.Collapsed;
+        }
+
+        treeItem.command = {
+            command: "revealLine",
+            title: "",
+            arguments: [{
+                lineNumber: element.lineNumber - 1,
+                at: "top"
+            }]
+        };
+
+        treeItem.iconPath = this._getIcon(element);
+
+        return treeItem;
+    }
+
+    getChildren(element?: any): any[] | Thenable<any[]> {
+        if (!this._xmlDocument) {
+            this._refreshTree();
+        }
+
+        if (element) {
+            return [].concat(this._getChildAttributeArray(element), this._getChildElementArray(element));
+        }
+
+        else if (this._xmlDocument) {
+            return [this._xmlDocument.lastChild];
+        }
+
+        else {
+            return [];
+        }
+    }
+
+    private _getChildAttributeArray(node: any): any[] {
+        if (!node.attributes) {
+            return [];
+        }
+
+        const array = new Array<any>();
+
+        for (let i = 0; i < node.attributes.length; i++) {
+            array.push(node.attributes[i]);
+        }
+
+        return array;
+    }
+
+    private _getChildElementArray(node: any): any[] {
+        if (!node.childNodes) {
+            return [];
+        }
+
+        const array = new Array<any>();
+
+        for (let i = 0; i < node.childNodes.length; i++) {
+            let child = node.childNodes[i];
+
+            if (child.tagName) {
+                array.push(child);
+            }
+        }
+
+        return array;
+    }
+
+    private _getIcon(element: any): any {
+        let type = "element";
+
+        if (!element.tagName) {
+            type = "attribute";
+        }
+
+        const icon = {
+            dark: this._context.asAbsolutePath(path.join("resources", "icons", `${type}.dark.svg`)),
+            light: this._context.asAbsolutePath(path.join("resources", "icons", `${type}.light.svg`))
+        };
+
+        return icon;
+    }
+
+    private _refreshTree(): void {
+        if (!this.activeEditor || this.activeEditor.document.languageId !== "xml") {
+            commands.executeCommand(constants.commands.setContext, constants.contextKeys.xmlTreeViewEnabled, false);
+
+            this._xmlDocument = null;
+            this._onDidChangeTreeData.fire();
+            return;
+        }
+
+        const config = workspace.getConfiguration(constants.extensionPrefix);
+        const enableTreeView = config.get<boolean>(constants.configKeys.enableXmlTreeView, true);
+
+        commands.executeCommand(constants.commands.setContext, constants.contextKeys.xmlTreeViewEnabled, enableTreeView);
+
+        const xml = this.activeEditor.document.getText();
+        this._xmlDocument = new DOMParser().parseFromString(xml, "text/xml");
+
+        this._onDidChangeTreeData.fire();
+    }
+
+}