Make app list start page doodle clickable and have alt text.

chrome/browser/resources/app_list/start_page.js

Index: chrome/browser/resources/app_list/start_page.js
diff --git a/chrome/browser/resources/app_list/start_page.js b/chrome/browser/resources/app_list/start_page.js
index ce8c734bf45d7fad5140fe3582094249d9cef3e3..0c660ffb9eb59de991c67740353371ca40bebc2f 100644
--- a/chrome/browser/resources/app_list/start_page.js
+++ b/chrome/browser/resources/app_list/start_page.js
@@ -13,6 +13,9 @@ cr.define('appList.startPage', function() {
 
   var speechManager = null;
 
+  // The element containing the current Google Doodle.
+  var doodle = null;
+
   /**
    * Initialize the page.
    */
@@ -48,24 +51,73 @@ cr.define('appList.startPage', function() {
   }
 
   /**
+   * Sets the doodle's visibility, hiding or showing the default logo.
+   *
+   * @param {boolean} visible Whether the doodle should be made visible.
+   */
+  function setDoodleVisible(visible) {

[Matt Giuca, 2015/02/03 07:08:50]

So if $('doodle') doesn't exist and visible == true, we go back to default logo?

Seems like this should never happen (following the logic where you only set an
image source after you create a doodle). So I think it's appropriate to just
crash or throw an error (whatever is appropriate JS equivalent of a DCHECK) in
that case.

Then you can structure this a bit more nicely:
if (visible) {
  // dcheck equivalent (doodle)
  // assume doodle && visible
} else {
  // only happens if user is explicitly hiding
}

[calamity, 2015/02/04 03:16:22]

I don't think there's an assert in JS so.....

Done?

[Matt Giuca, 2015/02/04 04:36:10]

Acknowledged.

+    var doodle = $('doodle');
+    var defaultLogo = $('default_logo');
+    if (doodle && visible) {
+      doodle.style.display = 'flex';
+      defaultLogo.style.display = 'none';
+      console.log(defaultLogo.style.display);
+    } else {
+      if (doodle)
+        doodle.style.display = 'none';
+
+      defaultLogo.style.display = 'block';
+    }
+  }
+
+  /**
    * Invoked when the app-list doodle is updated.
    *
    * @param {Object} data The data object representing the current doodle.
    */
   function onAppListDoodleUpdated(data, base_url) {
-    var defaultLogo = $('default_logo');
-    var doodle = $('doodle');
-    if (!data.ddljson || !data.ddljson.transparent_large_image) {
-      defaultLogo.style.display = 'block';
-      doodle.style.display = 'none';
+    if (this.doodle) {
+      this.doodle.parentNode.removeChild(this.doodle);
+      this.doodle = null;
+    }
+
+    var doodleData = data.ddljson;
+    if (!doodleData || !doodleData.transparent_large_image) {
+      setDoodleVisible(false);
       return;
     }
 
-    doodle.onload = function() {
-      defaultLogo.style.display = 'none';
-      doodle.style.display = 'block';
+    // Set the page's base URL so that links will resolve relative to the Google
+    // homepage.
+    $('base').href = base_url;
+
+    this.doodle = document.createElement('div');
+    this.doodle.id = 'doodle';
+    this.doodle.style.display = 'none';
+
+    var doodleImage = document.createElement('img');
+    doodleImage.id = 'doodle_image';
+    if (doodleData.alt_text) {
+      doodleImage.alt = doodleData.alt_text;
+      doodleImage.title = doodleData.alt_text;
+    }
+
+    doodleImage.onload = function() {
+      setDoodleVisible(true);
     };
-    doodle.src = base_url + data.ddljson.transparent_large_image.url;
+    doodleImage.src = doodleData.transparent_large_image.url;
+
+    if (doodleData.target_url) {
+      var doodleLink = document.createElement('a');

[Matt Giuca, 2015/02/03 07:08:50]

Curious: In my experience, when you have <a><img /></a>, the image has a blue
border around it by default, unless you mute it in the CSS. Are you doing that?
Do you know why it isn't an issue here?

[calamity, 2015/02/04 03:16:22]

I am not seeing this happen. I have no idea why. I think it's just like that?

[Matt Giuca, 2015/02/04 04:36:10]

Yeah, I'm not seeing it even on a totally fresh page. Maybe it's something old
browsers used to do.

+      doodleLink.id = 'doodle_link';
+      doodleLink.href = doodleData.target_url;
+      doodleLink.target = '_blank';
+      doodleLink.appendChild(doodleImage);
+      this.doodle.appendChild(doodleLink);
+    } else {
+      this.doodle.appendChild(doodleImage);
+    }
+    $('logo_container').appendChild(this.doodle);
   }
 
   /**