Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 1 | // Copyright 2019 The Chromium Authors. All rights reserved. |
| 2 | // Use of this source code is governed by a BSD-style license that can be |
| 3 | // found in the LICENSE file. |
| 4 | |
| 5 | import {LitElement, html, css} from 'lit-element'; |
| 6 | |
| 7 | /** |
| 8 | * `<mr-crbug-link>` |
| 9 | * |
| 10 | * Displays a crbug short-link to an issue. |
| 11 | * |
| 12 | */ |
| 13 | export class MrCrbugLink extends LitElement { |
| 14 | /** @override */ |
| 15 | static get styles() { |
| 16 | return css` |
| 17 | :host { |
| 18 | /** |
| 19 | * CSS variables provided to allow conditionally hiding <mr-crbug-link> |
| 20 | * in a way that's screenreader friendly. |
| 21 | */ |
| 22 | --mr-crbug-link-opacity: 1; |
| 23 | --mr-crbug-link-opacity-focused: 1; |
| 24 | } |
| 25 | a.material-icons { |
| 26 | font-size: var(--chops-icon-font-size); |
| 27 | display: inline-block; |
| 28 | color: var(--chops-primary-icon-color); |
| 29 | padding: 0 2px; |
| 30 | box-sizing: border-box; |
| 31 | text-decoration: none; |
| 32 | vertical-align: middle; |
| 33 | } |
| 34 | a { |
| 35 | opacity: var(--mr-crbug-link-opacity); |
| 36 | } |
| 37 | a:focus { |
| 38 | opacity: var(--mr-crbug-link-opacity-focused); |
| 39 | } |
| 40 | `; |
| 41 | } |
| 42 | |
| 43 | /** @override */ |
| 44 | render() { |
| 45 | return html` |
| 46 | <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
| 47 | <a |
| 48 | id="bugLink" |
| 49 | class="material-icons" |
| 50 | href=${this._issueUrl} |
| 51 | title="crbug link" |
| 52 | >link</a> |
| 53 | `; |
| 54 | } |
| 55 | |
| 56 | /** @override */ |
| 57 | static get properties() { |
| 58 | return { |
| 59 | /** |
| 60 | * The issue being viewed. Falls back gracefully if this is only a ref. |
| 61 | */ |
| 62 | issue: {type: Object}, |
| 63 | }; |
| 64 | } |
| 65 | |
| 66 | /** |
| 67 | * Computes the URL to render in the shortlink. |
| 68 | * @return {string} |
| 69 | */ |
| 70 | get _issueUrl() { |
| 71 | const issue = this.issue; |
| 72 | if (!issue) return ''; |
| 73 | if (this._getHost() === 'bugs.chromium.org') { |
| 74 | const projectPart = ( |
| 75 | issue.projectName == 'chromium' ? '' : issue.projectName + '/'); |
| 76 | return `https://crbug.com/${projectPart}${issue.localId}`; |
| 77 | } |
| 78 | const issueType = issue.approvalValues ? 'approval' : 'detail'; |
| 79 | return `/p/${issue.projectName}/issues/${issueType}?id=${issue.localId}`; |
| 80 | } |
| 81 | |
| 82 | _getHost() { |
| 83 | // This function allows us to mock the host in unit testing. |
| 84 | return document.location.host; |
| 85 | } |
| 86 | } |
| 87 | customElements.define('mr-crbug-link', MrCrbugLink); |