[DevTools] Add Notifications & Push Messaging views.

Add basic UI for Notifications & Push Messaging in Application >
Background Services.
One UI flag per feature is created.

TBR=caseq@chromium.org

Screenshot: crbug.com/942174#c28
Bug: 942174
Change-Id: Ifcdca9d3d78593968b0bd93d02d9dfea9419b822
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1611612
Commit-Queue: Rayan Kanso <rayankans@chromium.org>
Reviewed-by: Alexei Filippov <alph@chromium.org>
Cr-Commit-Position: refs/heads/master@{#661384}

third_party/blink/renderer/core/inspector/browser_protocol.pdl

@@ -479,6 +479,8 @@ experimental domain BackgroundService
     enum
       backgroundFetch
       backgroundSync
+      pushMessaging
+      notifications
 
   # Enables event updates for the service.
   command startObserving

third_party/blink/renderer/devtools/front_end/main/Main.js

@@ -109,6 +109,8 @@ Main.Main = class {
     Runtime.experiments.register('applyCustomStylesheet', 'Allow custom UI themes');
     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('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');
     Runtime.experiments.register('inputEventsOnTimelineOverview', 'Input events on Timeline overview', true);

third_party/blink/renderer/devtools/front_end/resources/ApplicationPanelSidebar.js

@@ -113,6 +113,17 @@ Resources.ApplicationPanelSidebar = class extends UI.VBox {
       this.backgroundSyncTreeElement =
           new Resources.BackgroundServiceTreeElement(panel, Protocol.BackgroundService.ServiceName.BackgroundSync);
       backgroundServiceTreeElement.appendChild(this.backgroundSyncTreeElement);
+
+      if (Runtime.experiments.isEnabled('backgroundServicesNotifications')) {
+        this.notificationsTreeElement =
+            new Resources.BackgroundServiceTreeElement(panel, Protocol.BackgroundService.ServiceName.Notifications);
+        backgroundServiceTreeElement.appendChild(this.notificationsTreeElement);
+      }
+      if (Runtime.experiments.isEnabled('backgroundServicesPushMessaging')) {
+        this.pushMessagingTreeElement =
+            new Resources.BackgroundServiceTreeElement(panel, Protocol.BackgroundService.ServiceName.PushMessaging);
+        backgroundServiceTreeElement.appendChild(this.pushMessagingTreeElement);
+      }
     }
 
     this._resourcesSection = new Resources.ResourcesSection(panel, this._addSidebarSection(Common.UIString('Frames')));
@@ -232,6 +243,10 @@ Resources.ApplicationPanelSidebar = class extends UI.VBox {
     if (Runtime.experiments.isEnabled('backgroundServices')) {
       this.backgroundFetchTreeElement._initialize(backgroundServiceModel);
       this.backgroundSyncTreeElement._initialize(backgroundServiceModel);
+      if (Runtime.experiments.isEnabled('backgroundServicesNotifications'))
+        this.notificationsTreeElement._initialize(backgroundServiceModel);
+      if (Runtime.experiments.isEnabled('backgroundServicesPushMessaging'))
+        this.pushMessagingTreeElement._initialize(backgroundServiceModel);
     }
   }
 
@@ -743,6 +758,10 @@ Resources.BackgroundServiceTreeElement = class extends Resources.BaseStorageTree
         return 'mediumicon-fetch';
       case Protocol.BackgroundService.ServiceName.BackgroundSync:
         return 'mediumicon-sync';
+      case Protocol.BackgroundService.ServiceName.PushMessaging:
+        return 'mediumicon-cloud';
+      case Protocol.BackgroundService.ServiceName.Notifications:
+        return 'mediumicon-bell';
       default:
         console.error(`Service ${this._serviceName} does not have a dedicated icon`);
         return 'mediumicon-table';

third_party/blink/renderer/devtools/front_end/resources/BackgroundServiceView.js

@@ -13,6 +13,10 @@ Resources.BackgroundServiceView = class extends UI.VBox {
         return ls`Background Fetch`;
       case Protocol.BackgroundService.ServiceName.BackgroundSync:
         return ls`Background Sync`;
+      case Protocol.BackgroundService.ServiceName.PushMessaging:
+        return ls`Push Messaging`;
+      case Protocol.BackgroundService.ServiceName.Notifications:
+        return ls`Notifications`;
       default:
         return '';
     }