DevTools: reintroduce counters for sidebar items, part 2

This adds counters to each sidebar item, revealing the number of
messages within.

Screenshot: https://imgur.com/a/o4pSF

Bug: 685283
Change-Id: Iee551c44506d9949b6a1a143ec6650cb12c9f728
Reviewed-on: https://chromium-review.googlesource.com/719958
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#509726}

third_party/WebKit/LayoutTests/http/tests/devtools/console-sidebar/console-filter-sidebar-expected.txt

@@ -3,37 +3,37 @@ Tests that console sidebar behaves properly.
 
 Running: beforeFilter
 SIDEBAR:
-> message
-> error
-> warning
-> info
-> verbose
+> No messages
+> No errors
+> No warnings
+> No info
+> No verbose
 
 Running: addLogsFromMultipleUrls
 SIDEBAR:
-> message
+> 2 messages
 > > log-source.js
 > > console-filter-sidebar.js
-> error
-> warning
-> info
+> No errors
+> No warnings
+> 2 info
 > > log-source.js
 > > console-filter-sidebar.js
-> verbose
+> No verbose
 
 Running: addLogsFromMultipleLevels
 SIDEBAR:
-> message
+> 4 messages
 > > log-source.js
 > > console-filter-sidebar.js
-> error
+> 1 error
 > > console-filter-sidebar.js
-> warning
+> 1 warning
 > > log-source.js
-> info
+> 2 info
 > > log-source.js
 > > console-filter-sidebar.js
-> verbose
+> No verbose
 
 Running: selectingGroup
 Selecting item: log-source.js
@@ -44,23 +44,23 @@ warn2 @ log-source.js:8
 (anonymous) @ console-filter-sidebar.js:48
 
 SIDEBAR:
-> message
+> 4 messages
 > > log-source.js
 > > console-filter-sidebar.js
-> error
+> 1 error
 > > console-filter-sidebar.js
-> warning
+> 1 warning
 > > log-source.js
-> info
+> 2 info
 > > log-source.js
 > > console-filter-sidebar.js
-> verbose
+> No verbose
 
 Running: clearConsole
 SIDEBAR:
-> message
-> error
-> warning
-> info
-> verbose
+> No messages
+> No errors
+> No warnings
+> No info
+> No verbose
 

third_party/WebKit/Source/devtools/front_end/Images/src/optimize_png.hashes

@@ -4,7 +4,7 @@
     "breakpointConditional.svg": "4cf90210b2af2ed84db2f60b07bcde28",
     "checkboxCheckmark.svg": "f039bf85cee42ad5c30ca3bfdce7912a",
     "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45",
-    "smallIcons.svg": "911ffe3e3692229022105c5a51d20bb9",
+    "smallIcons.svg": "acdd227509fcff2244900e891476a1e4",
     "mediumIcons.svg": "84090b8a5c439d6d3022f5fbc4dd8221",
     "breakpoint.svg": "69cd92d807259c022791112809b97799",
     "treeoutlineTriangles.svg": "017d2f89437df0afc6b9cd5ff43735d9",

third_party/WebKit/Source/devtools/front_end/Images/src/smallIcons.svg

@@ -8,7 +8,7 @@
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="90"
+   width="110"
    height="110"
    id="svg4185"
    version="1.1"
@@ -26,7 +26,45 @@
     </rdf:RDF>
   </metadata>
   <defs
-     id="defs4457" />
+     id="defs4457">
+    <linearGradient
+       id="sprite9_a-2"
+       x1="113"
+       x2="127"
+       y1="104"
+       y2="104"
+       gradientTransform="matrix(0.71429,0,0,0.71429,-0.714,-69.286)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#sprite9_d-9" />
+    <linearGradient
+       id="sprite9_d-9">
+      <stop
+         stop-color="#606eda"
+         offset="0"
+         id="stop4292-1" />
+      <stop
+         stop-color="#021db2"
+         offset="1"
+         id="stop4294-2" />
+    </linearGradient>
+    <linearGradient
+       id="sprite6_a-0"
+       x2="24"
+       gradientTransform="matrix(0,-0.41667,-0.41667,0,25,10)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#sprite6_b-6" />
+    <linearGradient
+       id="sprite6_b-6">
+      <stop
+         stop-color="#d7687d"
+         offset="0"
+         id="stop4236-2" />
+      <stop
+         stop-color="#b21402"
+         offset="1"
+         id="stop4238-6" />
+    </linearGradient>
+  </defs>
   <sodipodi:namedview
      pagecolor="#ffffff"
      bordercolor="#666666"
