[DevTools] Create a Background Service view for Periodic Sync

Add a new material UI icon:
- https://material.io/tools/icons/?icon=schedule&style=baseline

The UI is hidden behind an experiment flag.

Screenshot:
- https://bugs.chromium.org/p/chromium/issues/detail?id=986437#c1

Bug: 986437
Change-Id: I744df74453e887e2ba61877b5e9e05ef2166add7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1713505Reviewed-by: Alexei Filippov <alph@chromium.org>
Commit-Queue: Rayan Kanso <rayankans@chromium.org>
Cr-Commit-Position: refs/heads/master@{#680531}

content/browser/devtools/protocol/background_service_handler.cc

@@ -31,6 +31,9 @@ devtools::proto::BackgroundService ServiceNameToEnum(
   } else if (service_name ==
              BackgroundService::ServiceNameEnum::PaymentHandler) {
     return devtools::proto::BackgroundService::PAYMENT_HANDLER;
+  } else if (service_name ==
+             BackgroundService::ServiceNameEnum::PeriodicBackgroundSync) {
+    return devtools::proto::BackgroundService::PERIODIC_BACKGROUND_SYNC;
   }
   return devtools::proto::BackgroundService::UNKNOWN;
 }
@@ -47,6 +50,8 @@ std::string ServiceEnumToName(devtools::proto::BackgroundService service_enum) {
       return BackgroundService::ServiceNameEnum::Notifications;
     case devtools::proto::BackgroundService::PAYMENT_HANDLER:
       return BackgroundService::ServiceNameEnum::PaymentHandler;
+    case devtools::proto::BackgroundService::PERIODIC_BACKGROUND_SYNC:
+      return BackgroundService::ServiceNameEnum::PeriodicBackgroundSync;
     default:
       NOTREACHED();
   }

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

@@ -482,6 +482,7 @@ experimental domain BackgroundService
       pushMessaging
       notifications
       paymentHandler
+      periodicBackgroundSync
 
   # Enables event updates for the service.
   command startObserving

third_party/blink/renderer/devtools/front_end/Images/src/mediumIcons.svg

@@ -100,9 +100,9 @@
      id="namedview4913"
      showgrid="true"
      inkscape:zoom="5.2149126"
-     inkscape:cx="-97.043259"
+     inkscape:cx="-59.586191"
      inkscape:cy="76.536441"
-     inkscape:window-x="2611"
+     inkscape:window-x="39"
      inkscape:window-y="26"
      inkscape:window-maximized="0"
      inkscape:current-layer="svg4775">
@@ -886,4 +886,21 @@
        d="M 20,4 H 4 C 2.89,4 2.01,4.89 2.01,6 L 2,18 c 0,1.11 0.89,2 2,2 h 16 c 1.11,0 2,-0.89 2,-2 V 6 C 22,4.89 21.11,4 20,4 Z m 0,14 H 4 V 12 H 20 Z M 20,8 H 4 V 6 h 16 z"
        inkscape:connector-curvature="0" />
   </g>
+  <g
+     id="g306"
+     transform="matrix(0.66666667,0,0,0.66666667,48,0)">
+    <path
+       id="path289"
+       d="M 11.99,2 C 6.47,2 2,6.48 2,12 2,17.52 6.47,22 11.99,22 17.52,22 22,17.52 22,12 22,6.48 17.52,2 11.99,2 Z M 12,20 C 7.58,20 4,16.42 4,12 4,7.58 7.58,4 12,4 c 4.42,0 8,3.58 8,8 0,4.42 -3.58,8 -8,8 z"
+       inkscape:connector-curvature="0" />
+    <path
+       id="path291"
+       d="M 0,0 H 24 V 24 H 0 Z"
+       inkscape:connector-curvature="0"
+       style="fill:none" />
+    <path
+       id="path293"
+       d="M 12.5,7 H 11 v 6 l 5.25,3.15 0.75,-1.23 -4.5,-2.67 z"
+       inkscape:connector-curvature="0" />
+  </g>
 </svg>

third_party/blink/renderer/devtools/front_end/Images/src/optimize_svg.hashes

@@ -6,7 +6,7 @@
     "checkboxCheckmark.svg": "f039bf85cee42ad5c30ca3bfdce7912a",
     "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45",
     "smallIcons.svg": "19940dda6f171380bfd7d04d0061b44c",
