diff --git a/front_end/components/Linkifier.js b/front_end/components/Linkifier.js index 53ae029445..4492683065 100644 --- a/front_end/components/Linkifier.js +++ b/front_end/components/Linkifier.js @@ -387,8 +387,8 @@ Components.Linkifier = class { * @returns{!Element} */ static _createLink(text, className, title, href, preventClick) { - var link = createElementWithClass('a', className); - link.classList.add('webkit-html-resource-link'); + var link = createElementWithClass('span', className); + link.classList.add('devtools-link'); if (title) link.title = title; if (href) @@ -405,10 +405,10 @@ Components.Linkifier = class { revealable: null, fallback: null }; - if (preventClick) - link.addEventListener('click', event => event.consume(true), false); - else + if (!preventClick) link.addEventListener('click', Components.Linkifier._handleClick, false); + else + link.classList.add('devtools-link-prevent-click'); return link; } diff --git a/front_end/console/consoleView.css b/front_end/console/consoleView.css index 4be5ff7671..80d6b44380 100644 --- a/front_end/console/consoleView.css +++ b/front_end/console/consoleView.css @@ -349,14 +349,14 @@ } #console-messages .link, -#console-messages a { +#console-messages .devtools-link { color: rgb(33%, 33%, 33%); cursor: pointer; word-break: break-all; } #console-messages .link:hover, -#console-messages a:hover { +#console-messages .devtools-link:hover { color: rgb(15%, 15%, 15%); } diff --git a/front_end/elements/ElementsPanel.js b/front_end/elements/ElementsPanel.js index 278654a05e..9f4768ef11 100644 --- a/front_end/elements/ElementsPanel.js +++ b/front_end/elements/ElementsPanel.js @@ -523,21 +523,22 @@ Elements.ElementsPanel = class extends UI.Panel { * @return {!Element|!AnchorBox|undefined} */ _getPopoverAnchor(element, event) { - var anchor = element.enclosingNodeOrSelfWithClass('webkit-html-resource-link'); - if (!anchor || !anchor.href) - return; - - return anchor; + var link = element; + while (link && !link[Elements.ElementsTreeElement.HrefSymbol]) + link = link.parentElementOrShadowHost(); + return link ? link : undefined; } /** - * @param {!Element} anchor + * @param {!Element} link * @param {!UI.Popover} popover */ - _showPopover(anchor, popover) { + _showPopover(link, popover) { var node = this.selectedDOMNode(); - if (node) - Components.DOMPresentationUtils.buildImagePreviewContents(node.target(), anchor.href, true, showPopover); + if (node) { + Components.DOMPresentationUtils.buildImagePreviewContents( + node.target(), link[Elements.ElementsTreeElement.HrefSymbol], true, showPopover); + } /** * @param {!Element=} contents @@ -546,7 +547,7 @@ Elements.ElementsPanel = class extends UI.Panel { if (!contents) return; popover.setCanShrink(false); - popover.showForAnchor(contents, anchor); + popover.showForAnchor(contents, link); } } diff --git a/front_end/elements/ElementsTreeElement.js b/front_end/elements/ElementsTreeElement.js index c914b24668..dbe32f3500 100644 --- a/front_end/elements/ElementsTreeElement.js +++ b/front_end/elements/ElementsTreeElement.js @@ -1211,9 +1211,11 @@ Elements.ElementsTreeElement = class extends TreeElement { value = value.replace(closingPunctuationRegex, '$&\u200B'); if (value.startsWith('data:')) value = value.trimMiddle(60); - return node.nodeName().toLowerCase() === 'a' ? + var link = node.nodeName().toLowerCase() === 'a' ? UI.createExternalLink(rewrittenHref, value, '', true) : Components.Linkifier.linkifyURL(rewrittenHref, value, '', undefined, undefined, true); + link[Elements.ElementsTreeElement.HrefSymbol] = rewrittenHref; + return link; } if (node && (name === 'src' || name === 'href')) { @@ -1556,6 +1558,8 @@ Elements.ElementsTreeElement = class extends TreeElement { } }; +Elements.ElementsTreeElement.HrefSymbol = Symbol('ElementsTreeElement.Href'); + Elements.ElementsTreeElement.InitialChildrenLimit = 500; // A union of HTML4 and HTML5-Draft elements that explicitly diff --git a/front_end/elements/ElementsTreeOutline.js b/front_end/elements/ElementsTreeOutline.js index 9a4e3f0201..7c309e90d7 100644 --- a/front_end/elements/ElementsTreeOutline.js +++ b/front_end/elements/ElementsTreeOutline.js @@ -531,11 +531,10 @@ Elements.ElementsTreeOutline = class extends TreeOutline { * @return {!Element|!AnchorBox|undefined} */ _getPopoverAnchor(element, event) { - var anchor = element.enclosingNodeOrSelfWithClass('webkit-html-resource-link'); - if (!anchor || !anchor.href) - return; - - return anchor; + var link = element; + while (link && !link[Elements.ElementsTreeElement.HrefSymbol]) + link = link.parentElementOrShadowHost(); + return link ? link : undefined; } /** @@ -577,15 +576,16 @@ Elements.ElementsTreeOutline = class extends TreeOutline { } /** - * @param {!Element} anchor + * @param {!Element} link * @param {!UI.Popover} popover */ - _showPopover(anchor, popover) { - var listItem = anchor.enclosingNodeOrSelfWithNodeName('li'); + _showPopover(link, popover) { + var listItem = link.enclosingNodeOrSelfWithNodeName('li'); var node = /** @type {!Elements.ElementsTreeElement} */ (listItem.treeElement).node(); this._loadDimensionsForNode( node, Components.DOMPresentationUtils.buildImagePreviewContents.bind( - Components.DOMPresentationUtils, node.target(), anchor.href, true, showPopover)); + Components.DOMPresentationUtils, node.target(), link[Elements.ElementsTreeElement.HrefSymbol], true, + showPopover)); /** * @param {!Element=} contents @@ -594,7 +594,7 @@ Elements.ElementsTreeOutline = class extends TreeOutline { if (!contents) return; popover.setCanShrink(false); - popover.showForAnchor(contents, anchor); + popover.showForAnchor(contents, link); } } diff --git a/front_end/elements/StylesSidebarPane.js b/front_end/elements/StylesSidebarPane.js index 73894fbcdc..59fbbc2f9a 100644 --- a/front_end/elements/StylesSidebarPane.js +++ b/front_end/elements/StylesSidebarPane.js @@ -3013,7 +3013,7 @@ Elements.StylesSidebarPropertyRenderer = class { hrefUrl = Common.ParsedURL.completeURL(this._rule.resourceURL(), url); else if (this._node) hrefUrl = this._node.resolveURL(url); - container.appendChild(Components.Linkifier.linkifyURL(hrefUrl || url, url)); + container.appendChild(Components.Linkifier.linkifyURL(hrefUrl || url, url, '', undefined, undefined, true)); container.createTextChild(')'); return container; } diff --git a/front_end/elements/elementsPanel.css b/front_end/elements/elementsPanel.css index 3a9182b9d1..b0585ee50f 100644 --- a/front_end/elements/elementsPanel.css +++ b/front_end/elements/elementsPanel.css @@ -226,7 +226,7 @@ white-space: nowrap; } -.styles-section .styles-section-subtitle a { +.styles-section .styles-section-subtitle .devtools-link { color: inherit; } @@ -238,7 +238,7 @@ color: #222; } -.styles-section .webkit-html-resource-link { +.styles-section .devtools-link { user-select: none; } diff --git a/front_end/elements/elementsTreeOutline.css b/front_end/elements/elementsTreeOutline.css index ed0b17cac7..8edd0db6ed 100644 --- a/front_end/elements/elementsTreeOutline.css +++ b/front_end/elements/elementsTreeOutline.css @@ -241,10 +241,6 @@ button, input, select { white-space: nowrap; } -.webkit-html-attribute-value a { - cursor: default !important; -} - .elements-tree-nowrap, .elements-tree-nowrap .li { white-space: pre !important; } @@ -315,8 +311,7 @@ ol:focus li.selected .webkit-html-tag { ol:focus li.selected .webkit-html-tag-name, ol:focus li.selected .webkit-html-close-tag-name, ol:focus li.selected .webkit-html-attribute-value, -ol:focus li.selected .webkit-html-external-link, -ol:focus li.selected .webkit-html-resource-link { +ol:focus li.selected .devtools-link { color: white; } diff --git a/front_end/main/Main.js b/front_end/main/Main.js index 10a48ecd76..e274e6f5fc 100644 --- a/front_end/main/Main.js +++ b/front_end/main/Main.js @@ -75,9 +75,7 @@ Main.Main = class { var storagePrefix = ''; if (Host.isCustomDevtoolsFrontend()) storagePrefix = '__custom__'; - else if ( - !Runtime.queryParam('can_dock') && !!Runtime.queryParam('debugFrontend') && - !Host.isUnderTest(prefs)) + else if (!Runtime.queryParam('can_dock') && !!Runtime.queryParam('debugFrontend') && !Host.isUnderTest(prefs)) storagePrefix = '__bundled__'; var clearLocalStorage = window.localStorage ? window.localStorage.clear.bind(window.localStorage) : undefined; var localStorage = @@ -391,14 +389,6 @@ Main.Main = class { if (event.handled) return; - var document = event.target && event.target.ownerDocument; - var target = document ? document.deepActiveElement() : null; - if (target) { - var anchor = target.enclosingNodeOrSelfWithNodeName('a'); - if (anchor) - event.preventDefault(); - } - if (!UI.Dialog.hasInstance() && UI.inspectorView.currentPanelDeprecated()) { UI.inspectorView.currentPanelDeprecated().handleShortcut(event); if (event.handled) { diff --git a/front_end/network/networkLogView.css b/front_end/network/networkLogView.css index 23db3de818..73a9653197 100644 --- a/front_end/network/networkLogView.css +++ b/front_end/network/networkLogView.css @@ -144,7 +144,7 @@ color: rgb(230, 0, 0); } -.initiator-column a { +.initiator-column .devtools-link { color: inherit; } diff --git a/front_end/profiler/heapProfiler.css b/front_end/profiler/heapProfiler.css index 5f8dd58873..cd5a4237fa 100644 --- a/front_end/profiler/heapProfiler.css +++ b/front_end/profiler/heapProfiler.css @@ -180,7 +180,7 @@ padding: 2px; } -.heap-allocation-stack .stack-frame a { +.heap-allocation-stack .stack-frame .devtools-link { color: rgb(33%, 33%, 33%); } diff --git a/front_end/resources/serviceWorkersView.css b/front_end/resources/serviceWorkersView.css index 8e21a4348e..b6b0652409 100644 --- a/front_end/resources/serviceWorkersView.css +++ b/front_end/resources/serviceWorkersView.css @@ -30,7 +30,7 @@ flex: auto; } -.service-worker-error-stack a { +.service-worker-error-stack .devtools-link { float: right; color: rgb(33%, 33%, 33%); cursor: pointer; diff --git a/front_end/sources/UIList.js b/front_end/sources/UIList.js index 2f4b2f52b2..55342934e8 100644 --- a/front_end/sources/UIList.js +++ b/front_end/sources/UIList.js @@ -227,7 +227,7 @@ Sources.UIList.Item = class { if (!title || !handler) return; this._actionElement = this.element.createChild('div', 'action'); - var link = this._actionElement.createChild('a', 'action-link'); + var link = this._actionElement.createChild('span', 'action-link'); link.textContent = title; link.addEventListener('click', (event) => { link.disabled = true; diff --git a/front_end/sources/WorkspaceMappingTip.js b/front_end/sources/WorkspaceMappingTip.js index fdfe1aaae4..83aedaf014 100644 --- a/front_end/sources/WorkspaceMappingTip.js +++ b/front_end/sources/WorkspaceMappingTip.js @@ -141,7 +141,7 @@ Sources.WorkspaceMappingTip = class { infobar.createDetailsRowMessage(Common.UIString( 'You can map files in your workspace to the ones loaded over the network. As a result, changes made in DevTools will be persisted to disk.')); infobar.createDetailsRowMessage(Common.UIString('Use context menu to establish the mapping at any time.')); - var anchor = createElementWithClass('a', 'link'); + var anchor = createElementWithClass('span', 'link'); anchor.textContent = Common.UIString('Establish the mapping now...'); anchor.addEventListener('click', this._establishTheMapping.bind(this, uiSourceCode), false); infobar.createDetailsRowMessage('').appendChild(anchor); diff --git a/front_end/sources/fileBasedSearchResultsPane.css b/front_end/sources/fileBasedSearchResultsPane.css index 3c3df6ba03..d4ad56c9bc 100644 --- a/front_end/sources/fileBasedSearchResultsPane.css +++ b/front_end/sources/fileBasedSearchResultsPane.css @@ -88,7 +88,7 @@ li.search-match .highlighted-match { background-color: hsl(133, 100%, 30%) !important; } -.tree-outline a { +.tree-outline .devtools-link { text-decoration: none; display: block; flex: auto; diff --git a/front_end/sources/uiList.css b/front_end/sources/uiList.css index 800768976a..041be429fc 100644 --- a/front_end/sources/uiList.css +++ b/front_end/sources/uiList.css @@ -38,7 +38,7 @@ padding: 0 10px 0 10px; } -.list-item > .subtitle a { +.list-item > .subtitle .devtools-link { color: inherit; } diff --git a/front_end/terminal/terminal.css b/front_end/terminal/terminal.css index 3abe086876..502b2c3d26 100644 --- a/front_end/terminal/terminal.css +++ b/front_end/terminal/terminal.css @@ -30,11 +30,11 @@ padding-right: 10px; } -a.webkit-html-resource-link { +.devtools-link { color: inherit; text-decoration: inherit; } -a.webkit-html-resource-link:hover { +.devtools-link:hover { text-decoration: underline; } diff --git a/front_end/timeline/timelinePanel.css b/front_end/timeline/timelinePanel.css index 58353ea9c8..f4b312d636 100644 --- a/front_end/timeline/timelinePanel.css +++ b/front_end/timeline/timelinePanel.css @@ -67,8 +67,7 @@ display: flex; } -#timeline-container .webkit-html-external-link, -#timeline-container .webkit-html-resource-link { +#timeline-container .devtools-link { color: inherit; } diff --git a/front_end/ui/UIUtils.js b/front_end/ui/UIUtils.js index b961b0e250..3a62614d47 100644 --- a/front_end/ui/UIUtils.js +++ b/front_end/ui/UIUtils.js @@ -1919,7 +1919,7 @@ UI.createExternalLink = function(url, linkText, className, preventClick) { if (!linkText) linkText = url; - var a = createElementWithClass('a', className); + var a = createElementWithClass('span', className); var href = url; if (url.trim().toLowerCase().startsWith('javascript:')) href = null; @@ -1927,12 +1927,15 @@ UI.createExternalLink = function(url, linkText, className, preventClick) { href = null; if (href !== null) { a.href = href; - a.classList.add('webkit-html-external-link'); - a.addEventListener('click', (event) => { - event.consume(true); - if (!preventClick) + a.classList.add('devtools-link'); + if (!preventClick) { + a.addEventListener('click', (event) => { + event.consume(true); InspectorFrontendHost.openInNewTab(/** @type {string} */ (href)); - }, false); + }, false); + } else { + a.classList.add('devtools-link-prevent-click'); + } a[UI._externalLinkSymbol] = true; } if (linkText !== url) diff --git a/front_end/ui/inspectorSyntaxHighlight.css b/front_end/ui/inspectorSyntaxHighlight.css index eba87a31e0..004675a58b 100644 --- a/front_end/ui/inspectorSyntaxHighlight.css +++ b/front_end/ui/inspectorSyntaxHighlight.css @@ -103,19 +103,17 @@ unicode-bidi: -webkit-isolate; } -.webkit-html-external-link, -.webkit-html-resource-link { - /* Keep this in sync with view-source.css (.webkit-html-external-link, .webkit-html-resource-link) */ +.devtools-link { color: rgb(17, 85, 204); - /* Required for consistency with view-source.css, since anchors may not have href attributes */ text-decoration: underline; +} + +.devtools-link:not(.devtools-link-prevent-click) { cursor: pointer; } -.-theme-with-dark-background .webkit-html-external-link, -.-theme-with-dark-background .webkit-html-resource-link, -:host-context(.-theme-with-dark-background) .webkit-html-external-link, -:host-context(.-theme-with-dark-background) .webkit-html-resource-link { +.-theme-with-dark-background .devtools-link, +:host-context(.-theme-with-dark-background) .devtools-link { color: hsl(0, 0%, 67%); } diff --git a/front_end/ui/inspectorSyntaxHighlightDark.css b/front_end/ui/inspectorSyntaxHighlightDark.css index c176952958..6595310b64 100644 --- a/front_end/ui/inspectorSyntaxHighlightDark.css +++ b/front_end/ui/inspectorSyntaxHighlightDark.css @@ -51,8 +51,7 @@ .webkit-html-attribute-name{color:rgb(155, 187, 220);} .webkit-html-attribute-value{color:rgb(242, 151, 102);} .webkit-html-comment{color:rgb(137, 137, 137) !important;} -.webkit-html-resource-link{color:rgb(231, 194, 111);} -.webkit-html-external-link{color:rgb(231, 194, 111);} +.devtools-link{color:rgb(231, 194, 111);} .webkit-html-tag{color:rgb(93, 176, 215);} .webkit-html-tag-name{color:rgb(93, 176, 215);} .webkit-html-close-tag-name{color:rgb(93, 176, 215);} diff --git a/front_end/ui_lazy/dataGrid.css b/front_end/ui_lazy/dataGrid.css index f8609416f0..573b9698d6 100644 --- a/front_end/ui_lazy/dataGrid.css +++ b/front_end/ui_lazy/dataGrid.css @@ -232,7 +232,7 @@ color: white; } -.data-grid:focus tr.selected a { +.data-grid:focus tr.selected .devtools-link { color: white; }