Add <a is="action-link">, a web component extension of <a> for in-page actions.

ui/webui/resources/js/action_link.js

Index: ui/webui/resources/js/action_link.js
diff --git a/ui/webui/resources/js/action_link.js b/ui/webui/resources/js/action_link.js
new file mode 100644
index 0000000000000000000000000000000000000000..d0669a2276aefaab62116523d37d78b52b56e1bf
--- /dev/null
+++ b/ui/webui/resources/js/action_link.js
@@ -0,0 +1,62 @@
+// Copyright 2014 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.
+
+// Action links are elements that are used to perform an in-page navigation or
+// action (e.g. showing a dialog).
+//
+// They look like normal anchor (<a>) tags as their text color is blue. However,
+// they're subtly different as they're not initially underlined (giving users a
+// clue that underlined links navigate while action links don't).
+//
+// Action links look very similar to normal links when hovered (hand cursor,
+// underlined). This gives the user an idea that clicking this link will do
+// something similar to navigation but in the same page.
+//
+// They can be created in JavaScript like this:
+//
+//   var link = document.createElement('a', 'action-link');  // Note second arg.
+//
+// or with a constructor like this:
+//
+//   var link = new ActionLink();
+//
+// They can be used easily from HTML as well, like so:
+//
+//   <a is="action-link">Click me!</a>
+//
+// NOTE: <action-link> and document.createElement('action-link') don't work.
+
+/**
+ * @constructor
+ * @extends {HTMLAnchorElement}
+ */
+var ActionLink = document.registerElement('action-link', {
+  prototype: {
+    __proto__: HTMLAnchorElement.prototype,
+
+    createdCallback: function() {
+      // Links aren't tabble unless there's an [href] attribute set. Setting
+      // this adds undesirable "Open link in new tab..." context menu handlers
+      // so just manually add to tab order instead.
+      this.tabIndex = 0;
+
+      this.addEventListener('click', function(e) {
+        e.preventDefault();

[aboxhall, 2014/10/22 21:33:32]

I don't think you need this (though I could be wrong) - try without? (I think
using is= overrides all the existing event handling.)

[Dan Beam, 2014/10/23 03:05:44]

Done. (sometimes in code we use e.defaultPrevented to ignore some events, but
let's try without it as there's really no default action to prevent...)

maybe we could have an

  /** Override to do something */
  action: function() {},

and then in the action listeners:

  this.addEventListener('click', this.action.bind(this));
  this.addEventListener('keydown', function() {
    if (e.keyIdentifier == 'Enter') this.action(e);
  });

and callers could override

  $('some-link-id').action = function(e) { ... };


however, it's really not too different than:

  $('some-link-id').onclick = function(e) { ... };

with a hell of a lot more code churn :/

[aboxhall, 2014/10/23 21:41:05]

Agreed, I think keeping the current (click) behaviour makes sense, especially as
it follows the standard 'simulated click' behaviour of plain links.

+      });
+
+      this.addEventListener('keydown', function(e) {
+        if (e.keyIdentifier == 'Enter') {
+          // Schedule a click asynchronously because other 'keydown' handlers
+          // may still run later (e.g. document.addEventListener('keydown')).
+          // Specifically options dialogs break when this timeout isn't here.
+          // NOTE: this affects the "trusted" state of the ensuing click. I
+          // haven't found anything that breaks because of this (yet).
+          window.setTimeout(this.click.bind(this), 0);
+          e.preventDefault();
+        }
+      });
+    },
+  },
+  extends: 'a',
+});