[DevTools] Start/stop of timeline recording should set UI controls disabled/enabled respectively.

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 312 matching lines @@
         }
         this._currentViews = [];
         this._stackView.detachChildViews();
     },
 
     _createRecordingOptions: function()
     {
         var topPaneSidebarElement = this._topPane.sidebarElement();
 
         this._captureStacksSetting = WebInspector.settings.createSetting("timelineCaptureStacks", true);
-        topPaneSidebarElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Capture stacks"),
-                                          this._captureStacksSetting, true, undefined,
-                                          WebInspector.UIString("Capture JavaScript stack on every timeline event")));
+
+        this._recordingOptionUIControls = [];
+        captureStacksCheckbox = document.createElement("input");
+        captureStacksLabel = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Capture stacks"),
+                                                                           this._captureStacksSetting, true, captureStacksCheckbox,
+                                                                           WebInspector.UIString("Capture JavaScript stack on every timeline event"))
+        this._recordingOptionUIControls.push({ "label": captureStacksLabel, "checkbox": captureStacksCheckbox });
+        topPaneSidebarElement.appendChild(captureStacksLabel);
 
         this._captureMemorySetting = WebInspector.settings.createSetting("timelineCaptureMemory", false);
-        topPaneSidebarElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Capture memory"),
-                                          this._captureMemorySetting, true, undefined,
-                                          WebInspector.UIString("Capture memory information on every timeline event")));
+        captureMemoryCheckbox = document.createElement("input");
+        captureMemoryLabel = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Capture memory"),
+                                                                           this._captureMemorySetting, true, captureMemoryCheckbox,
+                                                                           WebInspector.UIString("Capture memory information on every timeline event"));
+        this._recordingOptionUIControls.push({ "label": captureMemoryLabel, "checkbox": captureMemoryCheckbox });
+        topPaneSidebarElement.appendChild(captureMemoryLabel);
         this._captureMemorySetting.addChangeListener(this._onModeChanged, this);
 
         if (Capabilities.canProfilePower) {
             this._capturePowerSetting = WebInspector.settings.createSetting("timelineCapturePower", false);
-            topPaneSidebarElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Capture power"),
-                                              this._capturePowerSetting, true, undefined,
-                                              WebInspector.UIString("Capture power information")));
+            capturePowerCheckbox = document.createElement("input");
+            capturePowerLabel = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Capture power"),
+                                                                              this._capturePowerSetting, true, capturePowerCheckbox,
+                                                                              WebInspector.UIString("Capture power information"));
+            this._recordingOptionUIControls.push({ "label": capturePowerLabel, "checkbox": capturePowerCheckbox });
+            topPaneSidebarElement.appendChild(capturePowerLabel);
             this._capturePowerSetting.addChangeListener(this._onModeChanged, this);
         }
 
         if (WebInspector.experimentsSettings.timelineTracingMode.isEnabled()) {
             this._captureTracingSetting = WebInspector.settings.createSetting("timelineCaptureTracing", false);
-            topPaneSidebarElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Capture tracing"),
-                                              this._captureTracingSetting, true, undefined,
-                                              WebInspector.UIString("Capture tracing information")));
+            captureTracingCheckbox = document.createElement("input");
+            captureTracingLabel = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Capture... tracing"),
+                                                                                this._captureTracingSetting, true, captureTracingCheckbox,
+                                                                                WebInspector.UIString("Capture tracing information"));
+            this._recordingOptionUIControls.push({ "label": captureTracingLabel, "checkbox": captureTracingCheckbox });
+            topPaneSidebarElement.appendChild(captureTracingLabel);
             this._captureTracingSetting.addChangeListener(this._onModeChanged, this);
         } else if (WebInspector.experimentsSettings.timelineOnTraceEvents.isEnabled()) {
             this._captureLayersAndPicturesSetting = WebInspector.settings.createSetting("timelineCaptureLayersAndPictures", false);
-            topPaneSidebarElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Capture pictures"),
-                                              this._captureLayersAndPicturesSetting, true, undefined,
-                                              WebInspector.UIString("Capture graphics layer positions and painted pictures")));
+            captureLayersAndPicturesCheckbox = document.createElement("input");
+            captureLayersAndPicturesLabel = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Capture pictures"),
+                                                                                          this._captureLayersAndPicturesSetting, true, captureLayersAndPicturesCheckbox,
+                                                                                          WebInspector.UIString("Capture graphics layer positions and painted pictures"));
+            this._recordingOptionUIControls.push({ "label": captureLayersAndPicturesLabel, "checkbox": captureLayersAndPicturesCheckbox });
+            topPaneSidebarElement.appendChild(captureLayersAndPicturesLabel);

