Timeline: add labels around status bar controls

Source/devtools/front_end/timeline/TimelinePanel.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel 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.
@@ skipping 290 matching lines @@
         clearButton.addEventListener("click", this._onClearButtonClick, this);
         this._panelToolbar.appendStatusBarItem(clearButton);
 
         this._filterBar = this._createFilterBar();
         this._panelToolbar.appendStatusBarItem(this._filterBar.filterButton());
 
         var garbageCollectButton = new WebInspector.StatusBarButton(WebInspector.UIString("Collect garbage"), "garbage-collect-status-bar-item");
         garbageCollectButton.addEventListener("click", this._garbageCollectButtonClicked, this);
         this._panelToolbar.appendStatusBarItem(garbageCollectButton);
 
+        var viewModeLabel = new WebInspector.StatusBarText(WebInspector.UIString("View Mode:"), "timeline-status-bar-group-label");
+        this._panelToolbar.appendStatusBarItem(viewModeLabel);
+
         var framesToggleButton = new WebInspector.StatusBarButton(WebInspector.UIString("Frames view. (Activity split into frames)"), "histogram-status-bar-item");
         framesToggleButton.setToggled(this._overviewModeSetting.get() === WebInspector.TimelinePanel.OverviewMode.Frames);
         framesToggleButton.addEventListener("click", this._overviewModeChanged.bind(this, framesToggleButton));
         this._panelToolbar.appendStatusBarItem(framesToggleButton);
 
         this._flameChartToggleButton = new WebInspector.StatusBarButton(WebInspector.UIString("Flame chart view. (Use WASD or time selection to navigate)"), "flame-chart-status-bar-item");
         this._flameChartToggleButton.setToggled(this._flameChartEnabledSetting.get());
         this._flameChartToggleButton.addEventListener("click", this._flameChartEnabledChanged.bind(this));
         this._panelToolbar.appendStatusBarItem(this._flameChartToggleButton);
 
+        var captureSettingsLabel = new WebInspector.StatusBarText(WebInspector.UIString("Capture Details:"), "timeline-status-bar-group-label");
+        this._panelToolbar.appendStatusBarItem(captureSettingsLabel);
+
         this._captureCausesSetting = WebInspector.settings.createSetting("timelineCaptureCauses", true);
         this._captureCausesSetting.addChangeListener(this._refreshViews, this);
         this._panelToolbar.appendStatusBarItem(this._createSettingCheckbox(WebInspector.UIString("Causes"),
                                                                       this._captureCausesSetting,
                                                                       WebInspector.UIString("Capture causes (e.g., stack traces) for timeline events. (Has performance overhead)")));
         this._enableJSSamplingSettingSetting = WebInspector.settings.createSetting("timelineEnableJSSampling", false);
         this._panelToolbar.appendStatusBarItem(this._createSettingCheckbox(WebInspector.UIString("JS Profiler"),
                                                                       this._enableJSSamplingSettingSetting,
                                                                       WebInspector.UIString("Enable JavaScript sampling profiler. (Has performance overhead)")));
 
@@ skipping 1256 matching lines @@
 WebInspector.TimelinePanelFactory.prototype = {
     /**
      * @override
      * @return {!WebInspector.Panel}
      */
     createPanel: function()
     {
         return WebInspector.TimelinePanel.instance();
     }
 }