Merge pull request #350 from MicrosoftDX/dev

Merge from dev for 0.2.2
MicrosoftDX · May 10, 2016 · 02f1632 · 02f1632
2 parents 0996691 + 5ecf607
commit 02f1632
Show file tree

Hide file tree

Showing 116 changed files with 6,612 additions and 586 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,13 @@
+DeploymentTools/
+desktop/
+.vscode/
+Tests/
+node_modules/
+Contributing.md
+Readme.md
+azuredeploy.json
+azuredeploy-parameters.json
+deploy.cmd
+build-docker-image.sh
+VorlonNodeWrapper/
+client samples/
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,7 @@ sync.bat
 /.vs/
 bin/
 **/control.css
+!Plugins/Vorlon/plugins/office/control.css
 sync.bat
 .settings/launch.json
 *.dat

diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -9,13 +9,13 @@
 			// Type of configuration. Possible values: "node", "mono".
 			"type": "node",
 			// Workspace relative or absolute path to the program.
-			"program": "Server/server.js",
+			"program": "${workspaceRoot}/Server/server.js",
 			// Automatically stop program after launch.
 			"stopOnEntry": false,
 			// Command line arguments passed to the program.
 			"args": [],
 			// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
-			"cwd": ".",
+			"cwd": "${workspaceRoot}",
 			// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
 			"runtimeExecutable": null,
 			// Optional arguments passed to the runtime executable.
@@ -42,25 +42,25 @@
 			// not working since latest vs code and electron versions :-(
 			"name": "Launch desktop App",
 			"type": "node",
-			"program": "desktop/app/background.js",
+			"program": "${workspaceRoot}/desktop/app/background.js",
 			"stopOnEntry": false,
 			"args": [
 				"--dev"
 			],
-			"cwd": ".",
-			"runtimeExecutable": "desktop/node_modules/electron-prebuilt/dist/electron.exe",
+			"cwd": "${workspaceRoot}",
+			"runtimeExecutable": "${workspaceRoot}/desktop/node_modules/electron-prebuilt/dist/electron.exe",
 			"env": {}
 		},
         {
 			// not working since latest vs code and electron versions :-(
 			"name": "Launch node.js sample",
 			"type": "node",
-			"program": "client samples/nodejs/app.js",
+			"program": "${workspaceRoot}/client samples/nodejs/app.js",
 			"stopOnEntry": false,
 			"args": [
 				"--nolazy"
 			],
-			"cwd": ".",
+			"cwd": "${workspaceRoot}",
 			"runtimeExecutable": null,
 			"env": {}
 		},
@@ -70,13 +70,13 @@
 			// Type of configuration. Possible values: "node", "mono".
 			"type": "node",
 			// Workspace relative or absolute path to the program.
-			"program": "Server/server.ts",
+			"program": "${workspaceRoot}/Server/server.ts",
 			// Automatically stop program after launch.
 			"stopOnEntry": false,
 			// Command line arguments passed to the program.
 			"args": [],
 			// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
-			"cwd": ".",
+			"cwd": "${workspaceRoot}",
 			// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
 			"runtimeExecutable": null,
 			// Optional arguments passed to the runtime executable.

diff --git a/DeploymentTools/Dockerfile b/DeploymentTools/Dockerfile
diff --git a/DeploymentTools/build-docker-image.cmd b/DeploymentTools/build-docker-image.cmd
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,32 @@
+# use the node argon (4.4.3) image as base
+FROM node:argon
+
+# Set the Vorlon.JS Docker Image maintainer
+MAINTAINER Julien Corioland (Microsoft, DX)
+
+# Expose port 1337
+EXPOSE 1337
+
+# Set the entry point
+ENTRYPOINT ["npm", "start"]
+
+# Create the application directory
+RUN mkdir -p /usr/src/vorlonjs
+
+# Copy the application content
+COPY . /usr/src/vorlonjs/
+
+# Set app root as working directory
+WORKDIR /usr/src/vorlonjs
+
+# Upgrade to last NPM version
+RUN npm upgrade -g npm
+
+# Install gulp
+RUN npm install -g gulp
+
+# Run npm install
+RUN npm install
+
+# Run gulp
+RUN gulp
diff --git a/Plugins/Vorlon/.gitignore b/Plugins/Vorlon/.gitignore
@@ -1,4 +1,3 @@
-*.js
 *.js.map
 *.min.js
 !verge.min.js

diff --git a/Plugins/Vorlon/plugins/device/control.html b/Plugins/Vorlon/plugins/device/control.html
@@ -1,9 +1,9 @@
 <div id="device-information">
 	<h1>Device Information</h1>
