Fix background services recording button tooltip not updating

When hitting the record button, the tooltip did not get updated from "start recording" to "stop recording"
https://imgur.com/a/KhHFT3k
This is due to that there are multiple views sharing a same action, so we can't toggle the action to change the tooltip like the ones in other tools (related change https://chromium-review.googlesource.com/c/chromium/src/+/1609707)

This CL update the button tooltip whenever the button is clicked
https://imgur.com/a/vyguTDV

Bug: 1117410
Change-Id: I53e71ce7f58ea94c04315027dcf63ec3a21538b3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2362528
Reviewed-by: Michael Liao <[email protected]>
Reviewed-by: Tony Ross <[email protected]>
Commit-Queue: Christy Chen <[email protected]>
diff --git a/front_end/resources/BackgroundServiceView.js b/front_end/resources/BackgroundServiceView.js
index 5798c4a..e297852 100644
--- a/front_end/resources/BackgroundServiceView.js
+++ b/front_end/resources/BackgroundServiceView.js
@@ -185,9 +185,15 @@
     }
 
     this._recordButton.setToggled(state.isRecording);
+    this._updateRecordButtonTooltip();
     this._showPreview(this._selectedEventNode);
   }
 
+  _updateRecordButtonTooltip() {
+    const buttonTooltip = this._recordButton.toggled() ? ls`Stop recording events` : ls`Start recording events`;
+    this._recordButton.setTitle(buttonTooltip, 'background-service.toggle-recording');
+  }
+
   /**
    * @param {!Common.EventTarget.EventTargetEvent} event
    */