DevTools: brush up command menu looks, render badges.

third_party/WebKit/Source/devtools/front_end/ui_lazy/CommandMenu.js

Index: third_party/WebKit/Source/devtools/front_end/ui_lazy/CommandMenu.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui_lazy/CommandMenu.js b/third_party/WebKit/Source/devtools/front_end/ui_lazy/CommandMenu.js
index 4446daf3d47885e67f19b0e52800dba746d92ea2..76bac863e06a96ba284675f9809d1f6a2fbf7a70 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui_lazy/CommandMenu.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui_lazy/CommandMenu.js
@@ -55,6 +55,8 @@ WebInspector.CommandMenuDelegate = function()
     this._appendAvailableCommands();
 }
 
+WebInspector.CommandMenuDelegate.MaterialPaletteColors = ["#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5", "#03A9F4", "#00BCD4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFC107", "#FF9800", "#FF5722", "#795548", "#9E9E9E", "#607D8B"];
+
 WebInspector.CommandMenuDelegate.prototype = {
     _appendAvailableCommands: function()
     {
@@ -81,7 +83,8 @@ WebInspector.CommandMenuDelegate.prototype = {
          */
         function commandComparator(left, right)
         {
-            return left.title().compareTo(right.title());
+            var cats = left.category().compareTo(right.category());
+            return cats ? cats : left.title().compareTo(right.title());
         }
     },
 
@@ -122,9 +125,9 @@ WebInspector.CommandMenuDelegate.prototype = {
         }
 
         // Score panel/drawer reveals above regular actions.
-        if (command.title().startsWith("Panel"))
+        if (command.category().startsWith("Panel"))
             score += 2;
-        else if (command.title().startsWith("Drawer"))
+        else if (command.category().startsWith("Drawer"))
             score += 1;
 
         return score;
@@ -140,7 +143,12 @@ WebInspector.CommandMenuDelegate.prototype = {
     renderItem: function(itemIndex, query, titleElement, subtitleElement)
     {
         var command = this._commands[itemIndex];
-        titleElement.textContent = command.title();
+        titleElement.removeChildren();
+        var tagElement = titleElement.createChild("span", "tag");
+        var index = String.hashCode(command.category()) % WebInspector.CommandMenuDelegate.MaterialPaletteColors.length;
+        tagElement.style.backgroundColor = WebInspector.CommandMenuDelegate.MaterialPaletteColors[index];
+        tagElement.textContent = command.category();
+        titleElement.createTextChild(command.title());
         this.highlightRanges(titleElement, query);
         subtitleElement.textContent = command.shortcut();
     },
@@ -164,21 +172,32 @@ WebInspector.CommandMenuDelegate.prototype = {
         return false;
     },
 
+    /**
+     * @override
+     * @return {boolean}
+     */
+    renderMonospace: function()
+    {
+        return false;
+    },
+
     __proto__: WebInspector.FilteredListWidget.Delegate.prototype
 }
 
 /**
  * @constructor
+ * @param {string} category
  * @param {string} title
  * @param {string} key
  * @param {string} shortcut
  * @param {function()} executeHandler
  * @param {function()=} availableHandler
  */
-WebInspector.CommandMenu.Command = function(title, key, shortcut, executeHandler, availableHandler)
+WebInspector.CommandMenu.Command = function(category, title, key, shortcut, executeHandler, availableHandler)
 {
+    this._category = category;
     this._title = title;
-    this._key = title + "\0" + key;
+    this._key = category + "\0" + title + "\0" + key;
     this._shortcut = shortcut;
     this._executeHandler = executeHandler;
     this._availableHandler = availableHandler;
@@ -188,6 +207,14 @@ WebInspector.CommandMenu.Command.prototype = {
     /**
      * @return {string}
      */
+    category: function()
+    {
+        return this._category;
+    },
+
+    /**
+     * @return {string}
+     */
     title: function()
     {
         return this._title;
@@ -235,9 +262,8 @@ WebInspector.CommandMenu.Command.prototype = {
 WebInspector.CommandMenu.createCommand = function(category, keys, title, shortcut, executeHandler, availableHandler)
 {
     // Separate keys by null character, to prevent fuzzy matching from matching across them.
-    var key = keys ? keys.split(",").join("\0") : "";
-    title = category ? WebInspector.UIString("%s: %s", category, title) : title;
-    return new WebInspector.CommandMenu.Command(title, key, shortcut, executeHandler, availableHandler);
+    var key = keys.replace(/,/g, "\0");
+    return new WebInspector.CommandMenu.Command(category, title, key, shortcut, executeHandler, availableHandler);
 }
 
 /**
@@ -329,7 +355,7 @@ WebInspector.CommandMenu.ShowActionDelegate.prototype = {
      */
     handleAction: function(context, actionId)
     {
-        new WebInspector.FilteredListWidget(new WebInspector.CommandMenuDelegate(), false).showAsDialog();
+        new WebInspector.FilteredListWidget(new WebInspector.CommandMenuDelegate()).showAsDialog();
         InspectorFrontendHost.bringToFront();
         return true;
     }