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..bb25683e9c3ecd4e4f3647a233c064d26ae972a9 100644
--- a/chrome/renderer/resources/extensions/app_view.js
+++ b/chrome/renderer/resources/extensions/app_view.js
@@ -14,6 +14,16 @@ function AppViewInternal(appviewNode) {
   this.browserPluginNode = this.createBrowserPluginNode();
   var shadowRoot = this.appviewNode.createShadowRoot();
   shadowRoot.appendChild(this.browserPluginNode);
+  this.errorNode = document.createElement('div');

[lazyboy, 2014/07/07 21:34:44]

Can we lazily create this error node when we actually need it?

[Fady Samuel, 2014/07/08 15:47:09]

Done.

+  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%';
+
+  shadowRoot.appendChild(this.errorNode);
+
   this.viewInstanceId = IdGenerator.GetNextId();
 }
 
@@ -25,28 +35,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.errorNode.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);

[lazyboy, 2014/07/07 21:34:44]

You need to add the code for display:none handling from web_view.js

[Fady Samuel, 2014/07/08 15:47:09]

This is not currently necessary because <appview> doesn't currently support any
attributes. It will not renavigate if detached and reattached.

 };
 
@@ -57,6 +78,9 @@ function registerBrowserPluginElement() {
     this.setAttribute('type', 'application/browser-plugin');
     this.style.width = '100%';
     this.style.height = '100%';
+    this.style.position = 'absolute';

[lazyboy, 2014/07/07 21:34:44]

I'm not totally sure why you'd need this?
position absolute with relative width/height 100% feels ....

[Fady Samuel, 2014/07/08 15:47:09]

So that the errorNode can overlap the BrowserPlugin. Is there a better way to do
this?

+    this.style.left = '0px';
+    this.style.top = '0px';
   };
 
   proto.attachedCallback = function() {