Use event path to detect if anchor has been clicked in WebUIs.

ui/webui/resources/js/util.js

 // Copyright (c) 2012 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.
 
 // <include src="assert.js">
 
 /**
  * Alias for document.getElementById. Found elements must be HTMLElements.
  * @param {string} id The ID of the element to find.
  * @return {HTMLElement} The found element or null if not found.
@@ skipping 194 matching lines @@
  * @return {!HTMLElement} the Element.
  */
 function queryRequiredElement(selectors, opt_context) {
   var element = (opt_context || document).querySelector(selectors);
   return assertInstanceof(element, HTMLElement,
                           'Missing required element: ' + selectors);
 }
 
 // Handle click on a link. If the link points to a chrome: or file: url, then
 // call into the browser to do the navigation.
 document.addEventListener('click', function(e) {

[Dan Beam, 2016/08/08 19:29:47]

can we make this a static function so we can call it from tests?  and then
actually write some tests :)?

[calamity, 2016/08/09 08:39:07]

Do you mean pulling the event handler out into a static function?

What other cases need testing aside from those in util_test.html?

Also, will that test run on iOS?

   if (e.defaultPrevented)
     return;
 
+  var eventPath = e.path;
+  var anchor = null;
+  if (eventPath) {
+    for (var i = 0; i < eventPath.length; i++) {
+      var element = eventPath[i];
+      if (element.tagName === 'A' && element.href) {
+        anchor = element;
+        break;
+      }
+    }
+  }

[Dan Beam, 2016/08/08 19:29:48]

could this work?

/**
 * @param {!Node} node
 * @return {boolean} Whether |node| is an <a href>.
 */
function isAnchorWithHref(node) {
  return node.nodeName == 'A' && node.href;
}

var anchor = e.path ? e.path.find(isAnchorWithHref) :
    findAncestor(e.target, isAnchorWithHref);

[Dan Beam, 2016/08/08 21:28:00]

actually, Array#find might also suck wrt compat UGH

+
   var el = e.target;
-  if (el.nodeType == Node.ELEMENT_NODE &&
+  if (!anchor && el.nodeType == Node.ELEMENT_NODE &&
       el.webkitMatchesSelector('A, A *')) {
     while (el.tagName != 'A') {
       el = el.parentElement;
+      anchor = element;
+      break;
     }
+  }
 
-    if ((el.protocol == 'file:' || el.protocol == 'about:') &&
-        (e.button == 0 || e.button == 1)) {
-      chrome.send('navigateToUrl', [
-        el.href,
-        el.target,
-        e.button,
-        e.altKey,
-        e.ctrlKey,
-        e.metaKey,
-        e.shiftKey
-      ]);
-      e.preventDefault();
-    }
+  if (!anchor)
+    return;
+

[Dan Beam, 2016/08/08 19:29:47]

nit: anchor = /** @type {!HTMLAnchorElement} */(anchor);

[calamity, 2016/08/09 08:39:07]

Done.

+  if ((anchor.protocol == 'file:' || anchor.protocol == 'about:') &&
+      (e.button == 0 || e.button == 1)) {
+    chrome.send('navigateToUrl', [
+      anchor.href,
+      anchor.target,
+      e.button,
+      e.altKey,
+      e.ctrlKey,
+      e.metaKey,
+      e.shiftKey
+    ]);
+    e.preventDefault();
   }
 });
 
 /**
  * Creates a new URL which is the old URL with a GET param of key=value.
  * @param {string} url The base URL. There is not sanity checking on the URL so
  *     it must be passed in a proper format.
  * @param {string} key The key of the param.
  * @param {string} value The value of the param.
  * @return {string} The new URL.
@@ skipping 183 matching lines @@
         case 0xdb: return '[';
         case 0xdd: return ']';
       }
       return 'Unidentified';
     }
   });
 } else {
   window.console.log("KeyboardEvent.Key polyfill not required");
 }
 // </if>  /* is_ios */