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 17 matching lines @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @implements {WebInspector.TargetManager.Observer}
  * @unrestricted
  */
 WebInspector.Linkifier = class {
   /**
    * @param {number=} maxLengthForDisplayedURLs
+   * @param {boolean=} useLinkDecorator
    */
-  constructor(maxLengthForDisplayedURLs) {
+  constructor(maxLengthForDisplayedURLs, useLinkDecorator) {
     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();
+    this._useLinkDecorator = true;
+    WebInspector.Linkifier._instances.add(this);
     WebInspector.targetManager.observeTargets(this);
   }
 
   /**
+   * @param {!WebInspector.LinkDecorator} decorator
+   */
+  static setLinkDecorator(decorator) {
+    console.assert(!WebInspector.Linkifier._decorator, 'Cannot re-register link decorator.');
+    WebInspector.Linkifier._decorator = decorator;
+    decorator.addEventListener(WebInspector.LinkDecorator.Events.LinkIconChanged, onLinkIconChanged);
+    for (var linkifier of WebInspector.Linkifier._instances)
+      linkifier._updateAllAnchorDecorations();
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    function onLinkIconChanged(event) {
+      var uiSourceCode = /** @type {!WebInspector.UISourceCode} */(event.data);
+      var links = uiSourceCode[WebInspector.Linkifier._sourceCodeAnchors] || [];
+      for (var link of links)
+        WebInspector.Linkifier._updateLinkDecorations(link);
+    }
+  }
+
+  _updateAllAnchorDecorations() {
+    for (var anchors of this._anchorsByTarget.values()) {
+      for (var anchor of anchors)
+        WebInspector.Linkifier._updateLinkDecorations(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 _bindUILocation(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 _unbindUILocation(anchor) {
+    if (!anchor[WebInspector.Linkifier._uiLocationSymbol])
+      return;
+
+    var uiSourceCode = anchor[WebInspector.Linkifier._uiLocationSymbol].uiSourceCode;
+    anchor[WebInspector.Linkifier._uiLocationSymbol] = null;
+    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._unbindUILocation(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 116 matching lines @@
     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._unbindUILocation(anchor);
     delete anchor[WebInspector.Linkifier._fallbackAnchorSymbol];
     var liveLocation = anchor[WebInspector.Linkifier._liveLocationSymbol];
     if (liveLocation)
       liveLocation.dispose();
     delete anchor[WebInspector.Linkifier._liveLocationSymbol];
   }
 
   /**
    * @param {string=} classes
    * @return {!Element}
    */
   _createAnchor(classes) {
     var anchor = createElement('a');
+    if (this._useLinkDecorator)
+      anchor[WebInspector.Linkifier._enableDecoratorSymbol] = 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._unbindUILocation(anchor);
     var uiLocation = liveLocation.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) {
+    WebInspector.Linkifier._bindUILocation(anchor, uiLocation);
     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._updateLinkDecorations(anchor);
+  }
 
-    anchor.classList.toggle('webkit-html-blackbox-link', isBlackboxed);
+  /**
+   * @param {!Element} anchor
+   */
+  static _updateLinkDecorations(anchor) {
+    if (!anchor[WebInspector.Linkifier._enableDecoratorSymbol])
+      return;
+    var uiLocation = anchor[WebInspector.Linkifier._uiLocationSymbol];
+    if (!WebInspector.Linkifier._decorator || !uiLocation)
+      return;
+    var icon = anchor[WebInspector.Linkifier._iconSymbol];
+    if (icon)
+      icon.remove();
+    icon = WebInspector.Linkifier._decorator.linkIcon(uiLocation.uiSourceCode);
+    if (icon) {
+      icon.style.setProperty('margin-right', '2px');
+      anchor.insertBefore(icon, anchor.firstChild);
+    }
+    anchor[WebInspector.Linkifier._iconSymbol] = icon;
   }
 };
 
+/** @type {!Set<!WebInspector.Linkifier>} */
+WebInspector.Linkifier._instances = new Set();
+/** @type {?WebInspector.LinkDecorator} */
+WebInspector.Linkifier._decorator = null;
+
+WebInspector.Linkifier._iconSymbol = Symbol('Linkifier.iconSymbol');
+WebInspector.Linkifier._enableDecoratorSymbol = 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.LinkDecorator = function() {};
+
+WebInspector.LinkDecorator.prototype = {
+  /**
+   * @param {!WebInspector.UISourceCode} uiSourceCode
+   * @return {?WebInspector.Icon}
+   */
+  linkIcon: function(uiSourceCode) {}
+};
+
+WebInspector.LinkDecorator.Events = {
+  LinkIconChanged: Symbol('LinkIconChanged')
+};
 
 /**
  * @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;
 };