[DevTools] Refactor Linkifier to unify link processing.

third_party/WebKit/Source/devtools/front_end/components/Linkifier.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 77 matching lines @@
    * @param {number=} lineNumber
    * @return {boolean}
    */
   static handleLink(url, lineNumber) {
     if (!Components.Linkifier._linkHandler)
       return false;
     return Components.Linkifier._linkHandler.handleLink(url, lineNumber);
   }
 
   /**
-   * @param {!Object} revealable
-   * @param {string} text
-   * @param {string=} fallbackHref
-   * @param {number=} fallbackLineNumber
-   * @param {string=} title
-   * @param {string=} classes
-   * @return {!Element}
-   */
-  static linkifyUsingRevealer(revealable, text, fallbackHref, fallbackLineNumber, title, classes) {
-    var a = createElement('a');
-    a.className = (classes || '') + ' webkit-html-resource-link';
-    a.textContent = text.trimMiddle(Components.Linkifier.MaxLengthForDisplayedURLs);
-    a.title = title || text;
-    if (fallbackHref) {
-      a.href = fallbackHref;
-      a.lineNumber = fallbackLineNumber;
-    }
-
-    /**
-     * @param {!Event} event
-     * @this {Object}
-     */
-    function clickHandler(event) {
-      event.stopImmediatePropagation();
-      event.preventDefault();
-      if (fallbackHref && Components.Linkifier.handleLink(fallbackHref, fallbackLineNumber))
-        return;
-
-      Common.Revealer.reveal(this);
-    }
-    a.addEventListener('click', clickHandler.bind(revealable), false);
-    return a;
-  }
-
-  /**
    * @param {!Element} anchor
    * @param {!Workspace.UILocation} uiLocation
    */
   static _bindUILocation(anchor, uiLocation) {
-    anchor[Components.Linkifier._uiLocationSymbol] = uiLocation;
+    Components.Linkifier._linkInfo(anchor).uiLocation = uiLocation;
     if (!uiLocation)
       return;
     var uiSourceCode = uiLocation.uiSourceCode;
     var sourceCodeAnchors = uiSourceCode[Components.Linkifier._sourceCodeAnchors];
     if (!sourceCodeAnchors) {
       sourceCodeAnchors = new Set();
       uiSourceCode[Components.Linkifier._sourceCodeAnchors] = sourceCodeAnchors;
     }
     sourceCodeAnchors.add(anchor);
   }
 
   /**
    * @param {!Element} anchor
    */
   static _unbindUILocation(anchor) {
-    if (!anchor[Components.Linkifier._uiLocationSymbol])
+    var info = Components.Linkifier._linkInfo(anchor);
+    if (!info.uiLocation)
       return;
 
-    var uiSourceCode = anchor[Components.Linkifier._uiLocationSymbol].uiSourceCode;
-    anchor[Components.Linkifier._uiLocationSymbol] = null;
+    var uiSourceCode = info.uiLocation.uiSourceCode;
+    info.uiLocation = null;
     var sourceCodeAnchors = uiSourceCode[Components.Linkifier._sourceCodeAnchors];
     if (sourceCodeAnchors)
       sourceCodeAnchors.delete(anchor);
   }
 
   /**
    * @param {!SDK.Target} target
    * @param {string} scriptId
    * @param {number} lineNumber
    * @param {number=} columnNumber
@@ skipping 24 matching lines @@
 
   /**
    * @override
    * @param {!SDK.Target} target
    */
   targetRemoved(target) {
     var locationPool = /** @type {!Bindings.LiveLocationPool} */ (this._locationPoolByTarget.remove(target));
     locationPool.disposeAll();
     var anchors = this._anchorsByTarget.remove(target);
     for (var anchor of anchors) {
-      delete anchor[Components.Linkifier._liveLocationSymbol];
+      var info = Components.Linkifier._linkInfo(anchor);
+      info.liveLocation = null;
       Components.Linkifier._unbindUILocation(anchor);
-      var fallbackAnchor = anchor[Components.Linkifier._fallbackAnchorSymbol];
-      if (fallbackAnchor) {
-        anchor.href = fallbackAnchor.href;
-        anchor.lineNumber = fallbackAnchor.lineNumber;
-        anchor.title = fallbackAnchor.title;
-        anchor.className = fallbackAnchor.className;
-        anchor.textContent = fallbackAnchor.textContent;
-        delete anchor[Components.Linkifier._fallbackAnchorSymbol];
+      if (info.fallback) {
+        anchor.href = info.fallback.href;
+        anchor.title = info.fallback.title;
+        anchor.className = info.fallback.className;
+        anchor.textContent = info.fallback.textContent;
+        anchor[Components.Linkifier._infoSymbol] = info.fallback[Components.Linkifier._infoSymbol];
       }
     }
   }
 
   /**
    * @param {?SDK.Target} target
    * @param {?string} scriptId
    * @param {string} sourceURL
    * @param {number} lineNumber
    * @param {number=} columnNumber
    * @param {string=} classes
    * @return {?Element}
    */
   maybeLinkifyScriptLocation(target, scriptId, sourceURL, lineNumber, columnNumber, classes) {
     var fallbackAnchor =
         sourceURL ? Components.Linkifier.linkifyURL(sourceURL, undefined, classes, lineNumber, columnNumber) : null;
     if (!target || target.isDisposed())
       return fallbackAnchor;
     var debuggerModel = SDK.DebuggerModel.fromTarget(target);
     if (!debuggerModel)
       return fallbackAnchor;
 
     var rawLocation =
         (scriptId ? debuggerModel.createRawLocationByScriptId(scriptId, lineNumber, columnNumber || 0) : null) ||
         debuggerModel.createRawLocationByURL(sourceURL, lineNumber, columnNumber || 0);
     if (!rawLocation)
       return fallbackAnchor;
 
-    var anchor = this._createAnchor(classes);
-    var liveLocation = Bindings.debuggerWorkspaceBinding.createLiveLocation(
+    var anchor = Components.Linkifier._createLink('', classes || '');
+    var info = Components.Linkifier._linkInfo(anchor);
+    if (this._useLinkDecorator)
+      info.enableDecorator = true;

[lushnikov, 2016/11/21 20:14:07]

here and below: just info.enableDecorator = this._useLinkDecorator;

[dgozman, 2016/11/21 22:37:47]

Done.

+    info.fallback = fallbackAnchor;
+    info.liveLocation = Bindings.debuggerWorkspaceBinding.createLiveLocation(
         rawLocation, this._updateAnchor.bind(this, anchor),
         /** @type {!Bindings.LiveLocationPool} */ (this._locationPoolByTarget.get(rawLocation.target())));
+
     var anchors = /** @type {!Array<!Element>} */ (this._anchorsByTarget.get(rawLocation.target()));
     anchors.push(anchor);
-    anchor[Components.Linkifier._liveLocationSymbol] = liveLocation;
-    anchor[Components.Linkifier._fallbackAnchorSymbol] = fallbackAnchor;
     return anchor;
   }
 
   /**
    * @param {?SDK.Target} target
    * @param {?string} scriptId
    * @param {string} sourceURL
    * @param {number} lineNumber
    * @param {number=} columnNumber
    * @param {string=} classes
@@ skipping 40 matching lines @@
     var fallbackAnchor =
         Components.Linkifier.linkifyURL(topFrame.url, undefined, classes, topFrame.lineNumber, topFrame.columnNumber);
     if (target.isDisposed())
       return fallbackAnchor;
 
     var debuggerModel = SDK.DebuggerModel.fromTarget(target);
     var rawLocations = debuggerModel.createRawLocationsByStackTrace(stackTrace);
     if (rawLocations.length === 0)
       return fallbackAnchor;
 
-    var anchor = this._createAnchor(classes);
-    var liveLocation = Bindings.debuggerWorkspaceBinding.createStackTraceTopFrameLiveLocation(
+    var anchor = Components.Linkifier._createLink('', classes || '');
+    var info = Components.Linkifier._linkInfo(anchor);
+    if (this._useLinkDecorator)
+      info.enableDecorator = true;
+    info.fallback = fallbackAnchor;
+    info.liveLocation = Bindings.debuggerWorkspaceBinding.createStackTraceTopFrameLiveLocation(
         rawLocations, this._updateAnchor.bind(this, anchor),
         /** @type {!Bindings.LiveLocationPool} */ (this._locationPoolByTarget.get(target)));
+
     var anchors = /** @type {!Array<!Element>} */ (this._anchorsByTarget.get(target));
     anchors.push(anchor);
-    anchor[Components.Linkifier._liveLocationSymbol] = liveLocation;
-    anchor[Components.Linkifier._fallbackAnchorSymbol] = fallbackAnchor;
     return anchor;
   }
 
   /**
    * @param {!SDK.CSSLocation} rawLocation
    * @param {string=} classes
    * @return {!Element}
    */
   linkifyCSSLocation(rawLocation, classes) {
-    var anchor = this._createAnchor(classes);
-    var liveLocation = Bindings.cssWorkspaceBinding.createLiveLocation(
+    var anchor = Components.Linkifier._createLink('', classes || '');

[lushnikov, 2016/11/21 20:14:07]

so what is "anchor" and what is "link"? Do we differentiate between them?

[dgozman, 2016/11/21 22:37:47]

Same thing. I just think that linkifier should work with "links", but changing
every place is not worth it :-)

+    var info = Components.Linkifier._linkInfo(anchor);
+    if (this._useLinkDecorator)
+      info.enableDecorator = true;
+    info.liveLocation = Bindings.cssWorkspaceBinding.createLiveLocation(
         rawLocation, this._updateAnchor.bind(this, anchor),
         /** @type {!Bindings.LiveLocationPool} */ (this._locationPoolByTarget.get(rawLocation.target())));
+
     var anchors = /** @type {!Array<!Element>} */ (this._anchorsByTarget.get(rawLocation.target()));
     anchors.push(anchor);
-    anchor[Components.Linkifier._liveLocationSymbol] = liveLocation;
     return anchor;
   }
 
   /**
    * @param {!SDK.Target} target
    * @param {!Element} anchor
    */
   disposeAnchor(target, anchor) {
     Components.Linkifier._unbindUILocation(anchor);
-    delete anchor[Components.Linkifier._fallbackAnchorSymbol];
-    var liveLocation = anchor[Components.Linkifier._liveLocationSymbol];
-    if (liveLocation)
-      liveLocation.dispose();
-    delete anchor[Components.Linkifier._liveLocationSymbol];
-  }
-
-  /**
-   * @param {string=} classes
-   * @return {!Element}
-   */
-  _createAnchor(classes) {
-    var anchor = createElement('a');
-    if (this._useLinkDecorator)
-      anchor[Components.Linkifier._enableDecoratorSymbol] = true;
-    anchor.className = (classes || '') + ' webkit-html-resource-link';
-
-    /**
-     * @param {!Event} event
-     */
-    function clickHandler(event) {
-      var uiLocation = anchor[Components.Linkifier._uiLocationSymbol];
-      if (!uiLocation)
-        return;
-
-      event.consume(true);
-      if (Components.Linkifier.handleLink(uiLocation.uiSourceCode.url(), uiLocation.lineNumber))
-        return;
-      Common.Revealer.reveal(uiLocation);
+    var info = Components.Linkifier._linkInfo(anchor);
+    info.fallback = null;
+    if (info.liveLocation) {
+      info.liveLocation.dispose();
+      info.liveLocation = null;
     }
-    anchor.addEventListener('click', clickHandler, false);
-    return anchor;
   }
 
   reset() {
     for (var target of this._anchorsByTarget.keysArray()) {
       this.targetRemoved(target);
       this.targetAdded(target);
     }
   }
 
   dispose() {
@@ skipping 25 matching lines @@
       titleText += ':' + (uiLocation.lineNumber + 1);
     anchor.title = titleText;
     anchor.classList.toggle('webkit-html-blackbox-link', liveLocation.isBlackboxed());
     Components.Linkifier._updateLinkDecorations(anchor);
   }
 
   /**
    * @param {!Element} anchor
    */
   static _updateLinkDecorations(anchor) {
-    if (!anchor[Components.Linkifier._enableDecoratorSymbol])
+    var info = Components.Linkifier._linkInfo(anchor);
+    if (!info.enableDecorator)

[lushnikov, 2016/11/21 20:14:07]

if (!info || !info.enableDecorator)

[dgozman, 2016/11/21 22:37:47]

Done.

       return;
-    var uiLocation = anchor[Components.Linkifier._uiLocationSymbol];
-    if (!Components.Linkifier._decorator || !uiLocation)
+    if (!Components.Linkifier._decorator || !info.uiLocation)
       return;
-    var icon = anchor[Components.Linkifier._iconSymbol];
-    if (icon)
-      icon.remove();
-    icon = Components.Linkifier._decorator.linkIcon(uiLocation.uiSourceCode);
+    if (info.icon)
+      anchor.removeChild(info.icon);
+    var icon = Components.Linkifier._decorator.linkIcon(info.uiLocation.uiSourceCode);
     if (icon) {
       icon.style.setProperty('margin-right', '2px');
       anchor.insertBefore(icon, anchor.firstChild);
     }
-    anchor[Components.Linkifier._iconSymbol] = icon;
+    info.icon = icon;
   }
 
   /**
    * @param {string} url
    * @param {string=} text
    * @param {string=} className
    * @param {number=} lineNumber
    * @param {number=} columnNumber
    * @return {!Element}
    */
   static linkifyURL(url, text, className, lineNumber, columnNumber) {
-    if (!url) {
+    if (!url || url.trim().toLowerCase().startsWith('javascript:')) {

[lushnikov, 2016/11/21 20:14:07]

this drops link.lineNumber and link.columnNumber which you wanted to keep

[dgozman, 2016/11/21 22:37:47]

Don't need them anymore, since we don't use external links in linkifier since 3
patches before.

       var element = createElementWithClass('span', className);
-      element.textContent = text || Common.UIString('(unknown)');
+      element.textContent = text || url || Common.UIString('(unknown)');
       return element;
     }
 
     var linkText = text || Bindings.displayNameForURL(url);
     if (typeof lineNumber === 'number' && !text)
       linkText += ':' + (lineNumber + 1);
+    var title = linkText !== url ? url : '';
+    var link = Components.Linkifier._createLink(linkText.trimMiddle(150), className || '', title, url);
+    var info = Components.Linkifier._linkInfo(link);
+    if (typeof lineNumber === 'number')
+      info.lineNumber = lineNumber;
+    if (typeof columnNumber === 'number')
+      info.columnNumber = columnNumber;
+    return link;
+  }
 
+  /**
+   * @param {!Object} revealable
+   * @param {string} text
+   * @param {string=} fallbackHref
+   * @return {!Element}
+   */
+  static linkifyRevealable(revealable, text, fallbackHref) {
+    var link = Components.Linkifier._createLink(
+        text.trimMiddle(Components.Linkifier.MaxLengthForDisplayedURLs), '', undefined, fallbackHref);
+    Components.Linkifier._linkInfo(link).revealable = revealable;
+    return link;
+  }
+
+  /**
+   * @param {string} text
+   * @param {string} className
+   * @param {string=} title
+   * @param {string=} href
+   * @returns{!Element}
+   */
+  static _createLink(text, className, title, href) {
     var link = createElementWithClass('a', className);
-    if (!url.trim().toLowerCase().startsWith('javascript:')) {
-      link.href = url;
-      link.classList.add('webkit-html-resource-link');
-      link[Components.Linkifier._linkSymbol] = true;
-      link.addEventListener('click', Components.Linkifier._handleClick, false);
-    }
-    link.title = linkText !== url ? url : '';
-    link.textContent = linkText.trimMiddle(150);
-    link.lineNumber = lineNumber;
-    link.columnNumber = columnNumber;
+    link.classList.add('webkit-html-resource-link');
+    if (title)
+      link.title = title;
+    if (href)
+      link.href = href;
+    link.textContent = text;
+    link[Components.Linkifier._infoSymbol] = {
+      icon: null,
+      enableDecorator: false,
+      uiLocation: null,
+      liveLocation: null,
+      url: href || null,
+      lineNumber: null,
+      columnNumber: null,
+      revealable: null,
+      fallback: null
+    };
+    link.addEventListener('click', Components.Linkifier._handleClick, false);
     return link;
   }
 
   /**
+   * @param {?Element} link
+   * @return {?Components._LinkInfo}
+   */
+  static _linkInfo(link) {
+    return /** @type {?Components._LinkInfo} */ ((link && link[Components.Linkifier._infoSymbol]) || null);

[lushnikov, 2016/11/21 20:14:07]

nit: we tend to not use '&&' in this way.

return link ? link[Components.Linkifier._info] || null : null;

[dgozman, 2016/11/21 22:37:47]

Done.

+  }
+
+  /**
    * @param {!Event} event
    */
   static _handleClick(event) {
     var link = /** @type {!Element} */ (event.currentTarget);
     event.consume(true);
     if (link.preventFollow || UI.isBeingEdited(/** @type {!Node} */ (event.target)))
       return;
-    if (Components.openAnchorLocationRegistry.dispatch({url: link.href, lineNumber: link.lineNumber}))
+    var info = Components.Linkifier._linkInfo(link);
+    if (info.uiLocation &&
+        Components.openAnchorLocationRegistry.dispatch(
+            {url: info.uiLocation.uiSourceCode.url(), lineNumber: info.uiLocation.lineNumber}))
       return;
+    if (info.url && Components.openAnchorLocationRegistry.dispatch({url: info.url, lineNumber: info.lineNumber}))
+      return;
+    if (info.revealable) {
+      Common.Revealer.reveal(info.revealable);
+      return;
+    }
     var actions = Components.Linkifier._linkActions(link);
     if (actions.length)
       actions[0].handler.call(null);
   }
 
   /**
    * @param {?Element} link
    * @return {!Array<{title: string, handler: function()}>}
    */
   static _linkActions(link) {
-    var url = null;
+    var info = Components.Linkifier._linkInfo(link);
+    if (info && info.revealable)

[lushnikov, 2016/11/21 20:14:07]

let's not bail-out

[dgozman, 2016/11/21 22:37:47]

Done.

+      return [];
+    var url = '';
     var uiLocation = null;
-    var isLiveLink = false;
-    if (link && link[Components.Linkifier._uiLocationSymbol]) {
-      uiLocation = /** @type {!Workspace.UILocation} */ (link[Components.Linkifier._uiLocationSymbol]);
+    if (info && info.uiLocation) {
+      uiLocation = info.uiLocation;
       url = uiLocation.uiSourceCode.contentURL();
-      isLiveLink = true;
-    } else if (link && link.href) {
-      url = link.href;
+    } else if (info && info.url) {
+      url = info.url;
       var uiSourceCode = Workspace.workspace.uiSourceCodeForURL(url);
-      uiLocation = uiSourceCode ? uiSourceCode.uiLocation(link.lineNumber || 0, link.columnNumber || 0) : null;
-      isLiveLink = false;
+      uiLocation = uiSourceCode ? uiSourceCode.uiLocation(info.lineNumber || 0, info.columnNumber || 0) : null;
     } else {
       return [];
     }
 
     var result = [];
     if (uiLocation)
       result.push({title: Common.UIString('Open'), handler: () => Common.Revealer.reveal(uiLocation)});
 
     var resource = Bindings.resourceForURL(url);
     if (resource) {
       result.push({
         title: Common.UIString.capitalize('Open ^link in Application ^panel'),
         handler: () => Common.Revealer.reveal(resource)
       });
     }
 
     var request = SDK.NetworkLog.requestForURL(url);
     if (request) {
       result.push({
         title: Common.UIString.capitalize('Open ^request in Network ^panel'),
         handler: () => Common.Revealer.reveal(request)
       });
     }
 
-    if (resource || !isLiveLink) {
+    if (resource || info.url) {
       result.push({title: UI.openLinkExternallyLabel(), handler: () => InspectorFrontendHost.openInNewTab(url)});
       result.push({title: UI.copyLinkAddressLabel(), handler: () => InspectorFrontendHost.copyText(url)});
     }
 
     return result;
   }
 };
 
 /** @type {!Set<!Components.Linkifier>} */
 Components.Linkifier._instances = new Set();
 /** @type {?Components.LinkDecorator} */
 Components.Linkifier._decorator = null;
 
-Components.Linkifier._iconSymbol = Symbol('Linkifier.iconSymbol');
-Components.Linkifier._enableDecoratorSymbol = Symbol('Linkifier.enableIconsSymbol');
 Components.Linkifier._sourceCodeAnchors = Symbol('Linkifier.anchors');
-Components.Linkifier._uiLocationSymbol = Symbol('uiLocation');
-Components.Linkifier._fallbackAnchorSymbol = Symbol('fallbackAnchor');
-Components.Linkifier._liveLocationSymbol = Symbol('liveLocation');
-Components.Linkifier._linkSymbol = Symbol('Linkifier.link');
+Components.Linkifier._infoSymbol = Symbol('Linkifier.info');
+
+/**
+ * @typedef {{
+ *     icon: ?UI.Icon,
+ *     enableDecorator: boolean,
+ *     uiLocation: ?Workspace.UILocation,
+ *     liveLocation: ?Bindings.LiveLocation,
+ *     url: ?string,
+ *     lineNumber: ?number,
+ *     columnNumber: ?number,
+ *     revealable: ?Object,
+ *     fallback: ?Element
+ * }}
+ */
+Components._LinkInfo;
 
 /**
  * The maximum number of characters to display in a URL.
  * @const
  * @type {number}
  */
 Components.Linkifier.MaxLengthForDisplayedURLs = 150;
 
 /**
  * The maximum length before strings are considered too long for finding URLs.
@@ skipping 99 matching lines @@
  */
 Components.Linkifier.LinkContextMenuProvider = class {
   /**
    * @override
    * @param {!Event} event
    * @param {!UI.ContextMenu} contextMenu
    * @param {!Object} target
    */
   appendApplicableItems(event, contextMenu, target) {
     var targetNode = /** @type {!Node} */ (target);
-    while (targetNode && !targetNode[Components.Linkifier._linkSymbol] &&
-           !targetNode[Components.Linkifier._uiLocationSymbol])
+    while (targetNode && !targetNode[Components.Linkifier._infoSymbol])
       targetNode = targetNode.parentNodeOrShadowHost();
     var link = /** @type {?Element} */ (targetNode);
     var actions = Components.Linkifier._linkActions(link);
     for (var action of actions)
       contextMenu.appendItem(action.title, action.handler);
   }
 };