[aandrey, 2014/07/03 08:25:37]

now let's extract common code to a method, like:
this._createSettingCheckbox(WebInspector.UIString("Capture pictures"),
this._captureLayersAndPicturesSetting, WebInspector.UIString("Capture graphics
layer positions and painted pictures"));

[vivekg, 2014/07/03 10:36:22]

Done.

         }
     },
 
     _createStatusBarItems: function()
     {
         var panelStatusBarElement = this.element.createChild("div", "panel-status-bar");
         this._statusBarButtons = /** @type {!Array.<!WebInspector.StatusBarItem>} */ ([]);
 
         this.toggleTimelineButton = new WebInspector.StatusBarButton("", "record-profile-status-bar-item");
         this.toggleTimelineButton.addEventListener("click", this._toggleTimelineButtonClicked, this);
@@ skipping 286 matching lines @@
 
         this._timelineView().setFrameModel(isFrameMode ? this._frameModel() : null);
         this._overviewPane.setOverviewControls(this._overviewControls);
         this.doResize();
         this._updateSelectedRangeStats();
 
         this._stackView.show(this._searchableView.element);
     },
 
     /**
+     * @param {boolean} disabled
+     */
+    _disableUIControls: function(disabled) {
+        this._recordingOptionUIControls.forEach(function(uiControl) {
+            uiControl.checkbox.disabled = disabled;
+            if (disabled)
+                uiControl.label.classList.add("disabled-label");
+            else
+                uiControl.label.classList.remove("disabled-label");
+        });
+        WebInspector.inspectorView.setCurrentPanelLocked(disabled);
+    },
+
+    /**
      * @param {boolean} userInitiated
      */
     _startRecording: function(userInitiated)
     {
         this._userInitiatedRecording = userInitiated;
         this._model.startRecording(this._captureStacksSetting.get(), this._captureMemorySetting.get(), this._captureLayersAndPicturesSetting && this._captureLayersAndPicturesSetting.get());
         if (WebInspector.experimentsSettings.timelineNoLiveUpdate.isEnabled() && this._lazyFrameModel)
             this._lazyFrameModel.setMergeRecords(false);
 
         for (var i = 0; i < this._overviewControls.length; ++i)
             this._overviewControls[i].timelineStarted();
 
         if (userInitiated)
             WebInspector.userMetrics.TimelineStarted.record();
-        WebInspector.inspectorView.setCurrentPanelLocked(true);
+        this._disableUIControls(true);
     },
 
     _stopRecording: function()
     {
         this._stopPending = true;
         this._updateToggleTimelineButton(false);
         this._userInitiatedRecording = false;
         this._model.stopRecording();
         if (this._progressElement)
             this._updateProgress(WebInspector.UIString("Retrieving events\u2026"));
 
         for (var i = 0; i < this._overviewControls.length; ++i)
             this._overviewControls[i].timelineStopped();
-        WebInspector.inspectorView.setCurrentPanelLocked(false);
+        this._disableUIControls(false);
     },
 
     _onProfilingStateChanged: function()
     {
         this._updateToggleTimelineButton(this.toggleTimelineButton.toggled);
     },
 
     /**
      * @param {boolean} toggled
      */
@@ skipping 738 matching lines @@
      * @param {!WebInspector.TimelineModel.Record} record
      * @return {boolean}
      */
     accept: function(record)
     {
         return !this._regex || this._uiUtils.testContentMatching(record, this._regex);
     },
 
     __proto__: WebInspector.TimelineModel.Filter.prototype
 }