DevTools: introduce sync checkmarks icons in StylesSidebarPane.

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 24 matching lines @@
 WebInspector.Linkifier = class {
   /**
    * @param {number=} maxLengthForDisplayedURLs
    */
   constructor(maxLengthForDisplayedURLs) {
     this._maxLength = maxLengthForDisplayedURLs || WebInspector.Linkifier.MaxLengthForDisplayedURLs;
     /** @type {!Map<!WebInspector.Target, !Array<!Element>>} */
     this._anchorsByTarget = new Map();
     /** @type {!Map<!WebInspector.Target, !WebInspector.LiveLocationPool>} */
     this._locationPoolByTarget = new Map();
+    WebInspector.Linkifier._instances.add(this);
     WebInspector.targetManager.observeTargets(this);
   }
 
   /**
+   * @param {!WebInspector.LinkifierIconProvider} iconProvider
+   */
+  static registerIconProvider(iconProvider) {

[dgozman, 2016/11/09 18:58:48]

If you only support a single one, call it setDecorator.

[lushnikov, 2016/11/09 21:46:51]

Done.

+    console.assert(!WebInspector.Linkifier._iconProvider, 'Cannot re-register icon provider.');
+    WebInspector.Linkifier._iconProvider = iconProvider;
+    iconProvider.addEventListener(WebInspector.LinkifierIconProvider.Events.IconChanged, onIconChanged);
+    for (var linkifier of WebInspector.Linkifier._instances)
+      linkifier._updateAllAnchorIcons();
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    function onIconChanged(event) {
+      var uiSourceCode = /** @type {!WebInspector.UISourceCode} */(event.data);
+      var anchors = uiSourceCode[WebInspector.Linkifier._sourceCodeAnchors] || [];
+      for (var anchor of anchors)
+        WebInspector.Linkifier._updateAnchorIcon(anchor);
+    }
+  }
+
+  _updateAllAnchorIcons() {
+    for (var target of this._anchorsByTarget.keysArray()) {
+      var anchors = this._anchorsByTarget.get(target);
+      for (var anchor of anchors)
+        WebInspector.Linkifier._updateAnchorIcon(anchor);
+    }
+  }
+
+  /**
    * @param {?WebInspector.Linkifier.LinkHandler} handler
    */
   static setLinkHandler(handler) {
     WebInspector.Linkifier._linkHandler = handler;
   }
 
   /**
    * @param {string} url
    * @param {number=} lineNumber
    * @return {boolean}
@@ skipping 15 matching lines @@
    */
   static linkifyUsingRevealer(revealable, text, fallbackHref, fallbackLineNumber, title, classes) {
     var a = createElement('a');
     a.className = (classes || '') + ' webkit-html-resource-link';
     a.textContent = text.trimMiddle(WebInspector.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 && WebInspector.Linkifier.handleLink(fallbackHref, fallbackLineNumber))
         return;
 
       WebInspector.Revealer.reveal(this);
     }
     a.addEventListener('click', clickHandler.bind(revealable), false);
     return a;
   }
 
   /**
    * @param {!Element} anchor
    * @return {?WebInspector.UILocation} uiLocation
    */
   static uiLocationByAnchor(anchor) {
     return anchor[WebInspector.Linkifier._uiLocationSymbol];
   }
 
   /**
+   * @param {!Element} anchor
+   * @param {?WebInspector.UILocation} uiLocation
+   */
+  static _bindAnchorToUILocation(anchor, uiLocation) {
+    anchor[WebInspector.Linkifier._uiLocationSymbol] = uiLocation;
+    if (!uiLocation)
+      return;
+    var uiSourceCode = uiLocation.uiSourceCode;
+    var sourceCodeAnchors = uiSourceCode[WebInspector.Linkifier._sourceCodeAnchors];
+    if (!sourceCodeAnchors) {
+      sourceCodeAnchors = new Set();
+      uiSourceCode[WebInspector.Linkifier._sourceCodeAnchors] = sourceCodeAnchors;
+    }
+    sourceCodeAnchors.add(anchor);
+  }
+
+  /**
+   * @param {!Element} anchor
+   */
+  static _unbindAnchorFromUILocation(anchor) {
+    if (!anchor[WebInspector.Linkifier._uiLocationSymbol])
+      return;
+
+    var uiSourceCode = anchor[WebInspector.Linkifier._uiLocationSymbol].uiSourceCode;
+    var sourceCodeAnchors = uiSourceCode[WebInspector.Linkifier._sourceCodeAnchors];
+    if (sourceCodeAnchors)
+      sourceCodeAnchors.delete(anchor);
+  }
+
+  /**
    * @param {!WebInspector.Target} target
    * @param {string} scriptId
    * @param {number} lineNumber
    * @param {number=} columnNumber
    * @return {string}
    */
   static liveLocationText(target, scriptId, lineNumber, columnNumber) {
     var debuggerModel = WebInspector.DebuggerModel.fromTarget(target);
     if (!debuggerModel)
       return '';
@@ skipping 19 matching lines @@
   /**
    * @override
    * @param {!WebInspector.Target} target
    */
   targetRemoved(target) {
     var locationPool = /** @type {!WebInspector.LiveLocationPool} */ (this._locationPoolByTarget.remove(target));
     locationPool.disposeAll();
     var anchors = this._anchorsByTarget.remove(target);
     for (var anchor of anchors) {
       delete anchor[WebInspector.Linkifier._liveLocationSymbol];
+      WebInspector.Linkifier._unbindAnchorFromUILocation(anchor);
       var fallbackAnchor = anchor[WebInspector.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[WebInspector.Linkifier._fallbackAnchorSymbol];
       }
     }
@@ skipping 101 matching lines @@
     anchor[WebInspector.Linkifier._fallbackAnchorSymbol] = fallbackAnchor;
     return anchor;
   }
 
   /**
    * @param {!WebInspector.CSSLocation} rawLocation
    * @param {string=} classes
    * @return {!Element}
    */
   linkifyCSSLocation(rawLocation, classes) {
-    var anchor = this._createAnchor(classes);
+    var anchor = this._createAnchor(classes, true);

[dgozman, 2016/11/09 18:58:48]

This should be a parameter of linkifier.

[lushnikov, 2016/11/09 21:46:51]

Done.

     var liveLocation = WebInspector.cssWorkspaceBinding.createLiveLocation(
         rawLocation, this._updateAnchor.bind(this, anchor),
         /** @type {!WebInspector.LiveLocationPool} */ (this._locationPoolByTarget.get(rawLocation.target())));
     var anchors = /** @type {!Array<!Element>} */ (this._anchorsByTarget.get(rawLocation.target()));
     anchors.push(anchor);
     anchor[WebInspector.Linkifier._liveLocationSymbol] = liveLocation;
     return anchor;
   }
 
   /**
    * @param {!WebInspector.Target} target
    * @param {!Element} anchor
    */
   disposeAnchor(target, anchor) {
-    delete anchor[WebInspector.Linkifier._uiLocationSymbol];
+    WebInspector.Linkifier._unbindAnchorFromUILocation(anchor);
     delete anchor[WebInspector.Linkifier._fallbackAnchorSymbol];
     var liveLocation = anchor[WebInspector.Linkifier._liveLocationSymbol];
     if (liveLocation)
       liveLocation.dispose();
     delete anchor[WebInspector.Linkifier._liveLocationSymbol];
   }
 
   /**
    * @param {string=} classes
+   * @param {boolean=} enableIconDecorations
    * @return {!Element}
    */
-  _createAnchor(classes) {
+  _createAnchor(classes, enableIconDecorations) {
     var anchor = createElement('a');
+    if (enableIconDecorations)
+      anchor[WebInspector.Linkifier._enableIconsSymbol] = true;
     anchor.className = (classes || '') + ' webkit-html-resource-link';
 
     /**
      * @param {!Event} event
      */
     function clickHandler(event) {
       var uiLocation = anchor[WebInspector.Linkifier._uiLocationSymbol];
       if (!uiLocation)
         return;
 
@@ skipping 10 matching lines @@
     for (var target of this._anchorsByTarget.keysArray()) {
       this.targetRemoved(target);
       this.targetAdded(target);
     }
   }
 
   dispose() {
     for (var target of this._anchorsByTarget.keysArray())
       this.targetRemoved(target);
     WebInspector.targetManager.unobserveTargets(this);
+    WebInspector.Linkifier._instances.delete(this);
   }
 
   /**
    * @param {!Element} anchor
    * @param {!WebInspector.LiveLocation} liveLocation
    */
   _updateAnchor(anchor, liveLocation) {
+    WebInspector.Linkifier._unbindAnchorFromUILocation(anchor);
     var uiLocation = liveLocation.uiLocation();
+    WebInspector.Linkifier._bindAnchorToUILocation(anchor, uiLocation);
     if (!uiLocation)
       return;
-    anchor[WebInspector.Linkifier._uiLocationSymbol] = uiLocation;
-    this._formatLiveAnchor(anchor, uiLocation, liveLocation.isBlackboxed());
-  }
 
-  /**
-   * @param {!Element} anchor
-   * @param {!WebInspector.UILocation} uiLocation
-   * @param {boolean} isBlackboxed
-   */
-  _formatLiveAnchor(anchor, uiLocation, isBlackboxed) {
     var text = uiLocation.linkText();
     text = text.replace(/([a-f0-9]{7})[a-f0-9]{13}[a-f0-9]*/g, '$1\u2026');
     if (this._maxLength)
       text = text.trimMiddle(this._maxLength);
     anchor.textContent = text;
 
     var titleText = uiLocation.uiSourceCode.url();
     if (typeof uiLocation.lineNumber === 'number')
       titleText += ':' + (uiLocation.lineNumber + 1);
     anchor.title = titleText;
+    anchor.classList.toggle('webkit-html-blackbox-link', liveLocation.isBlackboxed());
+    WebInspector.Linkifier._updateAnchorIcon(anchor);
+  }
 
-    anchor.classList.toggle('webkit-html-blackbox-link', isBlackboxed);
+  /**
+   * @param {!Element} anchor
+   */
+  static _updateAnchorIcon(anchor) {
+    if (!anchor[WebInspector.Linkifier._enableIconsSymbol])
+      return;
+    var uiLocation = anchor[WebInspector.Linkifier._uiLocationSymbol];
+    if (!WebInspector.Linkifier._iconProvider || !uiLocation)
+      return;
+    var iconType = WebInspector.Linkifier._iconProvider.iconType(uiLocation.uiSourceCode);
+    var icon = anchor.querySelector('span[is=ui-icon]');
+    if (!iconType) {
+      if (icon)
+        icon.setIconType('');
+      return;
+    }
+
+    if (!icon) {
+      icon = WebInspector.Icon.create(iconType);
+      icon.style.setProperty('margin-right', '2px');
+      anchor.insertBefore(icon, anchor.firstChild);
+    } else {
+      icon.setIconType(iconType);
+    }
   }
 };
 
+/** @type {!Set<!WebInspector.Linkifier>} */
+WebInspector.Linkifier._instances = new Set();
+/** @type {?WebInspector.LinkifierIconProvider} */
+WebInspector.Linkifier._iconProvider = null;
+
+WebInspector.Linkifier._enableIconsSymbol = Symbol('Linkifier.enableIconsSymbol');
+WebInspector.Linkifier._sourceCodeAnchors = Symbol('Linkifier.anchors');
 WebInspector.Linkifier._uiLocationSymbol = Symbol('uiLocation');
 WebInspector.Linkifier._fallbackAnchorSymbol = Symbol('fallbackAnchor');
 WebInspector.Linkifier._liveLocationSymbol = Symbol('liveLocation');
 
 /**
  * The maximum number of characters to display in a URL.
  * @const
  * @type {number}
  */
 WebInspector.Linkifier.MaxLengthForDisplayedURLs = 150;
@@ skipping 12 matching lines @@
 
 WebInspector.Linkifier.LinkHandler.prototype = {
   /**
    * @param {string} url
    * @param {number=} lineNumber
    * @return {boolean}
    */
   handleLink: function(url, lineNumber) {}
 };
 
+/**
+ * @extends {WebInspector.EventTarget}
+ * @interface
+ */
+WebInspector.LinkifierIconProvider = function() {};

[dgozman, 2016/11/09 18:58:48]

LinkDecorator

[lushnikov, 2016/11/09 21:46:51]

Done.

+
+WebInspector.LinkifierIconProvider.prototype = {
+  /**
+   * @param {!WebInspector.UISourceCode} uiSourceCode
+   * @return {string}

[lushnikov, 2016/11/09 18:23:28]

it feels daunting to return a string here, but if we want a tooltip, then this
should be the
WI.Icon instance

[dgozman, 2016/11/09 18:58:48]

Let's go with WI.Icon.

[lushnikov, 2016/11/09 21:46:51]

Done.

+   */
+  iconType: function(uiSourceCode) {}

[dgozman, 2016/11/09 18:58:48]

linkIcon

[lushnikov, 2016/11/09 21:46:51]

Done.

+};
+
+WebInspector.LinkifierIconProvider.Events = {
+  IconChanged: Symbol('IconChanged')

[dgozman, 2016/11/09 18:58:48]

LinkIconChanged

[lushnikov, 2016/11/09 21:46:51]

Done.

+};
 
 /**
  * @param {string} string
  * @param {function(string,string,number=,number=):!Node} linkifier
  * @return {!DocumentFragment}
  */
 WebInspector.linkifyStringAsFragmentWithCustomLinkifier = function(string, linkifier) {
   var container = createDocumentFragment();
   var linkStringRegEx =
       /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/|data:|www\.)[\w$\-_+*'=\|\/\\(){}[\]^%@&#~,:;.!?]{2,}[\w$\-_+*=\|\/\\({^%@&#~]/;
@@ skipping 82 matching lines @@
 
 /**
  * @param {!WebInspector.NetworkRequest} request
  * @return {!Element}
  */
 WebInspector.linkifyRequestAsNode = function(request) {
   var anchor = WebInspector.linkifyURLAsNode(request.url);
   anchor.requestId = request.requestId;
   return anchor;
 };