DevTools: [Persistence] green checkmark icons should not be editable

Today, navigator renders green checkmarks as a part of the title element.
This results in the editing field spanning over the icon as well.

This patch starts using treeelement.setTrailingIcons() method to
avoid this problem.

BUG=673086
R=dgozman

Review-Url: https://codereview.chromium.org/2568623002
Cr-Commit-Position: refs/heads/master@{#438016}

third_party/WebKit/LayoutTests/http/tests/inspector/inspector-test.js

@@ -360,11 +360,15 @@ InspectorTest.dumpNavigatorView = function(navigatorView)
 
     function dumpNavigatorTreeElement(prefix, treeElement)
     {
-        var titleText;
-        if (treeElement.title instanceof Element)
-            titleText = treeElement.title.firstChild.textContent + " [mapped]";
-        else
-            titleText = treeElement.title;
+        var titleText = treeElement.title;
+        if (treeElement._trailingIconsElement) {
+            var iconTypes = [];
+            for (var icon = treeElement._trailingIconsElement.firstChild; icon; icon = icon.nextSibling) {
+                iconTypes.push(icon._iconType);
+            }
+            if (iconTypes.length)
+                titleText = titleText + " [" + iconTypes.join(", ") + "]";
+        }
         if (treeElement._nodeType === Sources.NavigatorView.Types.FileSystem || treeElement._nodeType === Sources.NavigatorView.Types.FileSystemFolder) {
             var hasMappedFiles = treeElement.listItemElement.classList.contains("has-mapped-files");
             if (!hasMappedFiles)

third_party/WebKit/LayoutTests/http/tests/inspector/persistence/persistence-navigator-expected.txt

@@ -25,7 +25,7 @@ top
     inspector
       persistence
         resources
-          foo.js [mapped]
+          foo.js [smallicon-green-checkmark]
         persistence-navigator.html
         persistence-test.js
       debugger-test.js
@@ -33,7 +33,7 @@ top
       isolated-filesystem-test.js
 www
   inspector/persistence/resources
-    foo.js [mapped]
+    foo.js [smallicon-green-checkmark]
 
 Running: removeFileMapping
 top

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

@@ -1257,16 +1257,15 @@ Sources.NavigatorUISourceCodeTreeNode = class extends Sources.NavigatorTreeNode
         (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 titleElement = createElement('span');
-      titleElement.textContent = titleText;
-      var icon = UI.Icon.create('smallicon-checkmark', 'mapped-file-checkmark');
+      var icon = UI.Icon.create('smallicon-green-checkmark');
       icon.title = Persistence.PersistenceUtils.tooltipForUISourceCode(this._uiSourceCode);
-      titleElement.appendChild(icon);
-      this._treeElement.title = titleElement;
+      this._treeElement.setTrailingIcons([icon]);
     } else {
-      this._treeElement.title = titleText;
+      this._treeElement.setTrailingIcons([]);
     }
 
     var tooltip = this._uiSourceCode.url();

third_party/WebKit/Source/devtools/front_end/sources/navigatorTree.css

@@ -52,15 +52,6 @@
     opacity: 0.5;
 }
 
-.mapped-file-checkmark {
-    background: #009802;
-    margin-left: 3px;
-}
-
-:focus .navigator-file-tree-item.selected .mapped-file-checkmark {
-    background: white !important;
-}
-
 :focus .navigator-file-tree-item.selected .icon {
     background: white !important;
 }