DevTools: [Persistence] introduce badged icons instead of checkmarks

third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js

Index: third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js b/third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js
index 89508e0f1fbb2add8b362a8e0d0568ba23741ca0..7f6575ca04bae886fc38b288d8cada8c31113e2f 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js
@@ -941,13 +941,27 @@ Sources.NavigatorSourceTreeElement = class extends TreeElement {
     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]);
+    }
   }
 
   /**
@@ -1272,15 +1286,7 @@ Sources.NavigatorUISourceCodeTreeNode = class extends Sources.NavigatorTreeNode
       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())