Add screenshots

Author: tjdett

architecture.html

@@ -76,7 +76,7 @@ <h3 id="upload-helper">Upload Helper</h3>
 <h2 id="further-detail">Further Detail</h2>
 <p>See &quot;<a href="./running.html">installation guide</a>&quot; for further details on how the components fit together.</p>
 
-  <div class="timestamp">Last updated: 2017-03-23T06:56:58Z</div>
+  <div class="timestamp">Last updated: 2017-03-24T02:02:10Z</div>
   </article>
   <footer>
     <p>Want to know more?</p>

images/screenshots/instance_landing_page.png

@@ -68,6 +68,12 @@ <h3 id="workflow">Workflow</h3>
 <p>In this example, Alice saves a<sub>1</sub> and shares it with Bob. Bob then creates b<sub>1</sub> to continue working. Bob saves b<sub>1</sub> and continues work in b<sub>2</sub>, but doesn&#39;t like how things have turned out. He discards b<sub>2</sub> and begins work from b<sub>1</sub> again with b<sub>3</sub>.</p>
 <p>Both Alice and Bob finish their work, and export their environment so others can reproduce their analysis in future.</p>
 <hr>
+<h3 id="screenshots">Screenshots</h3>
+<p><img src="/images/screenshots/portal_instances.png" alt="Portal Instances"></p>
+<p><img src="/images/screenshots/instance_landing_page.png" alt="Instance Landing Page"></p>
+<p><img src="/images/screenshots/instance_rstudio.png" alt="Instance RStudio"></p>
+<p><img src="/images/screenshots/instance_terminal.png" alt="Instance Terminal"></p>
+<hr>
 <h3 id="architecture">Architecture</h3>
 <p>To improve scalability and security, DIT4C runs all containers on compute nodes separate from the portal.</p>
 <p>A portal can have multiple schedulers, each able to start containers on compute nodes. Through the use of routing servers, DIT4C is able to allow compute nodes and schedulers to exist on private networks with no open inbound ports, providing better security for compute and data.</p>
@@ -79,7 +85,7 @@ <h3 id="running">Running</h3>
 <h3 id="release-signing-key">Release Signing Key</h3>
 <p><a href="./release-signing-key.asc">Download release-signing-key.asc</a></p>
 
-  <div class="timestamp">Last updated: 2017-03-23T06:56:58Z</div>
+  <div class="timestamp">Last updated: 2017-03-24T02:02:10Z</div>
   </article>
   <footer>
     <p>Want to know more?</p>

images/screenshots/instance_rstudio.png

