Implement <appview>

chrome/renderer/resources/extensions/app_view.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 var DocumentNatives = requireNative('document_natives');
 var GuestViewInternal =
     require('binding').Binding.create('guestViewInternal').generate();
 var IdGenerator = requireNative('id_generator');
 
 function AppViewInternal(appviewNode) {
   privates(appviewNode).internal = this;
   this.appviewNode = appviewNode;
 
   this.browserPluginNode = this.createBrowserPluginNode();
-  var shadowRoot = this.appviewNode.createShadowRoot();
-  shadowRoot.appendChild(this.browserPluginNode);
+  this.shadowRoot = this.appviewNode.createShadowRoot();

[lazyboy, 2014/07/08 18:24:34]

It isn't necessary to store the reference, this can be retrieved later by
|this.appViewNode.shadowRoot|

[Fady Samuel, 2014/07/08 20:23:46]

Done.

+  this.shadowRoot.appendChild(this.browserPluginNode);
   this.viewInstanceId = IdGenerator.GetNextId();
 }
 
+AppViewInternal.prototype.getErrorNode = function() {
+  if (!this.errorNode) {
+    this.errorNode = document.createElement('div');
+    this.errorNode.innerText = 'Unable to connect to app.';
+    this.errorNode.style.display = 'absolute';
+    this.errorNode.style.left = '0px';
+    this.errorNode.style.top = '0px';
+    this.errorNode.style.width = '100%';
+    this.errorNode.style.height = '100%';
+    this.shadowRoot.appendChild(this.errorNode);
+  }
+  return this.errorNode;
+};
+
 AppViewInternal.prototype.createBrowserPluginNode = function() {
   // We create BrowserPlugin as a custom element in order to observe changes
   // to attributes synchronously.
   var browserPluginNode = new AppViewInternal.BrowserPlugin();
   privates(browserPluginNode).internal = this;
   return browserPluginNode;
 };
 
-AppViewInternal.prototype.connect = function(src, callback) {
+AppViewInternal.prototype.connect = function(app, callback) {
   var params = {
+    'appId': app
   };
   var self = this;
   GuestViewInternal.createGuest(
     'appview',
     params,
     function(instanceId) {
-      self.attachWindow(instanceId, src);
+      if (!instanceId) {
+        self.browserPluginNode.style.visibility = 'hidden';
+        var errorMsg = 'Unable to connect to app "' + app + '".';
+        window.console.warn(errorMsg);
+        self.getErrorNode().innerText = errorMsg;
+        if (callback) {
+          callback(false);
+        }
+        return;
+      }
+      self.attachWindow(instanceId);
       if (callback) {
-        callback();
+        callback(true);
       }
     }
   );
 };
 
-AppViewInternal.prototype.attachWindow = function(instanceId, src) {
+AppViewInternal.prototype.attachWindow = function(instanceId) {
   this.instanceId = instanceId;
   var params = {
     'instanceId': this.viewInstanceId,
-    'src': src
   };
+  this.browserPluginNode.style.visibility = 'visible';
   return this.browserPluginNode['-internal-attach'](instanceId, params);
 };
 
 function registerBrowserPluginElement() {
   var proto = Object.create(HTMLObjectElement.prototype);
 
   proto.createdCallback = function() {
     this.setAttribute('type', 'application/browser-plugin');
     this.style.width = '100%';
     this.style.height = '100%';
+    this.style.position = 'absolute';

[lazyboy, 2014/07/08 18:24:33]

Both the original plugin node and error node shouldn't require
position absolute.

Can we keep this as is and make the error node 
absolute, positioned at (0, 0), 100% X 100%, that
should work.

[Fady Samuel, 2014/07/08 20:23:46]

Done.

+    this.style.left = '0px';
+    this.style.top = '0px';
   };
 
   proto.attachedCallback = function() {
     // Load the plugin immediately.
     var unused = this.nonExistentAttribute;
   };
 
   AppViewInternal.BrowserPlugin =
       DocumentNatives.RegisterElement('appplugin', {extends: 'object',
                                                     prototype: proto});
@@ skipping 28 matching lines @@
 
 var useCapture = true;
 window.addEventListener('readystatechange', function listener(event) {
   if (document.readyState == 'loading')
     return;
 
   registerBrowserPluginElement();
   registerAppViewElement();
   window.removeEventListener(event.type, listener, useCapture);
 }, useCapture);