Make items on notifications flyout behave like links

We want the notifications in the flyout to behave just like links,
including standard middle-click and Ctrl-click behavior. The simplest
way to do that would be to actually make them links - but the area can
contain a few other links, so we can't do that and have to resort to
ugly hacks.

Or do we?

Turns out that while browsers won't accept HTML containing nested <a>
tags[1], such a structure is valid XHTML, and it's possible to create
such structure in HTML mode using DOM manipulation. It works like one
would expect: the entire thing is clickable, but inner <a> tags' hrefs
override outer ones.

Firefox even had a request to make that work[2] which was happily
fulfilled.

Tested the basic case [see below] on Firefox 22, Opera 12, Opera 15
(which uses the Blink engine like Chrome), IE 8 and IE 6 and it works
the same on all of them. Tested the XHTML variant [see below] on all
of the above except for the IEs which don't grok XHTML and it exhibits
the same behavior.

[1] Simple test: $('<div>1<a>2<a>3</a>4</a>5</div>').html() is
    "1<a>2</a><a>3</a>45", not actually "1<a>2<a>3</a>4</a>5" like one
    might expect.
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=331959

----

The test cases used are below. When trying out the XHTML one make sure
that the browser uses application/xhtml+xml MIME type; saving the file
with .xhtml extension should be enough.

XHTML:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <body>
  <div>1<a href="http://google.com/">2<a href="http://example.com/">3</a>4</a>5</div>
  </body>
  </html>

HTML:
  <!DOCTYPE html>
  <html>
  <body>
  <script type="text/javascript">
  var div = document.createElement('div');
  var a1 = document.createElement('a');
  a1.href = "http://google.com/";
  var a2 = document.createElement('a');
  a2.href = "http://example.com/";

  div.appendChild( document.createTextNode('1') );
  div.appendChild( a1 );
  a1.appendChild( document.createTextNode('2') );
  a1.appendChild( a2 );
  a2.appendChild( document.createTextNode('3') );
  a1.appendChild( document.createTextNode('4') );
  div.appendChild( document.createTextNode('5') );

  document.body.appendChild(div);
  </script>
  </body>
  </html>

----

Bug: 52319
Change-Id: I311eca70f025ce92129c828cd88f96686b7cff72
Merge "Make items on notifications flyout behave like links"