@@ -1,7 +1,7 @@
 {
   "name": "webcomponentsjs",
   "main": "webcomponents.js",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.7",
   "homepage": "http://webcomponents.org",
   "authors": [
     "The Polymer Authors"
@@ -16,7 +16,7 @@
   "license": "BSD",
   "ignore": [],
   "devDependencies": {
-    "web-component-tester": "^5",
+    "web-component-tester": "^v6.0.0-prerelease.7",
     "custom-elements": "webcomponents/custom-elements#^v1.0.0-rc.1",
     "es6-promise": "stefanpenner/es6-promise#^4.0.0",
     "html-imports": "webcomponents/html-imports#^v1.0.0-rc.2",
@@ -25,11 +25,11 @@
     "template": "webcomponents/template#^v1.0.0-rc.1",
     "webcomponents-platform": "webcomponents/webcomponents-platform#^v1.0.0-rc.1"
   },
-  "_release": "1.0.0-rc.6",
+  "_release": "1.0.0-rc.7",
   "_resolution": {
     "type": "version",
-    "tag": "v1.0.0-rc.6",
-    "commit": "3b3bd26f285fd337fce2457f2c8eb1eff339d7b5"
+    "tag": "v1.0.0-rc.7",
+    "commit": "9b0c8b24b11d709fc6f725afe38250e682b86c4d"
   },
   "_source": "https://github.com/Polymer/webcomponentsjs.git",
   "_target": "^v1.0.0-rc.5",

images/screenshots/instance_terminal.png

@@ -60,15 +60,24 @@ elements, etc.). Here's an example:
 </script>
 ```
 
-## `webcomponents-es5-loader.js`
+## `custom-elements-es5-adapter.js`
 According to the spec, Custom Elements must be ES6 classes (https://html.spec.whatwg.org/multipage/scripting.html#custom-element-conformance). Since most projects need to support a wide range of browsers that don't necessary support ES6, it may make sense to compile your project to ES5. However, ES5-style custom element classes will **not** work with native Custom Elements because ES5-style classes cannot properly extend ES6 classes, like `HTMLElement`.
 
-To work around this, `webcomponents-es5-loader.js` first loads an extra ES5 compatibility [shim](https://github.com/webcomponents/custom-elements/blob/master/src/native-shim.js) before
-loading the minimum polyfill bundle, like `webcomponents-loader.js` does. 
+To work around this, load `custom-elements-es5-adapter.js` before declaring new Custom Elements.
 
-The reason for having two different loaders (`webcomponents-loader.js` for ES6 deployed code and `webcomponents-es5-loader.js` for ES5) is that the polyfill can't know if you're deploying ES5 or ES6 code -- it runs before your code, and only _you_ as an author of the code know what you're going to deploy. This means that _you_ have to make the decision about which loader to use. 
-**TL; DR: ** Use `webcomponents-es5-loader.js` only if you want to deploy ES5 code to _all_ browsers (both with and without native custom elements support) -- if this isn't a requirement, then use
-`webcomponents-loader.js` instead.
+**The adapter must NOT be compiled.**
+
+```html
+<!-- Load Custom Elements es5 adapter --> 
+<script src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+<!-- Load polyfills; note that "loader" will load these async -->
+<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+<!-- Load the es5 compiled custom element definition -->
+<link rel="import" href="my-es5-element.html">
+
+<!-- Use the custom element -->
+<my-es5-element></my-es5-element>
+```
 
 ## Browser Support
 

images/screenshots/portal_instances.png

@@ -1,7 +1,7 @@
 {
   "name": "webcomponentsjs",
   "main": "webcomponents.js",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.7",
   "homepage": "http://webcomponents.org",
   "authors": [
     "The Polymer Authors"
@@ -16,7 +16,7 @@
   "license": "BSD",
   "ignore": [],
   "devDependencies": {
-    "web-component-tester": "^5",
+    "web-component-tester": "^v6.0.0-prerelease.7",
     "custom-elements": "webcomponents/custom-elements#^v1.0.0-rc.1",
     "es6-promise": "stefanpenner/es6-promise#^4.0.0",
     "html-imports": "webcomponents/html-imports#^v1.0.0-rc.2",

index.html

@@ -3,8 +3,6 @@
 
 (()=>{'use strict';if(!window.customElements)return;const a=window.HTMLElement,b=window.customElements.define,c=window.customElements.get,d=new Map,e=new Map;let f=!1,g=!1;window.HTMLElement=function(){if(!f){const h=d.get(this.constructor),i=c.call(window.customElements,h);g=!0;const j=new i;return j}f=!1;},window.HTMLElement.prototype=a.prototype,window.customElements.define=(h,i)=>{const j=i.prototype,k=class extends a{constructor(){super(),Object.setPrototypeOf(this,j),g||(f=!0,i.call(this)),g=!1;}},l=k.prototype;k.observedAttributes=i.observedAttributes,l.connectedCallback=j.connectedCallback,l.disconnectedCallback=j.disconnectedCallback,l.attributeChangedCallback=j.attributeChangedCallback,l.adoptedCallback=j.adoptedCallback,d.set(i,h),e.set(h,i),b.call(window.customElements,h,k);},window.customElements.get=(h)=>e.get(h);})();
 
-(function(){'use strict';var a=document.createElement('style');a.textContent='body {transition: opacity ease-in 0.2s; } \\nbody[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; } \\n';var b=document.querySelector('head');b.insertBefore(a,b.firstChild);})();
-
 /**
 @license
 Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -13,6 +11,6 @@ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/requestAnimationFrame(()=>{window.dispatchEvent(new CustomEvent('WebComponentsReady'));});
+*/
 
 }());

libs/webcomponentsjs/.bower.json

@@ -11,13 +11,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 /*
  * Polyfills loaded: Custom Elements ES5 Shim
- * Used in: Chrome
  */
 
 import '../bower_components/custom-elements/src/native-shim.js'
-
-import '../src/unresolved.js'
-
-requestAnimationFrame(() => {
-  window.dispatchEvent(new CustomEvent('WebComponentsReady'));
-});

libs/webcomponentsjs/README.md

@@ -17,3 +17,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 import '../bower_components/shadydom/src/shadydom.js'
 import '../bower_components/custom-elements/src/custom-elements.js'
 import '../bower_components/shadycss/entrypoints/scoping-shim.js'
+
+requestAnimationFrame(() => {
+  window.dispatchEvent(new CustomEvent('WebComponentsReady'));
+});

libs/webcomponentsjs/bower.json

@@ -162,14 +162,10 @@ const babelOptions = {
   shouldPrintComment: singleLicenseComment()
 };
 
-gulp.task('debugify-ce-es5', () => {
-  return debugify('webcomponents-ce-es5', '', {plugins: [babel(babelOptions)]});
+gulp.task('debugify-ce-es5-adapter', () => {
+  return debugify('custom-elements-es5-adapter', '', {plugins: [babel(babelOptions)]});
 });
 
-gulp.task('debugify-hi-ce-es5', () => {
-  return debugify('webcomponents-hi-ce-es5', '', {plugins: [babel(babelOptions)]});
-})
-
 gulp.task('refresh-bower', () => {
   return del('bower_components').then(() => {
     let resolve, reject;
@@ -184,7 +180,7 @@ gulp.task('default', (cb) => {
 });
 
 gulp.task('clean-builds', () => {
-  return del(['webcomponents*.js{,.map}', '!webcomponents-{es5-,}loader.js']);
+  return del(['custom-elements-es5-adapter.js{,.map}', 'webcomponents*.js{,.map}', '!webcomponents-loader.js']);
 });
 
 gulp.task('debug', (cb) => {
@@ -194,8 +190,7 @@ gulp.task('debug', (cb) => {
     'debugify-hi-sd-ce',
     'debugify-hi-sd-ce-pf',
     'debugify-sd-ce',
-    'debugify-ce-es5',
-    'debugify-hi-ce-es5'
+    'debugify-ce-es5-adapter'
   ];
   runseq('clean-builds', tasks, cb);
 });
@@ -207,8 +202,7 @@ gulp.task('closure', (cb) => {
     'closurify-hi-sd-ce',
     'closurify-hi-sd-ce-pf',
     'closurify-sd-ce',
-    'debugify-ce-es5',
-    'debugify-hi-ce-es5'
+    'debugify-ce-es5-adapter'
   ];
   runseq('clean-builds', ...tasks, cb);
 });

libs/webcomponentsjs/webcomponents-ce-es5.js libs/webcomponentsjs/custom-elements-es5-adapter.js

@@ -1,6 +1,6 @@
 {
   "name": "webcomponents.js",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.7",
   "description": "webcomponents.js",
   "main": "webcomponents.js",
   "directories": {

libs/webcomponentsjs/entrypoints/webcomponents-ce-es5-index.js libs/webcomponentsjs/entrypoints/custom-elements-es5-adapter-index.js

@@ -12,8 +12,8 @@
   <head>
     <title></title>
     <meta charset="UTF-8">
-    <script src="../../web-component-tester/browser.js"></script>
     <script src="../webcomponents-loader.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
   </head>
   <body>
     <script>

libs/webcomponentsjs/entrypoints/webcomponents-hi-ce-es5-index.js

@@ -12,8 +12,8 @@
   <head>
     <title></title>
     <meta charset="UTF-8">
-    <script src="../../web-component-tester/browser.js"></script>
     <script src="../webcomponents-loader.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
     <link rel="import" href="imports/a1-import.html">
   </head>
   <body>

libs/webcomponentsjs/entrypoints/webcomponents-sd-ce-index.js

@@ -12,8 +12,8 @@
   <head>
     <title></title>
     <meta charset="UTF-8">
-    <script src="../../web-component-tester/browser.js"></script>
     <script src="../webcomponents-loader.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
   </head>
   <body>
     <x-foo></x-foo>

libs/webcomponentsjs/gulpfile.js

@@ -19,8 +19,8 @@
         }
       }
     </script>
-    <script src="../../web-component-tester/browser.js"></script>
     <script src="../webcomponents-loader.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
     <link rel="import" href="imports/element-import-a.html">
   </head>
   <body>

libs/webcomponentsjs/package.json

@@ -0,0 +1,40 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+
+<head>
+  <title>Force polyfills</title>
+  <meta charset="UTF-8">
+  <script>
+    window.ShadyDOM = {
+      force: true
+    };
+    if (window.customElements) customElements.forcePolyfill = true;
+    window.webComponentsReadyCount = 0;
+    window.addEventListener('WebComponentsReady', function() {
+      window.webComponentsReadyCount++;
+    });
+  </script>
+  <script src="../webcomponents-loader.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+
+<body>
+  <script>
+    suite('Force polyfill', function() {
+      test('expected boot', function() {
+        assert.equal(window.webComponentsReadyCount, 1, 'failed to fire WebComponentsReady');
+      });
+    });
+  </script>
+</body>
+
+</html>

libs/webcomponentsjs/tests/ce-import-upgrade-async.html

@@ -0,0 +1,54 @@
+<!--
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<script>
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+  function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+  // Kick off shady CSS.
+  var template = document.createElement('template');
+  template.innerHTML =
+    `
+      <style>:host {color: blue;} .red-text {color: red;} </style>
+      <p class="red-text">Shadow DOM</p>
+      <slot id="slot"></slot>
+    `;
+  if (template) {
+    if (window.ShadyCSS) {
+      window.ShadyCSS.prepareTemplate(template, 'simple-element');
+    }
+  }
+
+  var SimpleElement = function (_HTMLElement) {
+    _inherits(SimpleElement, _HTMLElement);
+
+    function SimpleElement() {
+      _classCallCheck(this, SimpleElement);
+
+      var _this = _possibleConstructorReturn(this, (SimpleElement.__proto__ || Object.getPrototypeOf(SimpleElement)).call(this));
+
+      _this.bestName = 'batman';
+      if (window.ShadyCSS) {
+        window.ShadyCSS.styleElement(_this);
+      }
+
+      if (template && !_this.shadowRoot) {
+        _this.attachShadow({ mode: 'open' });
+        _this.shadowRoot.appendChild(document.importNode(template.content, true));
+      }
+      return _this;
+    }
+
+    return SimpleElement;
+  }(HTMLElement);
+
+  window.customElements.define('simple-element', SimpleElement);
+</script>