| 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..5410bcc831d819b9ae1ad4ffe69f6f1a798ce2cf
|
| --- /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>
|
| +//
|
| +// Using the <action-link> tag or document.createElement('action-link') is not
|
| +// currently supported and is not the preferred way of extending tags.
|
| +
|
| +/**
|
| + * @constructor
|
| + * @extends {HTMLAnchorElement}
|
| + */
|
| +var ActionLink = document.registerElement('action-link', {
|
| + prototype: {
|
| + __proto__: HTMLAnchorElement.prototype,
|
| +
|
| + createdCallback: function() {
|
| + if (this.tagName == 'action-link')
|
| + throw 'Use <a is="action-link"> instead of <action-link>';
|
| +
|
| + // 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();
|
| + });
|
| +
|
| + this.addEventListener('keydown', function(e) {
|
| + if (e.keyIdentifier == 'Enter') {
|
| + e.preventDefault();
|
| + e.stopPropagation();
|
| + this.click();
|
| + }
|
| + });
|
| + },
|
| + },
|
| + extends: 'a',
|
| +});
|
|
|