1082695-simplifybuttons.patch

From: Jordan Santell <jsantell@mozilla.com>
Date: Sat, 9 May 2015 13:23:16 -0700
Subject: Bug 1082695 - Simplify the record start/stop time buttons, and more cleanly render the console.profile notifications during a console recording. r=vp

diff --git a/browser/devtools/performance/performance-view.js b/browser/devtools/performance/performance-view.js
index 64b38f0..c870480 100644
--- a/browser/devtools/performance/performance-view.js
+++ b/browser/devtools/performance/performance-view.js
@@ -101,18 +101,24 @@ let PerformanceView = {
       $(deck).selectedPanel = $(pane);
     }
 
     this._state = state;
 
     if (state === "console-recording") {
       let recording = PerformanceController.getCurrentRecording();
       let label = recording.getLabel() || "";
-      $(".console-profile-recording-notice").value = L10N.getFormatStr("consoleProfile.recordingNotice", label);
-      $(".console-profile-stop-notice").value = L10N.getFormatStr("consoleProfile.stopCommand", label);
+      // Wrap the label in quotes if it exists for the commands.
+      label = label ? `"${label}"` : "";
+
+      let startCommand = $(".console-profile-recording-notice .console-profile-command");
+      let stopCommand = $(".console-profile-stop-notice .console-profile-command");
+
+      startCommand.value = `console.profile(${label})`;
+      stopCommand.value = `console.profileEnd(${label})`;
     }
     this.emit(EVENTS.UI_STATE_CHANGED, state);
   },
 
   /**
    * Returns the state of the PerformanceView.
    */
   getState: function () {
diff --git a/browser/devtools/performance/performance.xul b/browser/devtools/performance/performance.xul
index 27b56fe..acd23a4 100644
--- a/browser/devtools/performance/performance.xul
+++ b/browser/devtools/performance/performance.xul
@@ -72,18 +72,18 @@
 
   <hbox class="theme-body" flex="1">
     <vbox id="recordings-pane">
       <toolbar id="recordings-toolbar"
                class="devtools-toolbar">
         <hbox id="recordings-controls"
               class="devtools-toolbarbutton-group">
           <toolbarbutton id="main-record-button"
-                         class="devtools-toolbarbutton record-button devtools-thobber"
-                         tooltiptext="&profilerUI.recordButton.tooltip;"/>
+                         class="devtools-toolbarbutton record-button"
+                         tooltiptext="&profilerUI.recordButton2.tooltip;"/>
           <toolbarbutton id="import-button"
                          class="devtools-toolbarbutton"
                          label="&profilerUI.importButton;"/>
           <toolbarbutton id="clear-button"
                          class="devtools-toolbarbutton"
                          label="&profilerUI.clearButton;"/>
         </hbox>
       </toolbar>
@@ -135,46 +135,54 @@
       </toolbar>
 
       <deck id="performance-view" flex="1">
         <hbox id="empty-notice"
               class="notice-container"
               align="center"
               pack="center"
               flex="1">
-          <label value="&profilerUI.emptyNotice1;"/>
-          <button class="devtools-toolbarbutton record-button"
-                  standalone="true" />
-          <label value="&profilerUI.emptyNotice2;"/>
+          <hbox class="devtools-toolbarbutton-group">
+            <toolbarbutton class="record-button"
+                           label="&profilerUI.startRecording;" />
+          </hbox>
         </hbox>
         <vbox id="performance-view-content" flex="1">
           <vbox id="overview-pane">
             <hbox id="markers-overview"/>
             <hbox id="memory-overview"/>
             <hbox id="time-framerate"/>
           </vbox>
           <deck id="details-pane-container" flex="1">
             <hbox id="recording-notice"
                   class="notice-container"
                   align="center"
                   pack="center"
                   flex="1">
-              <label value="&profilerUI.stopNotice1;"/>
-              <button class="devtools-toolbarbutton record-button"
-                      standalone="true" />
-              <label value="&profilerUI.stopNotice2;"/>
+              <hbox class="devtools-toolbarbutton-group">
+                <toolbarbutton class="record-button"
+                               label="&profilerUI.stopRecording;" />
+              </hbox>
             </hbox>
             <hbox id="console-recording-notice"
                   class="notice-container"
                   align="center"
                   pack="center"
                   flex="1">
-                  <vbox>
-                    <label class="console-profile-recording-notice" />
-                    <label class="console-profile-stop-notice" />
+                  <vbox flex="1" align="center">
+                    <hbox class="console-profile-recording-notice">
+                      <label value="&profilerUI.console.recordingNoticeStart;" />
+                      <label class="console-profile-command" />
+                      <label value="&profilerUI.console.recordingNoticeEnd;" />
+                    </hbox>
+                    <hbox class="console-profile-stop-notice">
+                      <label value="&profilerUI.console.stopCommandStart;" />
+                      <label class="console-profile-command" />
+                      <label value="&profilerUI.console.stopCommandEnd;" />
+                    </hbox>
                   </vbox>
             </hbox>
             <deck id="details-pane" flex="1">
               <hbox id="waterfall-view" flex="1">
                 <vbox id="waterfall-breakdown" flex="1" class="devtools-main-content" />
                 <splitter class="devtools-side-splitter"/>
                 <vbox id="waterfall-details"
                       class="theme-sidebar"
diff --git a/browser/themes/shared/devtools/performance.inc.css b/browser/themes/shared/devtools/performance.inc.css
index a81af4c..f7d6abc 100644
--- a/browser/themes/shared/devtools/performance.inc.css
+++ b/browser/themes/shared/devtools/performance.inc.css
@@ -74,35 +74,64 @@
   min-height: 28px;
   margin: 0;
 }
 
 #performance-view .notice-container vbox {
   text-align: center;
 }
 
+.console-profile-command {
+  font-family: monospace;
+  margin: 3px 2px;
+}
+
+.theme-dark #performance-view toolbarbutton.record-button {
+  background-color: var(--theme-tab-toolbar-background);
+  border: 1px solid var(--theme-sidebar-background);
+}
+
+.theme-light #performance-view toolbarbutton.record-button {
+  background-color: rgba(221, 221, 221, 1);
+  border: 1px solid rgba(204, 204, 204, 1);
+}
+
+#performance-view toolbarbutton.record-button {
+  margin: 5px;
+  padding: 5px;
+  cursor: pointer;
+  text-shadow: none;
+}
+
+#performance-view toolbarbutton.record-button[checked],
+#performance-view toolbarbutton.record-button[checked] {
+  color: var(--theme-selection-color);
+  background: var(--theme-selection-background);
+}
+
+
 /* Overview Panel */
 
-.record-button {
+#main-record-button {
   list-style-image: url(profiler-stopwatch.svg);
 }
 
-.record-button[checked] {
+#main-record-button[checked] {
   list-style-image: url(profiler-stopwatch-checked.svg);
 }
 
-.record-button[locked] {
+#main-record-button[locked] {
   pointer-events: none;
 }
 
-.record-button .button-icon {
+#main-record-button .button-icon {
   margin: 0;
 }
 
-.record-button .button-text {
+#main-record-button .button-text {
   display: none;
 }
 
 /* Details Panel */
 
 #select-waterfall-view {
   list-style-image: url(performance-icons.svg#details-waterfall);
 }
-- 
2.2.1