webui: make action links respond to .disabled like link buttons did.

R=dmazzoni@chromium.org
BUG=434988,438512

Review URL: https://codereview.chromium.org/779763003

Cr-Commit-Position: refs/heads/master@{#306911}

2 files changed, 32 insertions, 5 deletions

diff --git a/ui/webui/resources/css/widgets.css b/ui/webui/resources/css/widgets.css
index 9504abd..6ab2ebf 100644
--- a/ui/webui/resources/css/widgets.css
+++ b/ui/webui/resources/css/widgets.css
@@ -270,6 +270,7 @@ input:disabled:-webkit-any([type='password'],
 [is='action-link'][disabled] {
   color: #999;
   cursor: default;
+  pointer-events: none;
   text-decoration: none;
 }
 
diff --git a/ui/webui/resources/js/action_link.js b/ui/webui/resources/js/action_link.js
index d2b22a0..6afaafe 100644
--- a/ui/webui/resources/js/action_link.js
+++ b/ui/webui/resources/js/action_link.js
@@ -37,13 +37,11 @@ var ActionLink = document.registerElement('action-link', {
 
     /** @this {ActionLink} */
     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;
+      // Action links can start disabled (e.g. <a is="action-link" disabled>).
+      this.tabIndex = this.disabled ? -1 : 0;
 
       this.addEventListener('keydown', function(e) {
-        if (e.keyIdentifier == 'Enter') {
+        if (!this.disabled && 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.
@@ -65,6 +63,34 @@ var ActionLink = document.registerElement('action-link', {
           document.activeElement.blur();
       });
     },
+
+    /** @type {boolean} */
+    set disabled(disabled) {
+      if (disabled)
+        HTMLAnchorElement.prototype.setAttribute.call(this, 'disabled', '');
+      else
+        HTMLAnchorElement.prototype.removeAttribute.call(this, 'disabled');
+      this.tabIndex = disabled ? -1 : 0;
+    },
+    get disabled() {
+      return this.hasAttribute('disabled');
+    },
+
+    /** @override */
+    setAttribute: function(attr, val) {
+      if (attr.toLowerCase() == 'disabled')
+        this.disabled = true;
+      else
+        HTMLAnchorElement.prototype.setAttribute.apply(this, arguments);
+    },
+
+    /** @override */
+    removeAttribute: function(attr) {
+      if (attr.toLowerCase() == 'disabled')
+        this.disabled = false;
+      else
+        HTMLAnchorElement.prototype.removeAttribute.apply(this, arguments);
+    },
   },
   extends: 'a',
 });