[DevTools] Add a Background Services view for the Payment API

The new view is behind a flag.
Screenshot: https://bugs.chromium.org/p/chromium/issues/detail?id=980291#c3

Bug: 980291
Change-Id: I4c420c292a57796b7fc2042902be6661131fe5d5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1684995
Commit-Queue: Rayan Kanso <rayankans@chromium.org>
Reviewed-by: Alexei Filippov <alph@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#674609}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 4e07ff4d5a87dd7bdf8da9d64a1821faf0b436b3

front_end/main/Main.js

@@ -110,6 +110,7 @@ Main.Main = class {
     Runtime.experiments.register('sourcesPrettyPrint', 'Automatically pretty print in the Sources Panel');
     Runtime.experiments.register('backgroundServices', 'Background web platform feature events', true);
     Runtime.experiments.register('backgroundServicesNotifications', 'Background services section for Notifications');
+    Runtime.experiments.register('backgroundServicesPaymentHandler', 'Background services section for Payment Handler');
     Runtime.experiments.register('backgroundServicesPushMessaging', 'Background services section for Push Messaging');
     Runtime.experiments.register('blackboxJSFramesOnTimeline', 'Blackbox JavaScript frames on Timeline', true);
     Runtime.experiments.register('emptySourceMapAutoStepping', 'Empty sourcemap auto-stepping');

front_end/resources/ApplicationPanelSidebar.js

@@ -119,6 +119,11 @@ Resources.ApplicationPanelSidebar = class extends UI.VBox {
             new Resources.BackgroundServiceTreeElement(panel, Protocol.BackgroundService.ServiceName.Notifications);
         backgroundServiceTreeElement.appendChild(this.notificationsTreeElement);
       }
+      if (Runtime.experiments.isEnabled('backgroundServicesPaymentHandler')) {
+        this.paymentHandlerTreeElement =
+            new Resources.BackgroundServiceTreeElement(panel, Protocol.BackgroundService.ServiceName.PaymentHandler);
+        backgroundServiceTreeElement.appendChild(this.paymentHandlerTreeElement);
+      }
       if (Runtime.experiments.isEnabled('backgroundServicesPushMessaging')) {
         this.pushMessagingTreeElement =
             new Resources.BackgroundServiceTreeElement(panel, Protocol.BackgroundService.ServiceName.PushMessaging);
@@ -245,6 +250,8 @@ Resources.ApplicationPanelSidebar = class extends UI.VBox {
       this.backgroundSyncTreeElement._initialize(backgroundServiceModel);
       if (Runtime.experiments.isEnabled('backgroundServicesNotifications'))
         this.notificationsTreeElement._initialize(backgroundServiceModel);
+      if (Runtime.experiments.isEnabled('backgroundServicesPaymentHandler'))
+        this.paymentHandlerTreeElement._initialize(backgroundServiceModel);
       if (Runtime.experiments.isEnabled('backgroundServicesPushMessaging'))
         this.pushMessagingTreeElement._initialize(backgroundServiceModel);
     }
@@ -762,6 +769,8 @@ Resources.BackgroundServiceTreeElement = class extends Resources.BaseStorageTree
         return 'mediumicon-cloud';
       case Protocol.BackgroundService.ServiceName.Notifications:
         return 'mediumicon-bell';
+      case Protocol.BackgroundService.ServiceName.PaymentHandler:
+        return 'mediumicon-payment';
       default:
         console.error(`Service ${this._serviceName} does not have a dedicated icon`);
         return 'mediumicon-table';

front_end/resources/BackgroundServiceView.js

@@ -17,6 +17,8 @@ Resources.BackgroundServiceView = class extends UI.VBox {
         return ls`Push Messaging`;
       case Protocol.BackgroundService.ServiceName.Notifications:
         return ls`Notifications`;
+      case Protocol.BackgroundService.ServiceName.PaymentHandler:
+        return ls`Payment Handler`;
       default:
         return '';
     }

front_end/resources/resources_strings.grdp

@@ -404,4 +404,7 @@ read the &quot;<ph name="THIS_TABLENAME">$1s</ph>&quot; table.
   <message name="IDS_DEVTOOLS_f31bbdd1b3e85bccd652680e16935819" desc="">
     Source
   </message>
+  <message name="IDS_DEVTOOLS_fb1508747fe448fd8b006e923ba1c3ef" desc="">
+    Payment Handler
+  </message>
 </grit-part>