-	<table>
+	<table id="viewport">
 		<!-- Viewport -->
 	    <tr class="viewport-header">
-	        <th colspan="2">Viewport</th>
+	        <th class="header" scope="col" colspan="2">Viewport</th>
 	    </tr>
 	    <tr>
 	    	<td>Aspect Ratio</td>
@@ -21,10 +21,11 @@ <h1>Device Information</h1>
 	    	<td>Meta Viewport Tag</td>
 	    	<td class="meta-viewport-tag"></td>
 	    </tr>
-
+	</table>
+	<table id="screensize">
 	    <!-- Screen Size -->
 	    <tr class="screen-size-header">
-	        <th colspan="2">Screen Size</th>
+	        <th class="header" scope="col" colspan="2">Screen Size</th>
 	    </tr>
 	    <tr>
 	    	<td>Screen Width</td>
@@ -42,10 +43,11 @@ <h1>Device Information</h1>
 	    	<td>Body Client Width</td>
 	    	<td class="body-client-width"></td>
 	    </tr>
-
+	</table>
+	<table id="resolution">
 	    <!-- Resolution -->
 	    <tr class="resolution-header">
-	        <th colspan="2">Resolution</th>
+	        <th class="header" scope="col" colspan="2">Resolution</th>
 	    </tr>
 	    <tr>
 	    	<td>Dots Per Inch (DPI)</td>
@@ -59,10 +61,11 @@ <h1>Device Information</h1>
 	    	<td>Dots Per Centimeter (DPCM)</td>
 	    	<td class="dpcm"></td>
 	    </tr>
-
+	</table>
+	<table id="misc">
 	    <!-- Miscellaneous -->
 	    <tr class="misc-header">
-	        <th colspan="2">Miscellaneous</th>
+	        <th class="header" scope="col" colspan="2">Miscellaneous</th>
 	    </tr>
 	    <tr>
 	    	<td>Root Font Size</td>

diff --git a/Plugins/Vorlon/plugins/device/control.less b/Plugins/Vorlon/plugins/device/control.less
@@ -10,18 +10,19 @@
 		    text-align: left;
 		}
 
-		th {
-		    background: #f7f7f7;
-		    border-bottom: 1px solid #ddd;
-		    font-weight: 400;
-		}
-
 		td {
 		    border-bottom: 1px solid #eee;
 
 		    &:first-child {
 				width: 30%;
 		    }
 		}
+
+		.header {
+			background: #f7f7f7;
+			border-bottom: 1px solid #ddd;
+			font-weight: 400;
+		}
 	}
-}
+}
+
diff --git a/Plugins/Vorlon/plugins/device/vorlon.device.dashboard.ts b/Plugins/Vorlon/plugins/device/vorlon.device.dashboard.ts
@@ -19,26 +19,32 @@
         // Start dashboard code
         // uses _insertHtmlContentAsync to insert the control.html content
         // into the dashboard
