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.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();
 }
 
 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.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.

 };
 
 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/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() {
     // 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);