Revert 178911 "Revert 178848 "[DevTools] Make toolbar counters d..."

Broken test is incorrect and was disabled.

> Revert 178848 "[DevTools] Make toolbar counters declarative."
>
> This CL or r178850 broke the following browser tests.
> http://build.chromium.org/p/chromium.webkit/builders/Linux%20Tests%20%28dbg%29/builds/3288
>
> Let me revert the two CLs at the moment.
>
>
> > [DevTools] Make toolbar counters declarative.
> >
> > This includes error-warning and devices counters.
> >
> > BUG=none
> >
> > Review URL: https://codereview.chromium.org/408853002
>
> TBR=dgozman@chromium.org
>
> Review URL: https://codereview.chromium.org/416983006

R=haraken@chromium.org
TBR=haraken@chromium.org

Review URL: https://codereview.chromium.org/418343002

git-svn-id: svn://svn.chromium.org/blink/trunk@178930 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/components/DockController.js

@@ -164,7 +164,7 @@ WebInspector.DockController.prototype = {
 
 /**
  * @constructor
- * @implements {WebInspector.StatusBarButton.Provider}
+ * @implements {WebInspector.StatusBarItem.Provider}
  */
 WebInspector.DockController.ButtonProvider = function()
 {
@@ -172,9 +172,9 @@ WebInspector.DockController.ButtonProvider = function()
 
 WebInspector.DockController.ButtonProvider.prototype = {
     /**
-     * @return {?WebInspector.StatusBarButton}
+     * @return {?WebInspector.StatusBarItem}
      */
-    button: function()
+    item: function()
     {
         if (!WebInspector.dockController.canDock())
             return null;

third_party/WebKit/Source/devtools/front_end/components/InspectElementModeController.js

@@ -93,7 +93,7 @@ WebInspector.InspectElementModeController.ToggleSearchActionDelegate.prototype =
 
 /**
  * @constructor
- * @implements {WebInspector.StatusBarButton.Provider}
+ * @implements {WebInspector.StatusBarItem.Provider}
  */
 WebInspector.InspectElementModeController.ToggleButtonProvider = function()
 {
@@ -101,9 +101,9 @@ WebInspector.InspectElementModeController.ToggleButtonProvider = function()
 
 WebInspector.InspectElementModeController.ToggleButtonProvider.prototype = {
     /**
-     * @return {?WebInspector.StatusBarButton}
+     * @return {?WebInspector.StatusBarItem}
      */
-    button: function()
+    item: function()
     {
         if (!WebInspector.inspectElementModeController)
             return null;

third_party/WebKit/Source/devtools/front_end/components/InspectorView.js

@@ -61,24 +61,11 @@ WebInspector.InspectorView = function()
     this._rightToolbarElement = this._toolbarElement.createChild("div", "toolbar-controls-right");
     this._toolbarItems = [];
 
-    if (WebInspector.experimentsSettings.devicesPanel.isEnabled()) {
-        this._remoteDeviceCountElement = this._rightToolbarElement.createChild("div", "hidden");
-        this._remoteDeviceCountElement.addEventListener("click", this.showViewInDrawer.bind(this, "devices", true), false);
-        this._remoteDeviceCountElement.id = "remote-device-count";
-        InspectorFrontendHost.setDeviceCountUpdatesEnabled(true);
-        InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.DeviceCountUpdated, this._onDeviceCountUpdated, this);
-    }
-
-    this._errorWarningCountElement = this._rightToolbarElement.createChild("div", "hidden");
-    this._errorWarningCountElement.id = "error-warning-count";
-
     this._closeButtonToolbarItem = document.createElementWithClass("div", "toolbar-close-button-item");
     var closeButtonElement = this._closeButtonToolbarItem.createChild("div", "close-button");
     closeButtonElement.addEventListener("click", InspectorFrontendHost.closeWindow.bind(InspectorFrontendHost), true);
     this._rightToolbarElement.appendChild(this._closeButtonToolbarItem);
 
-    this.appendToRightToolbar(this._drawer.toggleButton());
-
     this._panels = {};
     // Used by tests.
     WebInspector["panels"] = this._panels;
@@ -99,10 +86,6 @@ WebInspector.InspectorView = function()
     InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.ShowConsole, this.showPanel.bind(this, "console"));
 };
 
-WebInspector.InspectorView.Events = {
-    DeviceCountChanged: "DeviceCountChanged"
-}
-
 WebInspector.InspectorView.prototype = {
     _loadPanelDesciptors: function()
     {
@@ -452,53 +435,8 @@ WebInspector.InspectorView.prototype = {
         return this._tabbedPane.headerElement();
     },
 
-    _createImagedCounterElementIfNeeded: function(parent, count, id, styleName)
+    toolbarItemResized: function()
     {
-        if (!count)
-            return;
-
-        var imageElement = parent.createChild("div", styleName);
-        var counterElement = parent.createChild("span");
-        counterElement.id = id;
-        counterElement.textContent = count;
-    },
-
-    /**
-     * @param {number} errors
-     * @param {number} warnings
-     */
-    setErrorAndWarningCounts: function(errors, warnings)
-    {
-        if (this._errors === errors && this._warnings === warnings)
-            return;
-        this._errors = errors;
-        this._warnings = warnings;
-        this._errorWarningCountElement.classList.toggle("hidden", !errors && !warnings);
-        this._errorWarningCountElement.removeChildren();
-
-        this._createImagedCounterElementIfNeeded(this._errorWarningCountElement, errors, "error-count", "error-icon-small");
-        this._createImagedCounterElementIfNeeded(this._errorWarningCountElement, warnings, "warning-count", "warning-icon-small");
-
-        var errorString = errors ?  WebInspector.UIString("%d error%s", errors, errors > 1 ? "s" : "") : "";
-        var warningString = warnings ?  WebInspector.UIString("%d warning%s", warnings, warnings > 1 ? "s" : "") : "";
-        var commaString = errors && warnings ? ", " : "";
-        this._errorWarningCountElement.title = errorString + commaString + warningString;
-        this._tabbedPane.headerResized();
-    },
-
-    /**
-     * @param {!WebInspector.Event} event
-     */
-    _onDeviceCountUpdated: function(event)
-    {
-        var count = /** @type {number} */ (event.data);
-        if (count === this.deviceCount_)
-            return;
-        this.deviceCount_ = count;
-        this._remoteDeviceCountElement.classList.toggle("hidden", !count);
-        this._remoteDeviceCountElement.removeChildren();
-        this._createImagedCounterElementIfNeeded(this._remoteDeviceCountElement, count, "device-count", "device-icon-small");
-        this._remoteDeviceCountElement.title = WebInspector.UIString(((count > 1) ? "%d devices found" : "%d device found"), count);
         this._tabbedPane.headerResized();
     },
 
@@ -533,6 +471,24 @@ WebInspector.InspectorView.DrawerToggleActionDelegate.prototype = {
     }
 }
 
+/**
+ * @constructor
+ * @implements {WebInspector.StatusBarItem.Provider}
+ */
+WebInspector.InspectorView.ToggleDrawerButtonProvider = function()
+{
+}
+
+WebInspector.InspectorView.ToggleDrawerButtonProvider.prototype = {
+    /**
+     * @return {?WebInspector.StatusBarItem}
+     */
+    item: function()
+    {
+        return WebInspector.inspectorView._drawer.toggleButton();
+    }
+}
+
 /**
  * @constructor
  * @extends {WebInspector.VBox}

third_party/WebKit/Source/devtools/front_end/inspectorStyle.css

@@ -224,11 +224,7 @@ body.undocked.platform-mac.inactive .toolbar-colors {
     padding-top: 1px;
 }
 
-.toolbar-controls-right #remote-device-count,
-.toolbar-controls-right #error-warning-count,
-.toolbar-controls-right .console-status-bar-item,
-.toolbar-controls-right .settings-status-bar-item,
-.toolbar-controls-right .dock-status-bar-item
+.toolbar-controls-right .status-bar-item
 {
     opacity: 0.8;
 }
@@ -775,7 +771,7 @@ div.resizer-widget {
     background-position: -246px -96px;
 }
 
-#error-warning-count, #remote-device-count {
+.status-bar-counter {
     display: inline-block;
     padding: 4px 6px 6px 0;
     font-size: 11px;
@@ -784,19 +780,21 @@ div.resizer-widget {
     line-height: 14px;
 }
 
-#error-warning-count:hover, #remote-device-count:hover {
+.status-bar-counter:hover {
     border-bottom: 1px solid rgb(96, 96, 96);
 }
 
-#error-warning-count .error-icon-small,
-#error-warning-count .warning-icon-small,
-#remote-device-count .device-icon-small{
-    vertical-align: -1px;
-    margin-right: 2px;
+.status-bar-counter-item {
+    margin-left: 6px;
 }
 
-#error-warning-count .warning-icon-small {
-    margin-left: 6px;
+.status-bar-counter-item.status-bar-counter-item-first {
+    margin-left: 0;
+}
+
+.status-bar-counter-item > div {
+    vertical-align: -1px;
+    margin-right: 2px;
 }
 
 #drawer-tabbed-pane > .tabbed-pane-header {

third_party/WebKit/Source/devtools/front_end/main/AdvancedApp.js

@@ -198,6 +198,49 @@ WebInspector.AdvancedApp.prototype = {
     __proto__: WebInspector.App.prototype
 };
 
+/**
+ * @constructor
+ * @implements {WebInspector.StatusBarItem.Provider}
+ */
+WebInspector.AdvancedApp.DeviceCounter = function()
+{
+    if (!WebInspector.experimentsSettings.devicesPanel.isEnabled() || !(WebInspector.app instanceof WebInspector.AdvancedApp)) {
+        this._counter = null;
+        return;
+    }
+
+    this._counter = new WebInspector.StatusBarCounter(["device-icon-small"]);
+    this._counter.addEventListener("click", showDevices);
+
+    function showDevices()
+    {
+        WebInspector.inspectorView.showViewInDrawer("devices", true);
+    }
+
+    InspectorFrontendHost.setDeviceCountUpdatesEnabled(true);
+    InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Events.DeviceCountUpdated, this._onDeviceCountUpdated, this);
+}
+
+WebInspector.AdvancedApp.DeviceCounter.prototype = {
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onDeviceCountUpdated: function(event)
+    {
+        var count = /** @type {number} */ (event.data);
+        this._counter.setCounter("device-icon-small", count, WebInspector.UIString(count > 1 ? "%d devices found" : "%d device found", count));
+        WebInspector.inspectorView.toolbarItemResized();
+    },
+
+    /**
+     * @return {?WebInspector.StatusBarItem}
+     */
+    item: function()
+    {
+        return this._counter;
+    }
+}
+
 /**
  * @constructor
  */
@@ -228,7 +271,7 @@ WebInspector.Toolbox = function()
 
 /**
  * @constructor
- * @implements {WebInspector.StatusBarButton.Provider}
+ * @implements {WebInspector.StatusBarItem.Provider}
  */
 WebInspector.AdvancedApp.EmulationButtonProvider = function()
 {
@@ -236,9 +279,9 @@ WebInspector.AdvancedApp.EmulationButtonProvider = function()
 
 WebInspector.AdvancedApp.EmulationButtonProvider.prototype = {
     /**
-     * @return {?WebInspector.StatusBarButton}
+     * @return {?WebInspector.StatusBarItem}
      */
-    button: function()
+    item: function()
     {
         if (!(WebInspector.app instanceof WebInspector.AdvancedApp))
             return null;

third_party/WebKit/Source/devtools/front_end/main/Main.js

@@ -50,7 +50,7 @@ WebInspector.Main = function()
 WebInspector.Main.prototype = {
     _createGlobalStatusBarItems: function()
     {
-        var extensions = WebInspector.moduleManager.extensions(WebInspector.StatusBarButton.Provider);
+        var extensions = WebInspector.moduleManager.extensions(WebInspector.StatusBarItem.Provider);
 
         /**
          * @param {!WebInspector.ModuleManager.Extension} left
@@ -62,31 +62,31 @@ WebInspector.Main.prototype = {
         }
         extensions.sort(orderComparator);
         extensions.forEach(function(extension) {
-            var button;
+            var item;
             switch (extension.descriptor()["location"]) {
             case "toolbar-left":
-                button = createButton(extension);
-                if (button)
-                    WebInspector.inspectorView.appendToLeftToolbar(button);
+                item = createItem(extension);
+                if (item)
+                    WebInspector.inspectorView.appendToLeftToolbar(item);
                 break;
             case "toolbar-right":
-                button = createButton(extension);
-                if (button)
-                    WebInspector.inspectorView.appendToRightToolbar(button);
+                item = createItem(extension);
+                if (item)
+                    WebInspector.inspectorView.appendToRightToolbar(item);
                 break;
             }
-            if (button && extension.descriptor()["actionId"]) {
-                button.addEventListener("click", function() {
+            if (item && extension.descriptor()["actionId"]) {
+                item.addEventListener("click", function() {
                     WebInspector.actionRegistry.execute(extension.descriptor()["actionId"]);
                 });
             }
         });
 
-        function createButton(extension)
+        function createItem(extension)
         {
             var descriptor = extension.descriptor();
             if (descriptor.className)
-                return extension.instance().button();
+                return extension.instance().item();
             return new WebInspector.StatusBarButton(WebInspector.UIString(descriptor["title"]), descriptor["elementClass"]);
         }
     },
@@ -362,18 +362,10 @@ WebInspector.Main.prototype = {
         new WebInspector.CSSStyleSheetMapping(WebInspector.cssModel, WebInspector.workspace, WebInspector.networkWorkspaceBinding);
         new WebInspector.RenderingOptions();
         new WebInspector.Main.PauseListener();
-        new WebInspector.Main.WarningErrorCounter();
         new WebInspector.Main.InspectedNodeRevealer();
 
         this._addMainEventListeners(document);
 
-        var errorWarningCount = document.getElementById("error-warning-count");
-        function showConsole()
-        {
-            WebInspector.console.show();
-        }
-        errorWarningCount.addEventListener("click", showConsole, false);
-
         WebInspector.extensionServerProxy.setFrontendReady();
 
         InspectorAgent.enable(inspectorAgentEnableCallback);
@@ -836,9 +828,18 @@ WebInspector.panel = function(name)
 
 /**
  * @constructor
+ * @implements {WebInspector.StatusBarItem.Provider}
  */
 WebInspector.Main.WarningErrorCounter = function()
 {
+    this._counter = new WebInspector.StatusBarCounter(["error-icon-small", "warning-icon-small"]);
+    this._counter.addEventListener("click", showConsole);
+
+    function showConsole()
+    {
+        WebInspector.console.show();
+    }
+
     WebInspector.multitargetConsoleModel.addEventListener(WebInspector.ConsoleModel.Events.ConsoleCleared, this._updateErrorAndWarningCounts, this);
     WebInspector.multitargetConsoleModel.addEventListener(WebInspector.ConsoleModel.Events.MessageAdded, this._updateErrorAndWarningCounts, this);
 }
@@ -853,7 +854,17 @@ WebInspector.Main.WarningErrorCounter.prototype = {
             errors = errors + targets[i].consoleModel.errors;
             warnings = warnings + targets[i].consoleModel.warnings;
         }
-        WebInspector.inspectorView.setErrorAndWarningCounts(errors, warnings);
+        this._counter.setCounter("error-icon-small", errors, WebInspector.UIString(errors > 1 ? "%d errors" : "%d error", errors));
+        this._counter.setCounter("warning-icon-small", warnings, WebInspector.UIString(warnings > 1 ? "%d warnings" : "%d warning", warnings));
+        WebInspector.inspectorView.toolbarItemResized();
+    },
+
+    /**
+     * @return {?WebInspector.StatusBarItem}
+     */
+    item: function()
+    {
+        return this._counter;
     }
 }
 

third_party/WebKit/Source/devtools/front_end/main/ScreencastApp.js

@@ -78,7 +78,7 @@ WebInspector.ScreencastApp.prototype = {
 
 /**
  * @constructor
- * @implements {WebInspector.StatusBarButton.Provider}
+ * @implements {WebInspector.StatusBarItem.Provider}
  */
 WebInspector.ScreencastApp.StatusBarButtonProvider = function()
 {
@@ -86,9 +86,9 @@ WebInspector.ScreencastApp.StatusBarButtonProvider = function()
 
 WebInspector.ScreencastApp.StatusBarButtonProvider.prototype = {
     /**
-     * @return {?WebInspector.StatusBarButton}
+     * @return {?WebInspector.StatusBarItem}
      */
-    button: function()
+    item: function()
     {
         if (!(WebInspector.app instanceof WebInspector.ScreencastApp))
             return null;

third_party/WebKit/Source/devtools/front_end/main/module.json

@@ -150,30 +150,48 @@
             "className": "WebInspector.OverridesView.Revealer"
         },
         {
-            "type": "@WebInspector.StatusBarButton.Provider",
+            "type": "@WebInspector.StatusBarItem.Provider",
             "className": "WebInspector.InspectElementModeController.ToggleButtonProvider",
             "location": "toolbar-left",
             "order": 0,
             "actionId": "main.toggle-element-search"
         },
         {
-            "type": "@WebInspector.StatusBarButton.Provider",
+            "type": "@WebInspector.StatusBarItem.Provider",
             "className": "WebInspector.AdvancedApp.EmulationButtonProvider",
             "order": 1,
             "location": "toolbar-left"
         },
         {
-            "type": "@WebInspector.StatusBarButton.Provider",
-            "className": "WebInspector.DockController.ButtonProvider",
+            "type": "@WebInspector.StatusBarItem.Provider",
+            "className": "WebInspector.AdvancedApp.DeviceCounter",
+            "order": 0,
+            "location": "toolbar-right"
+        },
+        {
+            "type": "@WebInspector.StatusBarItem.Provider",
+            "className": "WebInspector.Main.WarningErrorCounter",
             "order": 1,
             "location": "toolbar-right"
         },
         {
-            "type": "@WebInspector.StatusBarButton.Provider",
-            "className": "WebInspector.ScreencastApp.StatusBarButtonProvider",
+            "type": "@WebInspector.StatusBarItem.Provider",
+            "className": "WebInspector.InspectorView.ToggleDrawerButtonProvider",
             "order": 2,
             "location": "toolbar-right"
         },
+        {
+            "type": "@WebInspector.StatusBarItem.Provider",
+            "className": "WebInspector.DockController.ButtonProvider",
+            "order": 4,
+            "location": "toolbar-right"
+        },
+        {
+            "type": "@WebInspector.StatusBarItem.Provider",
+            "className": "WebInspector.ScreencastApp.StatusBarButtonProvider",
+            "order": 5,
+            "location": "toolbar-right"
+        },
         {
             "type": "ui-setting",
             "title": "Disable cache (while DevTools is open)",

third_party/WebKit/Source/devtools/front_end/settings/module.json

@@ -11,11 +11,11 @@
             ]
         },
         {
-            "type": "@WebInspector.StatusBarButton.Provider",
+            "type": "@WebInspector.StatusBarItem.Provider",
             "actionId": "settings.show",
             "location": "toolbar-right",
             "title": "Settings",
-            "order": 0,
+            "order": 3,
             "elementClass": "settings-status-bar-item"
         },
         {

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

@@ -76,6 +76,84 @@ WebInspector.StatusBarItem.prototype = {
     __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);
+    /** @type {!Array.<!{element: !Element, counter: string, value: number, title: string}>} */
+    this._counters = [];
+    for (var i = 0; i < counters.length; ++i) {
+        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) {
+                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) {
+            var counter = this._counters[i];
+            var value = counter.value;
+            if (!counter.value) {
+                counter.element.classList.add("hidden");
+                continue;
+            }
+            counter.element.classList.remove("hidden");
+            counter.element.classList.toggle("status-bar-counter-item-first", !total);
+            counter.element.querySelector("span").textContent = value;
+            total += value;
+            if (counter.title) {
+                if (title)
+                    title += ", ";
+                title += counter.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}
@@ -426,15 +504,15 @@ WebInspector.StatusBarButton.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() {}
 }
 
 /**