[DevTools] Make toolbar counters declarative.

Source/devtools/front_end/ui/StatusBarButton.js

 /*
  * Copyright (C) 2009 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 61 matching lines @@
         this.element.classList.toggle("hidden", !x);
         this._visible = x;
     },
 
     __proto__: WebInspector.Object.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.StatusBarItem}
+ * @param {!Array.<string>} counters
+ * @param {string=} className
+ */
+WebInspector.StatusBarCounter = function(counters, className)
+{
+    WebInspector.StatusBarItem.call(this, "div");
+    this.element.className = "status-bar-item status-bar-counter hidden";
+    if (className)
+        this.element.classList.add(className);
+    this.element.addEventListener("click", this._clicked.bind(this), false);
+    this._counters = [];

[apavlov, 2014/07/21 13:34:06]

This should be annotated at least with a @typedef (we have a non-enforced policy
to annotate all arrays to avoid type errors)

[dgozman, 2014/07/21 14:24:34]

Nice catch. Done.

+    for (var i = 0; i < counters.length; i++) {

[apavlov, 2014/07/21 13:34:06]

++i for consistency

[dgozman, 2014/07/21 14:24:34]

Done.

+        var element = this.element.createChild("span", "status-bar-counter-item");
+        element.createChild("div", counters[i]);
+        element.createChild("span");
+        this._counters.push({counter: counters[i], element: element, value: 0, title: ""});
+    }
+    this._update();
+}
+
+WebInspector.StatusBarCounter.prototype = {
+    /**
+     * @param {string} counter
+     * @param {number} value
+     * @param {string} title
+     */
+    setCounter: function(counter, value, title)
+    {
+        for (var i = 0; i < this._counters.length; ++i) {
+            if (this._counters[i].counter == counter) {

[apavlov, 2014/07/21 13:34:06]

===

[dgozman, 2014/07/21 14:24:34]

Done.

+                this._counters[i].value = value;
+                this._counters[i].title = title;
+                this._update();
+                return;
+            }
+        }
+    },
+
+    _update: function()
+    {
+        var total = 0;
+        var title = "";
+        for (var i = 0; i < this._counters.length; ++i) {
+            if (!this._counters[i].value) {

[apavlov, 2014/07/21 13:34:06]

this._counters[i].value can be extracted into a variable, as it is used 3 times
inside the loop

[dgozman, 2014/07/21 14:24:34]

Done.

+                this._counters[i].element.classList.add("hidden");
+                continue;
+            }
+            this._counters[i].element.style.marginLeft = total ? "6px" : "0";

[apavlov, 2014/07/21 13:34:06]

can we implement this using classes? This seems a bit fragile. E.g. let 6px be
the default value on a CSS class and add a class with 0 for when |total| is
truthy

[dgozman, 2014/07/21 14:24:35]

Done.

+            this._counters[i].element.classList.remove("hidden");
+            this._counters[i].element.querySelector("span").textContent = this._counters[i].value;
+            total += this._counters[i].value;
+            if (this._counters[i].title) {
+                if (title)
+                    title += ", ";
+                title += this._counters[i].title;
+            }
+        }
+        this.element.classList.toggle("hidden", !total);
+        this.element.title = title;
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _clicked: function(event)
+    {
+        this.dispatchEventToListeners("click");
+    },
+
+    __proto__: WebInspector.StatusBarItem.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.StatusBarItem}
  * @param {string} text
  * @param {string=} className
  */
 WebInspector.StatusBarText = function(text, className)
 {
     WebInspector.StatusBarItem.call(this, "span");
     this.element.className = "status-bar-item status-bar-text";
     if (className)
         this.element.classList.add(className);
     this.element.textContent = text;
@@ skipping 327 matching lines @@
             }
         }
     },
 
     __proto__: WebInspector.StatusBarItem.prototype
 }
 
 /**
  * @interface
  */
-WebInspector.StatusBarButton.Provider = function()
+WebInspector.StatusBarItem.Provider = function()
 {
 }
 
-WebInspector.StatusBarButton.Provider.prototype = {
+WebInspector.StatusBarItem.Provider.prototype = {
     /**
-     * @return {?WebInspector.StatusBarButton}
+     * @return {?WebInspector.StatusBarItem}
      */
-    button: function() {}
+    item: function() {}
 }
 
 /**
  * @constructor
  * @extends {WebInspector.StatusBarItem}
  * @param {?function(!Event)} changeHandler
  * @param {string=} className
  */
 WebInspector.StatusBarComboBox = function(changeHandler, className)
 {
@@ skipping 221 matching lines @@
         var options = [];
         for (var index = 0; index < this._states.length; index++) {
             if (this._states[index] !== this.state && this._states[index] !== this._currentState)
                 options.push(this._buttons[index]);
         }
         return options;
     },
 
     __proto__: WebInspector.StatusBarButton.prototype
 }