@@ -40,13 +78,13 @@
      inkscape:window-height="1376"
      id="namedview4455"
      showgrid="true"
-     inkscape:zoom="20.977778"
-     inkscape:cx="54.131178"
-     inkscape:cy="94.103295"
+     inkscape:zoom="7.4167645"
+     inkscape:cx="64.063483"
+     inkscape:cy="56.846671"
      inkscape:window-x="980"
      inkscape:window-y="0"
      inkscape:window-maximized="0"
-     inkscape:current-layer="g74">
+     inkscape:current-layer="svg4185">
     <inkscape:grid
        type="xygrid"
        id="grid4461"
@@ -814,4 +852,148 @@
        d="m 55.582,9.6571445 -5.53125,5.5625005 -0.40625,-0.40625 -1.09375,1.125 1.5,1.499999 6.65625,-6.656249 -1.125,-1.1250005 z"
        id="path3185" />
   </g>
+  <text
+     xml:space="preserve"
+     style="font-size:8px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:none;font-family:Sans"
+     x="103.73887"
+     y="118.48206"
+     id="text5191-77-3"
+     sodipodi:linespacing="125%"><tspan
+       sodipodi:role="line"
+       id="tspan5193-6-6"
+       x="103.73887"
+       y="118.48206">f</tspan></text>
+  <g
+     id="g4443-7"
+     transform="translate(100,100)"
+     mask="url(#path4453-6-mask)">
+    <path
+       transform="translate(-60,0)"
+       d="m 61,9 4,-8 4,8 z"
+       id="path4447-5"
+       inkscape:connector-curvature="0"
+       style="stroke:#c19600;stroke-width:2;stroke-linejoin:round" />
+    <path
+       transform="translate(-60,0)"
+       d="m 61,9 4,-8 4,8 z"
+       id="path4449-3"
+       inkscape:connector-curvature="0"
+       style="fill:#f4bd00;stroke:#f5bd00;stroke-width:1.5;stroke-linejoin:round" />
+    <path
+       transform="translate(-60,0)"
+       d="m 63.75,2.75 h 2.5 v 2.5 L 65.75,7 h -1.5 l -0.5,-1.75 v -2.5 m 0,5.25 h 2.5 v 1.25 h -2.5"
+       id="path4451-5"
+       inkscape:connector-curvature="0"
+       style="fill:#ad8601" />
+    <mask id="path4453-6-mask">
+      <path
+         transform="translate(-60,0)"
+         d="m 64,3 h 2 V 5.25 L 65.5,7 h -1 L 64,5.25 V 3 m 0,5 h 2 v 1 h -2"
+         id="path4453-6"
+         inkscape:connector-curvature="0"
+         style="fill:#000000" />
+      <rect width="10" height="10" style="fill:#ffffff" />
+    </mask>
+  </g>
+  <g
+     id="g4279-7"
+     transform="translate(100,80)"
+     mask="url(#path4287-3-mask)">
+    <path
+       transform="translate(-80,0)"
+       d="m 85,-4.7795e-7 c -2.76,0 -5,2.23999997795 -5,4.99999997795 0,2.76 2.24,5 5,5 2.76,0 5,-2.24 5,-5 C 90,2.2399995 87.76,-4.7795e-7 85,-4.7795e-7"
+       id="path4283-0"
+       inkscape:connector-curvature="0"
+       style="fill:url(#sprite9_a-2)" />
+    <path
+       transform="translate(-80,0)"
+       d="m 80.36,5 c 0,2.56 2.08,4.64 4.64,4.64 2.56,0 4.64,-2.08 4.64,-4.64 0,-2.56 -2.08,-4.64 -4.64,-4.64 -2.56,0 -4.64,2.08 -4.64,4.64"
+       id="path4285-9"
+       inkscape:connector-curvature="0"
+       style="fill:#2a53cd" />
+    <mask id="path4287-3-mask">
+      <path
+         transform="translate(-80,0)"
+         d="m 83.93,2.14 c -0.03,-0.53 0.55,-0.97 1.06,-0.83 0.5,0.12 0.79,0.73 0.56,1.18 -0.2,0.44 -0.79,0.61 -1.2,0.36 C 84.09,2.71 83.93,2.43 83.93,2.14 z m 1.7,5.46 H 86.3 V 8.13 H 83.41 V 7.6 h 0.66 V 3.99 H 83.41 V 3.46 h 2.22 V 7.6 z"
+         id="path4287-3"
+         inkscape:connector-curvature="0"
+         style="fill:#000000" />
+      <rect width="10" height="10" style="fill:#ffffff" />
+    </mask>
+    <defs
+       id="defs4289-6">
+      <linearGradient
+         id="linearGradient3198">
+        <stop
+           stop-color="#606eda"
+           offset="0"
+           id="stop3200" />
+        <stop
+           stop-color="#021db2"
+           offset="1"
+           id="stop3202" />
+      </linearGradient>
+      <linearGradient
+         id="linearGradient3204"
+         x1="113"
+         x2="127"
+         y1="104"
+         y2="104"
+         gradientTransform="matrix(0.71429,0,0,0.71429,-0.714,-69.286)"
+         gradientUnits="userSpaceOnUse"
+         xlink:href="#sprite9_d-9" />
+    </defs>
+  </g>
+  <g
+     id="g4221-1"
+     transform="translate(100,60)"
+     mask="url(#path4229-9-path4231-2-mask)">
+    <path
+       transform="translate(-20,0)"
+       d="m 25,-4.7795e-7 c -2.76,0 -5,2.23999997795 -5,4.99999997795 0,2.76 2.24,5 5,5 2.76,0 5,-2.24 5,-5 C 30,2.2399995 27.76,-4.7795e-7 25,-4.7795e-7"
+       id="path4225-8"
+       inkscape:connector-curvature="0"
+       style="fill:url(#sprite6_a-0)" />
+    <path
+       transform="translate(-20,0)"
+       d="m 20.36,5 c 0,2.56 2.08,4.64 4.64,4.64 2.56,0 4.64,-2.08 4.64,-4.64 0,-2.56 -2.08,-4.64 -4.64,-4.64 -2.56,0 -4.64,2.08 -4.64,4.64"
+       id="path4227-7"
+       inkscape:connector-curvature="0"
+       style="fill:#eb3941" />
+    <mask id="path4229-9-path4231-2-mask">
+      <path
+         transform="translate(-20,0)"
+         d="m 23,3 4,4"
+         id="path4229-9"
+         inkscape:connector-curvature="0"
+         style="stroke:#000000" />
+      <path
+         transform="translate(-20,0)"
+         d="M 27,3 23,7"
+         id="path4231-2"
+         inkscape:connector-curvature="0"
+         style="stroke:#000000" />
+      <rect width="10" height="10" style="fill:#ffffff" />
+    </mask>
+    <defs
+       id="defs4233-0">
+      <linearGradient
+         id="linearGradient3257">
+        <stop
+           stop-color="#d7687d"
+           offset="0"
+           id="stop3259" />
+        <stop
+           stop-color="#b21402"
+           offset="1"
+           id="stop3261" />
+      </linearGradient>
+      <linearGradient
+         id="linearGradient3263"
+         x2="24"
+         gradientTransform="matrix(0,-0.41667,-0.41667,0,25,10)"
+         gradientUnits="userSpaceOnUse"
+         xlink:href="#sprite6_b-6" />
+    </defs>
+  </g>
 </svg>

