When a demo on the o3d-webgl site gets opened in an ordinary browser that doesn't support WebGL yet, the error message just says "WebGL context not found". Now it provides a link with more information.

Review URL: http://codereview.chromium.org/2099002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@47312 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 47 insertions, 5 deletions

diff --git a/o3d/samples/o3djs/webgl.js b/o3d/samples/o3djs/webgl.js
index c0594af..7f979ee 100644
--- a/o3d/samples/o3djs/webgl.js
+++ b/o3d/samples/o3djs/webgl.js
@@ -77,7 +77,9 @@ o3djs.webgl.makeClients = function(callback,
       }
     }
     var objElem = o3djs.webgl.createClient(element, features, opt_debug);
-    clientElements.push(objElem);
+    if (objElem) {
+      clientElements.push(objElem);
+    }
   }
 
   // Wait for the client elements to be fully initialized. This
@@ -138,13 +140,44 @@ o3djs.webgl.addDebuggingWrapper = function(context) {
 
 
 /**
+ * Inserts text indicating that a WebGL context could not be created under
+ * the given node and links to the site about WebGL capable browsers.
+ */
+o3djs.webgl.webGlCanvasError = function(parentNode, unavailableElement) {
+  var background = document.createElement('div');
+  background.style.backgroundColor='#ccffff';
+  background.style.textAlign='center';
+  background.style.margin='10px';
+
+  var message = document.createElement('p');
+  var messageText = document.createTextNode(
+      unavailableElement + ' unavailable.  ' +
+      'Make sure you are using a WebGL capable browser ' +
+      'and WebGL is enabled.  Click here for more information:');
+  message.appendChild(messageText);
+
+  var url = 'http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation';
+  var link = document.createElement('a');
+  link.appendChild(document.createTextNode(url));
+  link.href = url;
+
+  background.appendChild(message);
+  background.appendChild(link);
+  background.appendChild(document.createElement('br'));
+
+  parentNode.appendChild(background);
+};
+
+
+/**
  * Creates a canvas under the given parent element and an o3d.Client
  * under that.
  *
- * @ param {!Element} element The element under which to insert the client.
- * @ param {string} opt_features Features to turn on.
- * @ param {boolean} opt_debug Whether gl debugging features should be
+ * @param {!Element} element The element under which to insert the client.
+ * @param {string} opt_features Features to turn on.
+ * @param {boolean} opt_debug Whether gl debugging features should be
  *     enabled.
+ * @return {HTMLCanvas} The canvas element, or null if initializaton failed.
  */
 o3djs.webgl.createClient = function(element, opt_features, opt_debug) {
   opt_features = opt_features || '';
@@ -162,6 +195,11 @@ o3djs.webgl.createClient = function(element, opt_features, opt_debug) {
   canvas.style.width = "100%";
   canvas.style.height = "100%";
 
+  if (!canvas) {
+    o3djs.webgl.webGlCanvasError(element, 'HTMLCanvas');
+    return null;
+  }
+
   var client = new o3d.Client;
 
   var resizeHandler = function() {
@@ -175,7 +213,11 @@ o3djs.webgl.createClient = function(element, opt_features, opt_debug) {
   window.addEventListener('resize', resizeHandler, false);
   setTimeout(resizeHandler, 0);
 
-  client.initWithCanvas(canvas);
+  if (!client.initWithCanvas(canvas)) {
+    o3djs.webgl.webGlCanvasError(element, 'WebGL context');
+    return null;
+  }
+
   canvas.client = client;
   canvas.o3d = o3d;