Implement <appview>

chrome/renderer/resources/extensions/app_view.js

Index: chrome/renderer/resources/extensions/app_view.js
diff --git a/chrome/renderer/resources/extensions/app_view.js b/chrome/renderer/resources/extensions/app_view.js
index 03174c62d6c627a052518cf5515552cd844bed0e..77b89d6b50c1b78d8071bace6e4fb645e183f749 100644
--- a/chrome/renderer/resources/extensions/app_view.js
+++ b/chrome/renderer/resources/extensions/app_view.js
@@ -12,11 +12,25 @@ function AppViewInternal(appviewNode) {
   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.
@@ -25,28 +39,39 @@ AppViewInternal.prototype.createBrowserPluginNode = function() {
   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);
 };
 
@@ -57,6 +82,9 @@ function registerBrowserPluginElement() {
     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() {