third_party/WebKit/Source/devtools/front_end/Images/src/svg2png.hashes

@@ -4,7 +4,7 @@
     "breakpointConditional.svg": "4cf90210b2af2ed84db2f60b07bcde28",
     "checkboxCheckmark.svg": "f039bf85cee42ad5c30ca3bfdce7912a",
     "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45",
-    "smallIcons.svg": "911ffe3e3692229022105c5a51d20bb9",
+    "smallIcons.svg": "acdd227509fcff2244900e891476a1e4",
     "mediumIcons.svg": "84090b8a5c439d6d3022f5fbc4dd8221",
     "breakpoint.svg": "69cd92d807259c022791112809b97799",
     "treeoutlineTriangles.svg": "017d2f89437df0afc6b9cd5ff43735d9",

third_party/WebKit/Source/devtools/front_end/console/ConsoleFilter.js

@@ -14,9 +14,6 @@ Console.ConsoleFilter = class {
     this.parsedFilters = parsedFilters;
     this.executionContext = executionContext;
     this.levelsMask = levelsMask || Console.ConsoleFilter.defaultLevelsFilterValue();
-    this.infoCount = 0;
-    this.warningCount = 0;
-    this.errorCount = 0;
   }
 
   /**
@@ -124,29 +121,6 @@ Console.ConsoleFilter = class {
       return true;
     }
   }
-
-  /**
-   * @param {!ConsoleModel.ConsoleMessage} message
-   */
-  incrementCounters(message) {
-    if (message.type === ConsoleModel.ConsoleMessage.MessageType.Command ||
-        message.type === ConsoleModel.ConsoleMessage.MessageType.Result || message.isGroupMessage())
-      return;
-    var level = message.level;
-    if (level === ConsoleModel.ConsoleMessage.MessageLevel.Info ||
-        level === ConsoleModel.ConsoleMessage.MessageLevel.Verbose)
-      this.infoCount++;
-    else if (level === ConsoleModel.ConsoleMessage.MessageLevel.Warning)
-      this.warningCount++;
-    else if (level === ConsoleModel.ConsoleMessage.MessageLevel.Error)
-      this.errorCount++;
-  }
-
-  resetCounters() {
-    this.infoCount = 0;
-    this.warningCount = 0;
-    this.errorCount = 0;
-  }
 };
 
 /** @enum {string} */

