diff --git a/README.md b/README.md
index 4ff06e8..1e2c266 100644
--- a/README.md
+++ b/README.md
@@ -17,4 +17,9 @@ Detailed release notes are available [here](https://github.com/DotJoshJohnson/vs
 Run into a bug? Report it [here](https://github.com/DotJoshJohnson/vscode-xml/issues).
 
 ## Roadmap
-Check out development progress [here](https://github.com/DotJoshJohnson/vscode-xml/projects/1).
\ No newline at end of file
+Check out development progress [here](https://github.com/DotJoshJohnson/vscode-xml/projects/1).
+
+## Icon Credits
+Icons used in the XML Tree View are used under the Creative Commons 3.0 BY license.
+* "Code" icon by Dave Gandy from www.flaticon.com
+* "At" icon by FreePik from www.flaticon.com
\ No newline at end of file
diff --git a/package.json b/package.json
index 2d5fc81..f4839b3 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
 	"name": "xml",
 	"displayName": "XML Tools",
 	"description": "XML Formatting, XQuery, and XPath Tools for Visual Studio Code",
-	"version": "1.8.0",
+	"version": "1.9.0",
 	"publisher": "DotJoshJohnson",
 	"author": {
 		"name": "Josh Johnson",
@@ -22,7 +22,7 @@
 		"url": "https://github.com/DotJoshJohnson/vscode-xml/issues"
 	},
 	"engines": {
-		"vscode": "^0.10.7",
+		"vscode": "^1.13.0",
 		"node": "^0.12.0"
 	},
 	"categories": [
@@ -46,10 +46,6 @@
                 "command": "xmlTools.executeXQuery",
                 "title": "XML Tools: Execute XQuery"
             },
-            {
-                "command": "xmlTools.viewXmlTree",
-                "title": "XML Tools: View XML Tree"
-            },
             {
                 "command": "xmlTools.formatAsXml",
                 "title": "XML Tools: Format as XML"
@@ -115,7 +111,15 @@
                 "scopeName": "source.xquery",
                 "path": "./languages/xquery/xquery.tmLanguage"
             }
-        ]
+        ],
+        "views": {
+            "explorer": [
+                {
+                    "id": "xmlTreeView",
+                    "name": "XML Document"
+                }
+            ]
+        }
 	},
 	"activationEvents": [
 		"onLanguage:xml",
@@ -124,12 +128,11 @@
         "onCommand:xmlTools.minifyXml",
         "onCommand:xmlTools.evaluateXPath",
         "onCommand:xmlTools.executeXQuery",
-        "onCommand:xmlTools.viewXmlTree",
         "onCommand:xmlTools.formatAsXml"
 	],
 	"devDependencies": {
-		"vscode": "^0.11.8",
-		"typescript": "^1.6.2",
+		"vscode": "^1.1.0",
+		"typescript": "^2.3.4",
         "gulp": "^3.9.0",
         "gulp-shell": "^0.5.1"
 	},
diff --git a/resources/icons/attribute.dark.svg b/resources/icons/attribute.dark.svg
new file mode 100644
index 0000000..f208dc3
--- /dev/null
+++ b/resources/icons/attribute.dark.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve" width="512px" height="512px">
+<path d="M374.621,429.894c-30.535,14.94-68.393,22.412-113.58,22.412c-42.256,0-80.758-7.175-115.517-21.519  c-34.759-14.35-61.315-36.548-79.682-66.598c-18.367-30.056-27.555-65.878-27.555-107.479c0-39.729,9.188-76.947,27.555-111.675  c18.367-34.716,44.239-61.375,77.61-79.967c33.38-18.592,70.24-27.889,110.609-27.889c35.355,0,67.65,7.39,96.885,22.157  c29.236,14.773,51.219,34.472,65.969,59.086c14.75,24.619,22.12,51.105,22.12,79.464c0,24.277-5.737,47.837-17.203,70.671  c-11.475,22.835-27.036,41.045-46.694,54.629c-14.838,10.357-26.821,15.532-35.97,15.532c-5.005,0-9.267-1.651-12.805-4.966  c-3.538-3.309-5.297-7.256-5.297-11.84c0-2.544,2.581-15.7,7.761-39.474l37.25-170.889h-46.311l-8.797,39.474  c-9.824-15.787-21.553-27.546-35.179-35.272c-13.626-7.725-27.945-11.591-42.949-11.591c-19.657,0-39.93,6.792-60.798,20.377  c-20.869,13.584-38.336,33.916-52.392,60.993c-14.055,27.083-21.084,54.119-21.084,81.115c0,21.901,4.526,42.023,13.587,60.361  c9.051,18.337,20.819,31.922,35.315,40.749c14.486,8.826,29.402,13.243,44.758,13.243c13.968,0,27.897-3.86,41.777-11.592  c13.88-7.72,26.43-17.955,37.642-30.688c1.036,10.357,2.679,17.659,4.917,21.901c3.451,6.625,8.836,11.719,16.167,15.284  c7.331,3.565,16.949,5.35,28.855,5.35c37.25,0,71.57-17.15,102.965-51.448c35.189-38.199,52.773-81.915,52.773-131.16  c0-34.461-8.366-66.383-25.091-95.755c-19.667-34.131-46.527-59.805-80.592-77.041C337.575,8.618,299.161,0,256.387,0  c-55.197,0-102.154,12.223-140.871,36.668C76.79,61.12,46.909,96.352,25.873,142.363C8.621,179.889,0,219.363,0,260.79  c0,37.178,7.243,71.818,21.728,103.903c11.554,25.298,28.718,47.668,51.484,67.113c22.774,19.439,50.319,33.997,82.663,43.676  C188.21,485.161,223.526,490,261.822,490c41.562,0,77.092-5.396,106.582-16.176c29.5-10.785,54.934-25.425,76.32-43.93  c21.387-18.506,36.478-36.675,45.276-54.502h-46.821C427.999,396.784,405.147,414.953,374.621,429.894z M286.913,266.771  c-6.207,17.237-14.193,31.453-23.928,42.662c-9.745,11.203-19.97,19.653-30.663,25.338c-10.693,5.692-20.869,8.531-30.526,8.531  c-14.485,0-27.339-6.45-38.55-19.351c-11.212-12.901-16.813-30.983-16.813-54.247c0-14.605,2.756-30.648,8.279-48.139  c5.513-17.484,12.844-32.345,21.993-44.567c9.139-12.224,18.582-21.097,28.327-26.614c9.745-5.517,20.136-8.276,31.171-8.276  c16.734,0,30.917,6.369,42.559,19.102c11.641,12.733,17.467,30.646,17.467,53.737C296.228,232.264,293.121,249.54,286.913,266.771z" fill="#FFFFFF"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/resources/icons/attribute.light.svg b/resources/icons/attribute.light.svg
new file mode 100644
index 0000000..2c5fc76
--- /dev/null
+++ b/resources/icons/attribute.light.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
+<path d="M374.621,429.894c-30.535,14.94-68.393,22.412-113.58,22.412c-42.256,0-80.758-7.175-115.517-21.519
+	c-34.759-14.35-61.315-36.548-79.682-66.598c-18.367-30.056-27.555-65.878-27.555-107.479c0-39.729,9.188-76.947,27.555-111.675
+	c18.367-34.716,44.239-61.375,77.61-79.967c33.38-18.592,70.24-27.889,110.609-27.889c35.355,0,67.65,7.39,96.885,22.157
+	c29.236,14.773,51.219,34.472,65.969,59.086c14.75,24.619,22.12,51.105,22.12,79.464c0,24.277-5.737,47.837-17.203,70.671
+	c-11.475,22.835-27.036,41.045-46.694,54.629c-14.838,10.357-26.821,15.532-35.97,15.532c-5.005,0-9.267-1.651-12.805-4.966
+	c-3.538-3.309-5.297-7.256-5.297-11.84c0-2.544,2.581-15.7,7.761-39.474l37.25-170.889h-46.311l-8.797,39.474
+	c-9.824-15.787-21.553-27.546-35.179-35.272c-13.626-7.725-27.945-11.591-42.949-11.591c-19.657,0-39.93,6.792-60.798,20.377
+	c-20.869,13.584-38.336,33.916-52.392,60.993c-14.055,27.083-21.084,54.119-21.084,81.115c0,21.901,4.526,42.023,13.587,60.361
+	c9.051,18.337,20.819,31.922,35.315,40.749c14.486,8.826,29.402,13.243,44.758,13.243c13.968,0,27.897-3.86,41.777-11.592
+	c13.88-7.72,26.43-17.955,37.642-30.688c1.036,10.357,2.679,17.659,4.917,21.901c3.451,6.625,8.836,11.719,16.167,15.284
+	c7.331,3.565,16.949,5.35,28.855,5.35c37.25,0,71.57-17.15,102.965-51.448c35.189-38.199,52.773-81.915,52.773-131.16
+	c0-34.461-8.366-66.383-25.091-95.755c-19.667-34.131-46.527-59.805-80.592-77.041C337.575,8.618,299.161,0,256.387,0
+	c-55.197,0-102.154,12.223-140.871,36.668C76.79,61.12,46.909,96.352,25.873,142.363C8.621,179.889,0,219.363,0,260.79
+	c0,37.178,7.243,71.818,21.728,103.903c11.554,25.298,28.718,47.668,51.484,67.113c22.774,19.439,50.319,33.997,82.663,43.676
+	C188.21,485.161,223.526,490,261.822,490c41.562,0,77.092-5.396,106.582-16.176c29.5-10.785,54.934-25.425,76.32-43.93
+	c21.387-18.506,36.478-36.675,45.276-54.502h-46.821C427.999,396.784,405.147,414.953,374.621,429.894z M286.913,266.771
+	c-6.207,17.237-14.193,31.453-23.928,42.662c-9.745,11.203-19.97,19.653-30.663,25.338c-10.693,5.692-20.869,8.531-30.526,8.531
+	c-14.485,0-27.339-6.45-38.55-19.351c-11.212-12.901-16.813-30.983-16.813-54.247c0-14.605,2.756-30.648,8.279-48.139
+	c5.513-17.484,12.844-32.345,21.993-44.567c9.139-12.224,18.582-21.097,28.327-26.614c9.745-5.517,20.136-8.276,31.171-8.276
+	c16.734,0,30.917,6.369,42.559,19.102c11.641,12.733,17.467,30.646,17.467,53.737C296.228,232.264,293.121,249.54,286.913,266.771z"
+	/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/resources/icons/element.dark.svg b/resources/icons/element.dark.svg
new file mode 100644
index 0000000..45eced5
--- /dev/null
+++ b/resources/icons/element.dark.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 522.468 522.469" style="enable-background:new 0 0 522.468 522.469;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M325.762,70.513l-17.706-4.854c-2.279-0.76-4.524-0.521-6.707,0.715c-2.19,1.237-3.669,3.094-4.429,5.568L190.426,440.53    c-0.76,2.475-0.522,4.809,0.715,6.995c1.237,2.19,3.09,3.665,5.568,4.425l17.701,4.856c2.284,0.766,4.521,0.526,6.71-0.712    c2.19-1.243,3.666-3.094,4.425-5.564L332.042,81.936c0.759-2.474,0.523-4.808-0.716-6.999    C330.088,72.747,328.237,71.272,325.762,70.513z" fill="#FFFFFF"/>
+		<path d="M166.167,142.465c0-2.474-0.953-4.665-2.856-6.567l-14.277-14.276c-1.903-1.903-4.093-2.857-6.567-2.857    s-4.665,0.955-6.567,2.857L2.856,254.666C0.95,256.569,0,258.759,0,261.233c0,2.474,0.953,4.664,2.856,6.566l133.043,133.044    c1.902,1.906,4.089,2.854,6.567,2.854s4.665-0.951,6.567-2.854l14.277-14.268c1.903-1.902,2.856-4.093,2.856-6.57    c0-2.471-0.953-4.661-2.856-6.563L51.107,261.233l112.204-112.201C165.217,147.13,166.167,144.939,166.167,142.465z" fill="#FFFFFF"/>
+		<path d="M519.614,254.663L386.567,121.619c-1.902-1.902-4.093-2.857-6.563-2.857c-2.478,0-4.661,0.955-6.57,2.857l-14.271,14.275    c-1.902,1.903-2.851,4.09-2.851,6.567s0.948,4.665,2.851,6.567l112.206,112.204L359.163,373.442    c-1.902,1.902-2.851,4.093-2.851,6.563c0,2.478,0.948,4.668,2.851,6.57l14.271,14.268c1.909,1.906,4.093,2.854,6.57,2.854    c2.471,0,4.661-0.951,6.563-2.854L519.614,267.8c1.903-1.902,2.854-4.096,2.854-6.57    C522.468,258.755,521.517,256.565,519.614,254.663z" fill="#FFFFFF"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/resources/icons/element.light.svg b/resources/icons/element.light.svg
new file mode 100644
index 0000000..8e6cfd1
--- /dev/null
+++ b/resources/icons/element.light.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="522.468px" height="522.469px" viewBox="0 0 522.468 522.469" style="enable-background:new 0 0 522.468 522.469;"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M325.762,70.513l-17.706-4.854c-2.279-0.76-4.524-0.521-6.707,0.715c-2.19,1.237-3.669,3.094-4.429,5.568L190.426,440.53
+			c-0.76,2.475-0.522,4.809,0.715,6.995c1.237,2.19,3.09,3.665,5.568,4.425l17.701,4.856c2.284,0.766,4.521,0.526,6.71-0.712
+			c2.19-1.243,3.666-3.094,4.425-5.564L332.042,81.936c0.759-2.474,0.523-4.808-0.716-6.999
+			C330.088,72.747,328.237,71.272,325.762,70.513z"/>
+		<path d="M166.167,142.465c0-2.474-0.953-4.665-2.856-6.567l-14.277-14.276c-1.903-1.903-4.093-2.857-6.567-2.857
+			s-4.665,0.955-6.567,2.857L2.856,254.666C0.95,256.569,0,258.759,0,261.233c0,2.474,0.953,4.664,2.856,6.566l133.043,133.044
+			c1.902,1.906,4.089,2.854,6.567,2.854s4.665-0.951,6.567-2.854l14.277-14.268c1.903-1.902,2.856-4.093,2.856-6.57
+			c0-2.471-0.953-4.661-2.856-6.563L51.107,261.233l112.204-112.201C165.217,147.13,166.167,144.939,166.167,142.465z"/>
+		<path d="M519.614,254.663L386.567,121.619c-1.902-1.902-4.093-2.857-6.563-2.857c-2.478,0-4.661,0.955-6.57,2.857l-14.271,14.275
+			c-1.902,1.903-2.851,4.09-2.851,6.567s0.948,4.665,2.851,6.567l112.206,112.204L359.163,373.442
+			c-1.902,1.902-2.851,4.093-2.851,6.563c0,2.478,0.948,4.668,2.851,6.57l14.271,14.268c1.909,1.906,4.093,2.854,6.57,2.854
+			c2.471,0,4.661-0.951,6.563-2.854L519.614,267.8c1.903-1.902,2.854-4.096,2.854-6.57
+			C522.468,258.755,521.517,256.565,519.614,254.663z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/Commands.ts b/src/Commands.ts
index 7a5d6f9..6cb3ef8 100644
--- a/src/Commands.ts
+++ b/src/Commands.ts
@@ -7,7 +7,6 @@ import { RangeUtil } from './utils/RangeUtil';
 import { XmlFormatter } from './services/XmlFormatter';
 import { XPathFeatureProvider } from './providers/XPath';
 import { XQueryExecutionProvider } from './providers/Execution';
-import { XmlTreeDocumentContentProvider } from './providers/Content';
 import { XmlFormattingEditProvider } from './providers/Formatting';
 
 const CFG_SECTION: string = 'xmlTools';
@@ -32,26 +31,13 @@ export class TextEditorCommands {
     static executeXQuery(editor: vsc.TextEditor, edit: vsc.TextEditorEdit): void {
         XQueryExecutionProvider.executeXQueryAsync(editor);
     }
-    
-    static async viewXmlTree(editor: vsc.TextEditor, edit: vsc.TextEditorEdit): Promise<void> {
-        try {
-            await vsc.commands.executeCommand(
-                'vscode.previewHtml',
-                XmlTreeDocumentContentProvider.buildUri(editor.document.uri),
-                vsc.ViewColumn.Three);
-        }
-        
-        catch (error) {
-            vsc.window.showErrorMessage(`The XML Tree could not be created: ${error}`);
-        }
-    }
 
     static formatAsXml(editor: vsc.TextEditor, edit: vsc.TextEditorEdit): void {
         let edits: vsc.TextEdit[];
         let formattingEditProvider = new XmlFormattingEditProvider();
         let formattingOptions: vsc.FormattingOptions = {
-            insertSpaces: editor.options.insertSpaces,
-            tabSize: editor.options.tabSize
+            insertSpaces: (editor.options.insertSpaces as boolean),
+            tabSize: (editor.options.tabSize as number)
         };
         
         // if the user has selected text, only format what is selected
diff --git a/src/Extension.ts b/src/Extension.ts
index 727ccc7..8570b99 100644
--- a/src/Extension.ts
+++ b/src/Extension.ts
@@ -5,7 +5,7 @@ import { TextEditorCommands } from './Commands';
 import { XmlFormattingEditProvider } from './providers/Formatting';
 import { XQueryLintingFeatureProvider } from './providers/Linting';
 import { XQueryCompletionItemProvider } from './providers/Completion';
-import { XmlTreeDocumentContentProvider } from './providers/Content';
+import { XmlTreeViewDataProvider } from "./providers/XmlTreeView";
 
 export var GlobalState: vsc.Memento;
 export var WorkspaceState: vsc.Memento;
@@ -26,7 +26,6 @@ export function activate(ctx: vsc.ExtensionContext) {
         vsc.commands.registerTextEditorCommand('xmlTools.minifyXml', TextEditorCommands.minifyXml),
         vsc.commands.registerTextEditorCommand('xmlTools.evaluateXPath', TextEditorCommands.evaluateXPath),
         vsc.commands.registerTextEditorCommand('xmlTools.executeXQuery', TextEditorCommands.executeXQuery),
-        vsc.commands.registerTextEditorCommand('xmlTools.viewXmlTree', TextEditorCommands.viewXmlTree),
         vsc.commands.registerTextEditorCommand('xmlTools.formatAsXml', TextEditorCommands.formatAsXml)
     );
 	
@@ -38,16 +37,16 @@ export function activate(ctx: vsc.ExtensionContext) {
         vsc.languages.registerCompletionItemProvider(LANG_XQUERY, new XQueryCompletionItemProvider(), ':', '$')
     );
     
-    // register workspace feature providers
-    ctx.subscriptions.push(
-        vsc.workspace.registerTextDocumentContentProvider(XmlTreeDocumentContentProvider.SCHEME, new XmlTreeDocumentContentProvider())
-    );
-    
     // listen to editor events (for linting)
     ctx.subscriptions.push(
         vsc.window.onDidChangeActiveTextEditor(_handleChangeActiveTextEditor),
         vsc.window.onDidChangeTextEditorSelection(_handleChangeTextEditorSelection)
     );
+
+    // add views
+    ctx.subscriptions.push(
+        vsc.window.registerTreeDataProvider("xmlTreeView", new XmlTreeViewDataProvider(ctx))
+    );
 }
 
 export function deactivate() {
diff --git a/src/providers/Content.ts b/src/providers/Content.ts
deleted file mode 100644
index b6a094b..0000000
--- a/src/providers/Content.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-'use strict';
-
-import * as vsc from 'vscode';
-import { XmlTreeService } from '../services/XmlTreeService';
-
-export class XmlTreeDocumentContentProvider implements vsc.TextDocumentContentProvider {
-    
-    static get SCHEME(): string {
-        return "xmltree";
-    }
-    
-    static buildUri(sourceUri: vsc.Uri): vsc.Uri {
-        let uriStr: string = `xmltree://${encodeURIComponent(sourceUri.toString())}`;
-        
-        let uri: vsc.Uri = vsc.Uri.parse(uriStr);
-        
-        return uri;
-    }
-    
-    async provideTextDocumentContent(uri: vsc.Uri): Promise<string> {
-        let sourceUri: vsc.Uri = vsc.Uri.parse(decodeURIComponent(uri.toString().substr(10)));
-        let document: vsc.TextDocument = await vsc.workspace.openTextDocument(sourceUri);
-        
-        let html: string = XmlTreeService.getXmlTreeHtml(document.getText());
-        
-        return Promise.resolve(html);
-    }
-}
\ No newline at end of file
diff --git a/src/providers/XmlTreeView.ts b/src/providers/XmlTreeView.ts
new file mode 100644
index 0000000..ed084e1
--- /dev/null
+++ b/src/providers/XmlTreeView.ts
@@ -0,0 +1,128 @@
+import * as vsc from "vscode";
+import * as path from "path";
+
+let DOMParser = require("xmldom").DOMParser;
+
+export class XmlTreeViewDataProvider implements vsc.TreeDataProvider<Node> {
+    private _onDidChangeTreeData: vsc.EventEmitter<Node | null> = new vsc.EventEmitter<Node | null>();
+    private _xmlDocument: Document;
+
+    constructor(private _context: vsc.ExtensionContext) {
+        vsc.window.onDidChangeActiveTextEditor((editor) => {
+            this._refreshTree();
+        });
+
+        vsc.workspace.onDidChangeTextDocument((e) => {
+            this._refreshTree();
+        });
+    }
+
+    readonly onDidChangeTreeData: vsc.Event<Node | null> = this._onDidChangeTreeData.event;
+
+    get activeEditor(): vsc.TextEditor | null {
+        return vsc.window.activeTextEditor || null;
+    }
+
+    getChildren(element?: Node): Node[] {
+        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 [];
+        }
+    }
+
+    getTreeItem(element: Node): vsc.TreeItem {
+        let treeItem = new vsc.TreeItem(element.localName);
+
+        if (this._getChildAttributeArray(element).length > 0) {
+            treeItem.collapsibleState = vsc.TreeItemCollapsibleState.Collapsed;
+        }
+
+        if (this._getChildElementArray(element).length > 0) {
+            treeItem.collapsibleState = vsc.TreeItemCollapsibleState.Collapsed;
+        }
+
+        treeItem.command = {
+            command: "revealLine",
+            title: "",
+            arguments: [{
+                lineNumber: (element as any).lineNumber - 1,
+                at: "top"
+            }]
+        };
+
+        treeItem.iconPath = this._getIcon(element);
+
+        return treeItem;
+    }
+
+    private _getChildAttributeArray(node: Node): Node[] {
+        if (!node.attributes) {
+            return [];
+        }
+
+        let array = new Array<Node>();
+
+        for (let i = 0; i < node.attributes.length; i++) {
+            array.push(node.attributes[i]);
+        }
+
+        return array;
+    }
+
+    private _getChildElementArray(node: Node): Node[] {
+        if (!node.childNodes) {
+            return [];
+        }
+
+        let array = new Array<Node>();
+
+        for (let i = 0; i < node.childNodes.length; i++) {
+            let child = node.childNodes[i];
+
+            if ((child as any).tagName) {
+                array.push(child);
+            }
+        }
+
+        return array;
+    }
+
+    private _getIcon(element: Node): any {
+        let type = "element";
+        
+        if (!(element as any).tagName) {
+            type = "attribute";
+        }
+
+        let 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") {
+            this._xmlDocument = null;
+            this._onDidChangeTreeData.fire();
+            return;
+        }
+
+        let xml = this.activeEditor.document.getText();
+        this._xmlDocument = new DOMParser().parseFromString(xml, "text/xml");
+
+        this._onDidChangeTreeData.fire();
+    }
+}
\ No newline at end of file
diff --git a/src/services/XmlTreeService.ts b/src/services/XmlTreeService.ts
deleted file mode 100644
index f18c97b..0000000
--- a/src/services/XmlTreeService.ts
+++ /dev/null
@@ -1,222 +0,0 @@
-'use strict';
-
-let DOMParser = require('xmldom').DOMParser;
-let fs = require('fs');
-
-export class XmlTreeService {
-    static getXmlTreeHtml(xml: string): string {
-        let xdoc: Document = new DOMParser().parseFromString(xml, 'text/xml');
-        let fontColor: string = XmlTreeService._getRecommendedTextColor();
-        let html: string =
-        `
-        <!DOCTYPE html>
-        <html>
-        <head>
-            <title>XML Tree View</title>
-            <style>
-                *, html {
-                    font-family: Verdana, Arial, Helvetica, sans-serif;
-                }
-
-                body, form, ul, li, p, h1, h2, h3, h4, h5 {
-                    margin: 0;
-                    padding: 0;
-                }
-
-                body {
-                    color: ${fontColor};
-                    margin: 0;
-                }
-
-                img {
-                    border: none;
-                }
-
-                p {
-                    font-size: 1em;
-                    margin: 0 0 1em 0;
-                }
-
-                html {
-                    font-size: 100%;
-                    /* IE hack */
-                }
-
-                body {
-                    font-size: 1em;
-                    /* Sets base font size to 16px */
-                }
-
-                table {
-                    font-size: 100%;
-                    /* IE hack */
-                }
-
-                input, select, textarea, th, td {
-                    font-size: 1em;
-                }
-
-
-                /* CSS Tree menu styles */
-
-                ol.tree {
-                    padding: 0 0 0 30px;
-                    width: 300px;
-                }
-
-                li {
-                    position: relative;
-                    margin-left: -15px;
-                    list-style: none;
-                }
-
-                li.xml {
-                    margin-left: -1px !important;
-                }
-
-                li.xml a {
-                    background: url(document.png) 0 0 no-repeat;
-                    color: ${fontColor};
-                    padding-left: 21px;
-                    text-decoration: none;
-                    display: block;
-                }
-
-                li.xml-attribute a {
-                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAj1JREFUOBGtU01oE0EUfm92V5s0K9G2UsXWJI1BlKoXT4J4URAvItKDYA9K0aQUpOhNb3oR/6AmS7wIHj15UfAg1oM3g5fm0EObVhSxVJJm05QmmXm+2brbxuBJH8zO936+b2bezAL8o+Hf+PseUcgI1Q8aCHsUyvkesOcK17D5Z32HwN48hbfL2n0uHAOCMiB8ZzzAw+Jxu5Sxp3gOrE3gcHYpsoqhtxwMoxBj89e7P/mViax7gRCesejj0rh9z4+3CSRyrqMATiuQx79kouWh7EpSonHCQCrMpe2ZmOOeQoJ3Ssrk4kS0pEWEr5TKV3sJ4Aoh3dLkeM6dUChmEWhSERTijntnIW1Pc/1nQ5jnfV4g0JDiHAA2Iz3268TTaooLnvCWM3zmo4x/ElHDIxF85GWPdAggqWEOFosj2CCBI4ybrbXICyCWAejjlZY8EtI6KQp7mD+mDwBFlEgtez7BMHd/8eskrqW6q71NQBOE8WOjFmOI8M3nBUcgVFVE3OElECo898eeU1dD4kUdI0mtwVxlJ0NuMrzSMW3BLcSztVFAyqPR7FfSOsaJ95wvM9UlwBr7NvsWH2iam3lJk7UFO7BM9YZ9VMq6sZCxP0iQSQQ1um7Yh1rb1EnO3QSBZ7eStUCwA+0kHDdNBFMI+CBE9bvF8d01HR/K1gfMrtXK7NU+V/tbrU1AJ+JO7TJ3/iHDXTx04/QTjvLWz/x+B+xuWoeAl3pJxuDyyn6B5gEDSP9AM/wSN65xk/t/0C/vHM3QxJasvQAAAABJRU5ErkJggg==) 0 0 no-repeat;
-                }
-
-                li.xml-text a {
-                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAElJREFUOBFjYBhowIjsgDnqG1YB+aHIYphsxrCUm/6rYeJMMAa5NIoLkA2Zo74R6JL/IBcxpNwMwKmOYheMGsDAMBoGyElvoNgA5p8KF92MLqAAAAAASUVORK5CYII=) 0 0 no-repeat;
-                }
-
-                li input {
-                    position: absolute;
-                    left: 0;
-                    margin-left: 0;
-                    opacity: 0;
-                    z-index: 2;
-                    cursor: pointer;
-                    height: 1em;
-                    width: 1em;
-                    top: 0;
-                }
-
-                li input + ol {
-                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAURJREFUeNpi/P//PwMlgImBQkCxASwwRlLLKwYmJqZgRkbGbiBXEYva+0Dvlv7792/tvBoxTAO+fv0MororE6UU9VU5MHRfvP1DsX3+M5DhaxkYxDC98ObNGxBW1FVmY/j16xcYu6SdYvjw4QPDixcvGGSEvoLlQeqweuHdu7dg+vfv32D85ctXsNijR4/B4hwcnHA1WA348uUbmP779y+DUchOuIKQsltgetsUE7garAb8/w9h/vz5h+H0Sk8w2yRsN8OZVa5g9ocPn+BqsBrAzs4PdQEzw48ff+Fi375B2Gxs3HA1WNPB45NlDNzcIvfPXv8LVMwJxmdWOcDZF2//A8uD1GF1wefXZ8Q+Pt42oWN+VBED41d5DKv+/30IlJ8IVCcF5D2DCTPC8gIwAXEDKT4Qk0Di+wzU8xnDgKGbmQACDAAtTZadqmiADQAAAABJRU5ErkJggg==) 40px 0 no-repeat;
-                    margin: -0.938em 0 0 -44px;
-                    /* 15px */
-                    height: 1em;
-                }
-
-                li input + ol > li {
-                    display: none;
-                    margin-left: -14px !important;
-                    padding-left: 1px;
-                }
-
-                li label {
-                    color: ${fontColor};
-                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAYJJREFUOBFjYBjygJGQD1SmfNb+w8Sw8g8js/uTTK6n6OqZ0AXs/HfKIov9ZWKIANoi+OQl53Mb7y2CDqH7eZDlUQywD9qSxcj056ZT6GZpJEXhQANWMTQw/mNiY1j9/8+3dcZpZ1hh8nADHAO2BjP8Z5zMwPi/ZN9qX7BT5ad/NQQqVP3H8G8lSMP/f0x5QMqY9/WL+UAe2PtgAxwDt9n/Y2RYChRsPLjOZxpIMQgwM/yPYGBgfPAgi/8EiH94o9c1BoZ/Pv8ZGAMdArZ2g8TgLgBx0MH//wxhjIxA5+MBYAP2r/c6yPSfIRpoWz0oHEDqFaZ9tAC6SOEvA+MKmH5b/21aQDu3MDL8X39gg3cpSBzugv0bvNcC/Z8L9FoPKBCZGJjCgfK3H2Zyn4cZwMj0bxKQffazqEQi0LL/IHG4ASAOyP///7Go79P2eQ6UDQMKgQMPJAcC/34xhDKycAWdnWXyGyICNAbGQKZlpn+TZvn/dyfLP4bwOzm8V5HlhiEbAAAVeUhVveSUAAAAAElFTkSuQmCC) 15px 1px no-repeat;
-                    cursor: pointer;
-                    display: block;
-                    padding-left: 37px;
-                }
-
-                li input:checked + ol {
-                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASxJREFUeNpi/P//PwMlgImBQkCxASwwRlLLKwYmJqZgRkbGbiBXEYva+0Dvlv7792/tvBoxTAO+fv0MororE6UU9VU5MHRfvP1DsX3+M5DhaxkYsBjw5s0bEKWoq6zA8OvXL7AYKIC/f//O8OPHDwYZIVaQGqjLlDENePfuLZj+/fs3GH/58pXh/fv3YDYIcHBwwtVgDYMvX76B6b9//zIYhezEULhtiglcDVYD/v+HMH/+/MNweqUnhsIPHz7B1WA1gJ2dH+oCZqCf/2IoZGPjhqvBmg4enyxj4OYWuX/2+l+gYk4MfPH2P7A8SB1WF3x+fUbs4+NtEzrmRxUxMH6Vx7Dq/9+HQPmJQHVSQN4zmDAjLC8AExA3kOIDMQkkvs9APZ8xDBi6mQkgwADDMYZH9Ls66AAAAABJRU5ErkJggg==) 40px 5px no-repeat;
-                    margin: -1.25em 0 0 -44px;
-                    /* 20px */
-                    padding: 1.563em 0 0 80px;
-                    height: auto;
-                }
-
-                li input:checked + ol > li {
-                    display: block;
-                    margin: 0 0 0.125em;
-                    /* 2px */
-                }
-
-                li input:checked + ol > li:last-child {
-                    margin: 0 0 0.063em;
-                    /* 1px */
-                }
-            </style>
-            <script>function noop(){};</script>
-        </head>
-        <body>
-        `;
-        
-        html += `<ol class="tree">`;
-        html += XmlTreeService._processXmlNode(xdoc.lastChild);
-        html += `</ol>`;
-        
-        html +=
-        `
-        </body>
-        </html>
-        `;
-        
-        return html;
-    }
-    
-    private static _processXmlNode(node: Node): string {
-        let html: string = '';
-        
-        if (node.childNodes) {
-            html += `<li><label for="ID">${node.localName}</label><input type="checkbox" id="ID" /><ol>`;
-        }
-
-        if (node.attributes) {
-            for (let i = 0; i < node.attributes.length; i++) {
-                html += `<li class="xml xml-attribute"><a href="javascript:noop()">${node.attributes.item(i).localName} = '${node.attributes.item(i).value}'</a></li>`;
-            }
-        }
-        
-        if (!node.childNodes && node.textContent) {
-            html += `<li class="xml xml-text"><a href="javascript:noop()">${node.textContent}</a></li>`;
-        }
-        
-        if (node.childNodes) {
-            for (let i = 0; i < node.childNodes.length; i++) {
-                html += XmlTreeService._processXmlNode(node.childNodes.item(i));
-            }
-            
-            html += `</ol></li>`;
-        }
-        
-        return html;
-    }
-    
-    private static _getRecommendedTextColor(): string {
-        let color = '#AAAAAA';
-        let path = '';
-        
-        switch (process.platform) {
-            case 'darwin':
-                path = `${process.env.HOME}/Library/Application Support/Code/storage.json`;
-                break;
-                
-            case 'win32':
-                path = `${process.env.APPDATA}\\Code\\storage.json`;
-                break;
-                
-            default:
-                path = `${process.env.HOME}/.config/Code/storage.json`
-                break;
-        }
-        
-        try {
-            fs.accessSync(path);
-            
-            let json = fs.readFileSync(path, 'utf8');
-            let storage = JSON.parse(json);
-            
-            color = (storage.theme.indexOf('vs-dark') > -1) ? '#FFFFFF' : '#000000';
-        }
-        
-        catch (error) { }
-        
-        return color;
-    }
-}
\ No newline at end of file