-    "mediumIcons.svg": "0f1e355d25080d532dd89f4104fb176d",
+    "mediumIcons.svg": "9cb32f670ba43a7ab424eab281043e6b",
     "accelerometer-back.svg": "342973eb940ef43b409b28c2c6b0d520",
     "treeoutlineTriangles.svg": "2d26ab85d919f83d5021f2f385dffd0b",
     "chevrons.svg": "79b4b527771e30b6388ce664077b3409",

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

@@ -112,6 +112,8 @@ Main.Main = class {
     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(
+        'backgroundServicesPeriodicBackgroundSync', 'Background services section for Periodic Background Sync');
     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

@@ -124,6 +124,11 @@ Resources.ApplicationPanelSidebar = class extends UI.VBox {
             new Resources.BackgroundServiceTreeElement(panel, Protocol.BackgroundService.ServiceName.PaymentHandler);
         backgroundServiceTreeElement.appendChild(this.paymentHandlerTreeElement);
       }
+      if (Runtime.experiments.isEnabled('backgroundServicesPeriodicBackgroundSync')) {
+        this.periodicBackgroundSyncTreeElement = new Resources.BackgroundServiceTreeElement(
+            panel, Protocol.BackgroundService.ServiceName.PeriodicBackgroundSync);
+        backgroundServiceTreeElement.appendChild(this.periodicBackgroundSyncTreeElement);
+      }
       if (Runtime.experiments.isEnabled('backgroundServicesPushMessaging')) {
         this.pushMessagingTreeElement =
             new Resources.BackgroundServiceTreeElement(panel, Protocol.BackgroundService.ServiceName.PushMessaging);
@@ -252,6 +257,8 @@ Resources.ApplicationPanelSidebar = class extends UI.VBox {
         this.notificationsTreeElement._initialize(backgroundServiceModel);
       if (Runtime.experiments.isEnabled('backgroundServicesPaymentHandler'))
         this.paymentHandlerTreeElement._initialize(backgroundServiceModel);
+      if (Runtime.experiments.isEnabled('backgroundServicesPeriodicBackgroundSync'))
+        this.periodicBackgroundSyncTreeElement._initialize(backgroundServiceModel);
       if (Runtime.experiments.isEnabled('backgroundServicesPushMessaging'))
         this.pushMessagingTreeElement._initialize(backgroundServiceModel);
     }
@@ -771,6 +778,8 @@ Resources.BackgroundServiceTreeElement = class extends Resources.BaseStorageTree
         return 'mediumicon-bell';
       case Protocol.BackgroundService.ServiceName.PaymentHandler:
         return 'mediumicon-payment';
+      case Protocol.BackgroundService.ServiceName.PeriodicBackgroundSync:
+        return 'mediumicon-schedule';
       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

@@ -19,6 +19,8 @@ Resources.BackgroundServiceView = class extends UI.VBox {
         return ls`Notifications`;
       case Protocol.BackgroundService.ServiceName.PaymentHandler:
         return ls`Payment Handler`;
+      case Protocol.BackgroundService.ServiceName.PeriodicBackgroundSync:
+        return ls`Periodic Background Sync`;
       default:
         return '';
     }

third_party/blink/renderer/devtools/front_end/resources/resources_strings.grdp

@@ -169,6 +169,9 @@ table is empty.
   <message name="IDS_DEVTOOLS_83b33e9633245178cb76ecb91dd424d8" desc="Text in DOMStorage Items View of the Application panel">
     Select a value to preview
   </message>
+  <message name="IDS_DEVTOOLS_85b285ed4a5b8960e8f85a6e5c125680" desc="Text in the Periodic Background Service View of the Application panel">
+    Periodic Background Sync
+  </message>
   <message name="IDS_DEVTOOLS_86befdf33863a849060cf9f6d2425cdb" desc="Text in Indexed DBViews of the Application panel">
     Security origin
   </message>

third_party/blink/renderer/devtools/front_end/ui/Icon.js

@@ -170,6 +170,7 @@ UI.Icon.Descriptors = {
   'mediumicon-cloud': {position: 'a6', spritesheet: 'mediumicons', isMask: true},
   'mediumicon-bell': {position: 'b6', spritesheet: 'mediumicons', isMask: true},
   'mediumicon-payment': {position: 'c6', spritesheet: 'mediumicons', isMask: true},
+  'mediumicon-schedule': {position: 'd6', spritesheet: 'mediumicons', isMask: true},
 
   'badge-navigator-file-sync': {position: 'a9', spritesheet: 'largeicons'},
   'largeicon-activate-breakpoints': {position: 'b9', spritesheet: 'largeicons', isMask: true},