Link to error docs from the demo app

When an error is shown by the demo app, that error is now a link to
the docs for that specific error code.

Also updates the debugging tutorial to mention that this is clickable.

Closes #553

Change-Id: I988a40c882adf7c3c9da856e7c850649efecadcf

demo/demo.css

@@ -201,19 +201,15 @@ summary {
 #errorDisplay {
   background-color: #d84a38;
   margin: 0;
-  padding: 0;
+  padding: 1em;
   line-height: 2em;
   text-align: center;
   width: 100%;
   display: none;
 }
 
-#errorDisplayText {
-  background-color: #d84a38;
+#errorDisplayLink {
   color: white;
-  margin-left: 2em;
-  margin-right: 2em;
-  float: center;
 }
 
 #errorDisplayCloseButton {

demo/index.html

@@ -87,7 +87,7 @@
 
       <div id="errorDisplay">
         <div id="errorDisplayCloseButton">x</div>
-        <div id="errorDisplayText"></div>
+        <a id="errorDisplayLink" href="#"></a>
       </div>
       <div id="videoContainer" class="overlay-parent">
         <video id="video"

demo/main.js

@@ -108,14 +108,14 @@ shakaDemo.init = function() {
   shaka.polyfill.installAll();
 
   if (!shaka.Player.isBrowserSupported()) {
-    var errorDisplayText = document.getElementById('errorDisplayText');
+    var errorDisplayLink = document.getElementById('errorDisplayLink');
     var error = 'Your browser is not supported!';
 
     // IE8 and other very old browsers don't have textContent.
-    if (errorDisplayText.textContent === undefined) {
-      errorDisplayText.innerText = error;
+    if (errorDisplayLink.textContent === undefined) {
+      errorDisplayLink.innerText = error;
     } else {
-      errorDisplayText.textContent = error;
+      errorDisplayLink.textContent = error;
     }
 
     // Disable the load button.
@@ -128,7 +128,16 @@ shakaDemo.init = function() {
     errorDisplayCloseButton.style.display = 'none';
 
     // Make sure the error is seen.
-    errorDisplayText.style.fontSize = '250%';
+    errorDisplayLink.style.fontSize = '250%';
+
+    // TODO: Link to docs about browser support.  For now, disable link.
+    errorDisplayLink.href = '#';
+    // Disable for newer browsers:
+    errorDisplayLink.style.pointerEvents = 'none';
+    // Disable for older browsers:
+    errorDisplayLink.style.textDecoration = 'none';
+    errorDisplayLink.style.cursor = 'default';
+    errorDisplayLink.onclick = function() { return false; };
 
     var errorDisplay = document.getElementById('errorDisplay');
     errorDisplay.style.display = 'block';
@@ -189,8 +198,12 @@ shakaDemo.onErrorEvent_ = function(event) {
 shakaDemo.onError_ = function(error) {
   console.error('Player error', error);
   var message = error.message || ('Error code ' + error.code);
+  var link = document.getElementById('errorDisplayLink');
+  link.href = '../docs/api/shaka.util.Error.html#value:' + error.code;
+  link.textContent = message;
+  // Make the link clickable only if we have an error code.
+  link.style.pointerEvents = error.code ? 'auto' : 'none';
   document.getElementById('errorDisplay').style.display = 'block';
-  document.getElementById('errorDisplayText').textContent = message;
 };
 
 
@@ -199,7 +212,9 @@ shakaDemo.onError_ = function(error) {
  */
 shakaDemo.closeError = function() {
   document.getElementById('errorDisplay').style.display = 'none';
-  document.getElementById('errorDisplayText').textContent = '';
+  var link = document.getElementById('errorDisplayLink');
+  link.href = '';
+  link.textContent = '';
 };
 
 

docs/tutorials/debugging.md

@@ -19,8 +19,8 @@ code 1001".
 #### Looking up error codes
 
 Look at the Error we just logged.  It has `category: 1`, `code: 1001`.  To find
-out what that means, check the docs for {@link shaka.util.Error}.  There we find
-that `1001` means `BAD_HTTP_STATUS`:
+out what that means, click on the error, which takes you to the docs for
+{@link shaka.util.Error}.  There we find that `1001` means `BAD_HTTP_STATUS`:
 
 > An HTTP network request returned an HTTP status that indicated a failure.
 > error.data[0] is the URI.