-        private _table: HTMLTableElement;
+        private _resolutionTable: HTMLTableElement;
+        private _miscTable: HTMLTableElement;
+        private _viewportTable: HTMLTableElement;
+        private _screensizeTable: HTMLTableElement;
 
         public startDashboardSide(div: HTMLDivElement = null): void {
             this._insertHtmlContentAsync(div, (filledDiv) => {
-                this._table = <HTMLTableElement>filledDiv.querySelector('table');
+                this._resolutionTable = <HTMLTableElement>filledDiv.querySelector('#resolution');
+                this._miscTable = <HTMLTableElement>filledDiv.querySelector('#misc');
+                this._viewportTable = <HTMLTableElement>filledDiv.querySelector('#viewport');
+                this._screensizeTable = <HTMLTableElement>filledDiv.querySelector('#screensize');
             })
         }
 
         // called to update the HTML with a complete set of data
         public update(data: any): void {
             // resolution
             var resolution = data.resolution;
-            this.setTableValue('dpi', this.round2decimals(resolution.dpi).toString());
-            this.setTableValue('dppx', this.round2decimals(resolution.dppx).toString());
-            this.setTableValue('dpcm', this.round2decimals(resolution.dpcm).toString());
+            this.setTableValue(this._resolutionTable, 'dpi', this.round2decimals(resolution.dpi).toString());
+            this.setTableValue(this._resolutionTable,'dppx', this.round2decimals(resolution.dppx).toString());
+            this.setTableValue(this._resolutionTable,'dpcm', this.round2decimals(resolution.dpcm).toString());
 
             // miscellaneous
-            this.setTableValue('root-font-size', data.rootFontSize + 'px');
-            this.setTableValue('pixel-ratio', this.round2decimals(data.pixelRatio).toString());
-            this.setTableValue('user-agent', data.userAgent);
+            this.setTableValue(this._miscTable, 'root-font-size', data.rootFontSize + 'px');
+            this.setTableValue(this._miscTable,'pixel-ratio', this.round2decimals(data.pixelRatio).toString());
+            this.setTableValue(this._miscTable,'user-agent', data.userAgent);
 
 
             this.updateResize(data);
@@ -48,22 +54,24 @@
         public updateResize(data: any): void {
             // viewport
             var viewport = data.viewport;
-            this.setTableValue('aspect-ratio', this.round2decimals(viewport.aspectRatio).toString());
-            this.setTableValue('width', viewport.width + 'px');
-            this.setTableValue('width-em', viewport.widthEm + 'em');
-            this.setTableValue('meta-viewport-tag', data.metaViewport);
+            this.setTableValue(this._viewportTable, 'aspect-ratio', this.round2decimals(viewport.aspectRatio).toString());
+            this.setTableValue(this._viewportTable, 'width', viewport.width + 'px');
+            this.setTableValue(this._viewportTable, 'width-em', viewport.widthEm + 'em');
+            if(data.metaViewport){
+                this.setTableValue(this._viewportTable, 'meta-viewport-tag', data.metaViewport);
+            }
 
             // screen width
             var screenWidths = data.screenWidths
-            this.setTableValue('screen-width', screenWidths.screenWidth + 'px');
-            this.setTableValue('screen-available-width', screenWidths.screenAvailWidth + 'px');
-            this.setTableValue('window-inner-width', screenWidths.windowInnerWidth + 'px');
-            this.setTableValue('body-client-width', screenWidths.bodyClientWidth + 'px');
+            this.setTableValue(this._screensizeTable, 'screen-width', screenWidths.screenWidth + 'px');
+            this.setTableValue(this._screensizeTable, 'screen-available-width', screenWidths.screenAvailWidth + 'px');
+            this.setTableValue(this._screensizeTable, 'window-inner-width', screenWidths.windowInnerWidth + 'px');
+            this.setTableValue(this._screensizeTable, 'body-client-width', screenWidths.bodyClientWidth + 'px');
         }
 
-        public setTableValue(cssClass: string, value: string): void {
-            if (this._table)
-                this._table.querySelector('.' + cssClass).textContent = value;
+        public setTableValue(table: HTMLTableElement, cssClass: string, value: string): void {
+            if (table)
+                table.querySelector('.' + cssClass).textContent = value;
         }
 
         private round2decimals(value: any):number{

diff --git a/Plugins/Vorlon/plugins/domExplorer/control.html b/Plugins/Vorlon/plugins/domExplorer/control.html
@@ -5,14 +5,14 @@
     <link href="control.css" rel="stylesheet" />
 </head>
 <body>
-    <div id="DOMExplorerContainer" class="dom-explorer-container">
+    <div class="split" data-orientation="vertical" data-limit="50" data-position="70%">
 
         <div class="tree-view-wrapper panel-left">
             <x-controlbar>
                 <x-action event="refresh" tabindex="0"><i class="fa fa-circle"></i> Refresh</x-action>
                 <x-action event="inspectFromClient" tabindex="0"><i class="fa fa-crosshairs"></i></x-action>
 
-                <input type="text" placeholder="search node by css selector" id="searchinput" />
+                <input type="text" aria-label="Here, search for a node by CSS selector" placeholder="search node by css selector" id="searchinput" />
                 <div id="searchresults"></div>
             </x-controlbar>
             <div id="treeView" class="code-text"></div>

diff --git a/Plugins/Vorlon/plugins/domExplorer/control.less b/Plugins/Vorlon/plugins/domExplorer/control.less
@@ -1,10 +1,10 @@
 @import "../vorlontheme.less";
 
 .plugin-dom {
-    @bracketColor: #BBB;
+    @bracketColor: #6d6d6d;
     @nodeNameColor: @lightpurple;
     @nodeTextColor: #111;
-    @attributeNameColor: #ed2424;
+    @attributeNameColor: #e11212;
     @attributeValueColor: #007ca7;
     @quotesColor: @lightpurple;
 
@@ -16,7 +16,7 @@
         background: none;
     }
 
-    .dom-explorer-container {
+    .split {
         height: 100%;
         overflow: hidden !important;
     }