Bring UI inline with Firefox 50

Author: keithclark

src/firefox/chrome/tool.js

@@ -175,8 +175,15 @@ let ToolbarView = {
         this._clearButton = $('#clear-button');
         this._preserveLogCheckbox = $('#preserve-log');
 
-        this._captureToggleButton.setAttribute('label', L10N.getStr('startLabel'));
-        this._clearButton.setAttribute('label', L10N.getStr('clearLabel'));
+        // Prior to v48, use buttons text labels instead of icons. Altough pre-48
+        // supported icons, the icon colouring requirements were different
+        if (appVersion < 50) {
+            this._captureToggleButton.classList.remove('record-button');
+            this._clearButton.classList.remove('devtools-clear-icon');
+            this._clearButton.setAttribute('label', L10N.getStr('clearLabel'));
+       }
+
+        this._clearButton.setAttribute('tooltiptext', L10N.getStr('clearTooltip'));
         this._preserveLogCheckbox.setAttribute('label', L10N.getStr('preserveLogLabel'));
 
         this._onCaptureTogglePressed = this._onCaptureTogglePressed.bind(this);
@@ -215,12 +222,18 @@ let ToolbarView = {
         BeaconPropertiesView.hide();
     },
     _onBeaconMonitorStart: function() {
-        let label = L10N.getStr('stopLabel');
-        this._captureToggleButton.setAttribute('label', label);
+        if (appVersion < 50) {
+            this._captureToggleButton.setAttribute('label', L10N.getStr('stopLabel'));
+        }
+        this._captureToggleButton.setAttribute('tooltiptext', L10N.getStr('stopTooltip'));
+        this._captureToggleButton.setAttribute('checked', 'true');
     },
     _onBeaconMonitorStop: function() {
-        let label = L10N.getStr('startLabel');
-        this._captureToggleButton.setAttribute('label', label);
+        if (appVersion < 50) {
+            this._captureToggleButton.setAttribute('label', L10N.getStr('startLabel'));
+        }
+        this._captureToggleButton.setAttribute('tooltiptext', L10N.getStr('startTooltip'));
+        this._captureToggleButton.removeAttribute('checked');
     }
 };
 

src/firefox/chrome/tool.xul

@@ -12,8 +12,8 @@
     <box>
       <toolbar class="devtools-toolbar" flex="1">
         <hbox class="devtools-toolbarbutton-group">
-          <toolbarbutton id="capture-button" class="devtools-toolbarbutton" />
-          <toolbarbutton id="clear-button" class="devtools-toolbarbutton" />
+          <toolbarbutton id="clear-button" class="devtools-toolbarbutton devtools-clear-icon" />
+          <toolbarbutton id="capture-button" class="devtools-toolbarbutton record-button" />
         </hbox>
         <checkbox id="preserve-log" checked="true" />
       </toolbar>

src/firefox/locale/en-US/strings.properties

@@ -3,8 +3,11 @@ devtoolsTooltip=Google Analytics Debugger
 
 # Button labels
 startLabel=Start
+startTooltip=Start recording
 stopLabel=Stop
+stopTooltip=Stop recording
 clearLabel=Clear
+clearTooltip=Clear the beacon log
 preserveLogLabel=Preserve log
 
 # Tracker

src/firefox/skin/icon-record.svg

@@ -72,3 +72,20 @@
     background-position: 45px 50%;
     padding-left: 60px;
 }
+
+.record-button {
+  list-style-image: url(icon-record.svg);
+}
+
+#trackers-list {
+    min-width: 150px;
+}
+#tracker-beacons {
+    min-width: 300px;
+}
+#beacon-properties {
+    min-width: 300px;
+}
+#preserve-log {
+    margin-left: .75em;
+}