third_party/WebKit/Source/devtools/front_end/console/ConsoleSidebar.js

@@ -3,7 +3,10 @@
 // found in the LICENSE file.
 
 Console.ConsoleSidebar = class extends UI.VBox {
-  constructor() {
+  /**
+   * @param {!ProductRegistry.BadgePool} badgePool
+   */
+  constructor(badgePool) {
     super(true);
     this.setMinimumSize(125, 0);
     this._enabled = Runtime.experiments.isEnabled('logManagement');
@@ -14,29 +17,42 @@ Console.ConsoleSidebar = class extends UI.VBox {
     this.contentElement.appendChild(this._tree.element);
     /** @type {?UI.TreeElement} */
     this._selectedTreeElement = null;
-
-    var Levels = ConsoleModel.ConsoleMessage.MessageLevel;
-    var filters = [
-      new Console.ConsoleFilter(Common.UIString('message'), [], null, Console.ConsoleFilter.allLevelsFilterValue()),
-      new Console.ConsoleFilter(
-          Common.UIString('error'), [], null, Console.ConsoleFilter.singleLevelMask(Levels.Error)),
-      new Console.ConsoleFilter(
-          Common.UIString('warning'), [], null, Console.ConsoleFilter.singleLevelMask(Levels.Warning)),
-      new Console.ConsoleFilter(Common.UIString('info'), [], null, Console.ConsoleFilter.singleLevelMask(Levels.Info)),
-      new Console.ConsoleFilter(
-          Common.UIString('verbose'), [], null, Console.ConsoleFilter.singleLevelMask(Levels.Verbose))
-    ];
     /** @type {!Array<!Console.ConsoleSidebar.FilterTreeElement>} */
     this._treeElements = [];
-    for (var filter of filters) {
-      var treeElement = new Console.ConsoleSidebar.FilterTreeElement(filter);
-      this._tree.appendChild(treeElement);
-      this._treeElements.push(treeElement);
-    }
+
+    var Levels = ConsoleModel.ConsoleMessage.MessageLevel;
+    this._appendGroup(
+        Console.ConsoleSidebar._groupSingularName.All, Console.ConsoleFilter.allLevelsFilterValue(),
+        UI.Icon.create('largeicon-navigator-folder'), badgePool);
+    this._appendGroup(
+        Console.ConsoleSidebar._groupSingularName.Error, Console.ConsoleFilter.singleLevelMask(Levels.Error),
+        UI.Icon.create('smallicon-clear-error'), badgePool);
+    this._appendGroup(
+        Console.ConsoleSidebar._groupSingularName.Warning, Console.ConsoleFilter.singleLevelMask(Levels.Warning),
+        UI.Icon.create('smallicon-clear-warning', 'icon-warning'), badgePool);
+    this._appendGroup(
+        Console.ConsoleSidebar._groupSingularName.Info, Console.ConsoleFilter.singleLevelMask(Levels.Info),
+        UI.Icon.create('smallicon-clear-info'), badgePool);
+    this._appendGroup(
+        Console.ConsoleSidebar._groupSingularName.Verbose, Console.ConsoleFilter.singleLevelMask(Levels.Verbose),
+        UI.Icon.create('smallicon-clear-warning'), badgePool);
     this._treeElements[0].expand();
     this._treeElements[0].select();
   }
 
+  /**
+   * @param {string} name
+   * @param {!Object<string, boolean>} levelsMask
+   * @param {!Element} icon
+   * @param {!ProductRegistry.BadgePool} badgePool
+   */
+  _appendGroup(name, levelsMask, icon, badgePool) {
+    var filter = new Console.ConsoleFilter(name, [], null, levelsMask);
+    var treeElement = new Console.ConsoleSidebar.FilterTreeElement(filter, icon, badgePool);
+    this._tree.appendChild(treeElement);
+    this._treeElements.push(treeElement);
+  }
+
   clear() {
     if (!this._enabled)
       return;
@@ -81,54 +97,112 @@ Console.ConsoleSidebar.Events = {
 Console.ConsoleSidebar.URLGroupTreeElement = class extends UI.TreeElement {
   /**
    * @param {!Console.ConsoleFilter} filter
+   * @param {?Element} badge
    */
-  constructor(filter) {
+  constructor(filter, badge) {
     super(filter.name);
     this._filter = filter;
+    this._countElement = this.listItemElement.createChild('span', 'count');
+    var leadingIcons = [UI.Icon.create('largeicon-navigator-file')];
+    if (badge)
+      leadingIcons.push(badge);
+    this.setLeadingIcons(leadingIcons);
+    this._messageCount = 0;
+  }
+
+  incrementAndUpdateCounter() {
+    this._messageCount++;
+    this._countElement.textContent = this._messageCount;
   }
 };
 
 Console.ConsoleSidebar.FilterTreeElement = class extends UI.TreeElement {
   /**
    * @param {!Console.ConsoleFilter} filter
+   * @param {!Element} icon
+   * @param {!ProductRegistry.BadgePool} badgePool
    */
-  constructor(filter) {
-    super(filter.name);
+  constructor(filter, icon, badgePool) {
+    super(filter.name, true /* expandable */);
     this._filter = filter;
-    this.setExpandable(true);
+    this._badgePool = badgePool;
     /** @type {!Map<?string, !Console.ConsoleSidebar.URLGroupTreeElement>} */
     this._urlTreeElements = new Map();
+    this.setLeadingIcons([icon]);
+    this._messageCount = 0;
+    this._updateCounter();
   }
 
   clear() {
     this._urlTreeElements.clear();
     this.removeChildren();
+    this._messageCount = 0;
+    this._updateCounter();
+  }
+
+  _updateCounter() {
+    var prefix = this._messageCount ? this._messageCount : Common.UIString('No');
+    var pluralizedName = this._messageCount === 1 ? this._filter.name :
+                                                    Console.ConsoleSidebar._groupPluralNameMap.get(this._filter.name);
+    this.title = `${prefix} ${pluralizedName}`;
   }
 
   /**
    * @param {!Console.ConsoleViewMessage} viewMessage
    */
   onMessageAdded(viewMessage) {
-    if (!this._filter.shouldBeVisible(viewMessage))
+    var message = viewMessage.consoleMessage();
+    var shouldIncrementCounter = message.type !== ConsoleModel.ConsoleMessage.MessageType.Command &&
+        message.type !== ConsoleModel.ConsoleMessage.MessageType.Result && !message.isGroupMessage();
+    if (!this._filter.shouldBeVisible(viewMessage) || !shouldIncrementCounter)
       return;
-    var url = viewMessage.consoleMessage().url || null;
-    this._filter.incrementCounters(viewMessage.consoleMessage());
-
-    var child = this._urlTreeElements.get(url);
-    if (!child) {
-      var filter = this._filter.clone();
-      var parsedURL = url ? url.asParsedURL() : null;
-      if (url)
-        filter.name = parsedURL ? parsedURL.displayName : url;
-      else
-        filter.name = Common.UIString('<other>');
-      filter.parsedFilters.push({key: Console.ConsoleFilter.FilterType.Url, text: url, negative: false});
-      child = new Console.ConsoleSidebar.URLGroupTreeElement(filter);
-      if (url)
-        child.tooltip = url;
-      this._urlTreeElements.set(url, child);
-      this.appendChild(child);
-    }
-    child._filter.incrementCounters(viewMessage.consoleMessage());
+    var child = this._childElement(message.url);
+    child.incrementAndUpdateCounter();
+    this._messageCount++;
+    this._updateCounter();
+  }
+
+  /**
+   * @param {string=} url
+   * @return {!Console.ConsoleSidebar.URLGroupTreeElement}
+   */
+  _childElement(url) {
+    var urlValue = url || null;
+    var child = this._urlTreeElements.get(urlValue);
+    if (child)
+      return child;
+
+    var filter = this._filter.clone();
+    var parsedURL = urlValue ? urlValue.asParsedURL() : null;
+    if (urlValue)
+      filter.name = parsedURL ? parsedURL.displayName : urlValue;
+    else
+      filter.name = Common.UIString('<other>');
+    filter.parsedFilters.push({key: Console.ConsoleFilter.FilterType.Url, text: urlValue, negative: false});
+    var badge = parsedURL ? this._badgePool.badgeForURL(parsedURL) : null;
+    child = new Console.ConsoleSidebar.URLGroupTreeElement(filter, badge);
+    if (urlValue)
+      child.tooltip = urlValue;
+    this._urlTreeElements.set(urlValue, child);
+    this.appendChild(child);
+    return child;
   }
 };
+
+/** @enum {string} */
+Console.ConsoleSidebar._groupSingularName = {
+  All: Common.UIString('message'),
+  Error: Common.UIString('error'),
+  Warning: Common.UIString('warning'),
+  Info: Common.UIString('info'),
+  Verbose: Common.UIString('verbose')
+};
+
+/** @const {!Map<string, string>} */
+Console.ConsoleSidebar._groupPluralNameMap = new Map([
+  [Console.ConsoleSidebar._groupSingularName.All, Common.UIString('messages')],
+  [Console.ConsoleSidebar._groupSingularName.Error, Common.UIString('errors')],
+  [Console.ConsoleSidebar._groupSingularName.Warning, Common.UIString('warnings')],
+  [Console.ConsoleSidebar._groupSingularName.Info, Common.UIString('info')],
+  [Console.ConsoleSidebar._groupSingularName.Verbose, Common.UIString('verbose')]
+]);

third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js

@@ -40,7 +40,8 @@ Console.ConsoleView = class extends UI.VBox {
     this._searchableView = new UI.SearchableView(this);
     this._searchableView.setPlaceholder(Common.UIString('Find string in logs'));
     this._searchableView.setMinimalSearchQuerySize(0);
-    this._sidebar = new Console.ConsoleSidebar();
+    this._badgePool = new ProductRegistry.BadgePool();
+    this._sidebar = new Console.ConsoleSidebar(this._badgePool);
     this._sidebar.addEventListener(Console.ConsoleSidebar.Events.FilterSelected, this._updateMessageList.bind(this));
 
     var toolbar = new UI.Toolbar('', this.element);
@@ -161,7 +162,6 @@ Console.ConsoleView = class extends UI.VBox {
     this._messagesElement.addEventListener('contextmenu', this._handleContextMenuEvent.bind(this), false);
 
     this._linkifier = new Components.Linkifier(Console.ConsoleViewMessage.MaxLengthForLinks);
-    this._badgePool = new ProductRegistry.BadgePool();
 
     /** @type {!Array.<!Console.ConsoleViewMessage>} */
     this._consoleMessages = [];

third_party/WebKit/Source/devtools/front_end/console/consoleSidebar.css

@@ -8,6 +8,41 @@
     overflow: auto;
 }
 
+.tree-outline-disclosure {
+    max-width: 100%;
+    padding-left: 6px;
+}
+
+.count {
+    flex: none;
+    margin: 0 8px;
+}
+
+[is=ui-icon] {
+    margin: 0 5px;
+}
+
+[is=ui-icon].icon-warning {
+    background: linear-gradient(45deg, hsla(48, 100%, 50%, 1), hsla(48, 70%, 50%, 1));
+}
+
+li {
+    height: 24px;
+}
+
+li .largeicon-navigator-file {
+    background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
+    margin: 0;
+}
+
+li .largeicon-navigator-folder {
+    background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
+    margin: -3px -3px 0 -5px;
+}
+
 .tree-element-title {
+    flex-shrink: 100;
     flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

third_party/WebKit/Source/devtools/front_end/ui/Icon.js

@@ -146,6 +146,9 @@ UI.Icon.Descriptors = {
   'smallicon-user-command': {position: 'c1', spritesheet: 'smallicons'},
   'smallicon-warning': {position: 'd1', spritesheet: 'smallicons'},
   'smallicon-network-product': {position: 'e1', spritesheet: 'smallicons'},
+  'smallicon-clear-warning': {position: 'f1', spritesheet: 'smallicons', isMask: true},
+  'smallicon-clear-info': {position: 'f2', spritesheet: 'smallicons'},
+  'smallicon-clear-error': {position: 'f3', spritesheet: 'smallicons'},
 
   'mediumicon-clear-storage': {position: 'a4', spritesheet: 'mediumicons', isMask: true},
   'mediumicon-cookie': {position: 'b4', spritesheet: 'mediumicons', isMask: true},