DevTools: [Persistence] introduce badged icons instead of checkmarks

third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.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:
  *
  * 1. Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *
@@ skipping 923 matching lines @@
    * @param {!Sources.NavigatorUISourceCodeTreeNode} node
    */
   constructor(navigatorView, uiSourceCode, title, node) {
     super('', false);
     this._nodeType = Sources.NavigatorView.Types.File;
     this._node = node;
     this.title = title;
     this.listItemElement.classList.add(
         'navigator-' + uiSourceCode.contentType().name() + '-tree-item', 'navigator-file-tree-item');
     this.tooltip = uiSourceCode.url();
-    var iconType = 'largeicon-navigator-file';
-    if (uiSourceCode.contentType() === Common.resourceTypes.Snippet)
-      iconType = 'largeicon-navigator-snippet';
-    this.setLeadingIcons([UI.Icon.create(iconType, 'icon')]);
-
     this._navigatorView = navigatorView;
     this._uiSourceCode = uiSourceCode;
+    this.updateIcon();
+  }
+
+  updateIcon() {
+    var binding = Persistence.persistence.binding(this._uiSourceCode);
+    if (binding && Runtime.experiments.isEnabled('persistence2')) {
+      var icon = UI.Icon.create('largeicon-navigator-file-synced', 'icon');
+      var badge = UI.Icon.create('badge-navigator-file-synced', 'icon-badge');
+      var combined = UI.Icon.combine([icon, badge]);
+      combined.title = Persistence.PersistenceUtils.tooltipForUISourceCode(this._uiSourceCode);
+      this.setLeadingIcons([combined]);
+    } else {
+      var iconType = 'largeicon-navigator-file';
+      if (this._uiSourceCode.contentType() === Common.resourceTypes.Snippet)
+        iconType = 'largeicon-navigator-snippet';
+      var defaultIcon = UI.Icon.create(iconType, 'icon');
+      defaultIcon.classList.add('icon-container');
+      this.setLeadingIcons([defaultIcon]);
+    }
   }
 
   /**
    * @return {!Workspace.UISourceCode}
    */
   get uiSourceCode() {
     return this._uiSourceCode;
   }
 
   /**
@@ skipping 304 matching lines @@
   updateTitle(ignoreIsDirty) {
     if (!this._treeElement)
       return;
 
     var titleText = this._uiSourceCode.displayName();
     if (!ignoreIsDirty &&
         (this._uiSourceCode.isDirty() || Persistence.persistence.hasUnsavedCommittedChanges(this._uiSourceCode)))
       titleText = '*' + titleText;
 
     this._treeElement.title = titleText;
-
-    var binding = Persistence.persistence.binding(this._uiSourceCode);
-    if (binding && Runtime.experiments.isEnabled('persistence2')) {
-      var icon = UI.Icon.create('smallicon-green-checkmark');
-      icon.title = Persistence.PersistenceUtils.tooltipForUISourceCode(this._uiSourceCode);
-      this._treeElement.setTrailingIcons([icon]);
-    } else {
-      this._treeElement.setTrailingIcons([]);
-    }
+    this._treeElement.updateIcon();
 
     var tooltip = this._uiSourceCode.url();
     if (this._uiSourceCode.contentType().isFromSourceMap())
       tooltip = Common.UIString('%s (from source map)', this._uiSourceCode.displayName());
     this._treeElement.tooltip = tooltip;
   }
 
   /**
    * @override
    * @return {boolean}
@@ skipping 309 matching lines @@
   /**
    * @param {string} title
    * @override
    */
   setTitle(title) {
     this._title = title;
     if (this._treeElement)
       this._treeElement.title = this._title;
   }
 };