[DevTools] Turn links into spans to prevent default behavior.

Also replaced two different classes with a single one. BUG=665661 Review-Url: https://codereview.chromium.org/2527763003 Cr-Commit-Position: refs/heads/master@{#434359}
binaryage · Nov 24, 2016 · b0f6833 · b0f6833
1 parent c429003
commit b0f6833
Show file tree

Hide file tree

Showing 22 changed files with 65 additions and 76 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1919,20 +1919,23 @@ 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;
   if (Common.ParsedURL.isRelativeURL(url))
     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
@@ -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
@@ -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
@@ -232,7 +232,7 @@
     color: white;
 }
 
-.data-grid:focus tr.selected a {
+.data-grid:focus tr.selected .devtools-link {
     color: white;
 }