[Media Engagement] Add new fields to WebUI

Add the audio context and media element playbacks fields
to the Media Engagement WebUI.

BUG=878460

Change-Id: I25a2bdc28a9b98355269e56072c6dc98a019456a
Reviewed-on: https://chromium-review.googlesource.com/1195101
Commit-Queue: Becca Hughes <beccahughes@chromium.org>
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Reviewed-by: Ken Buchanan <kenrb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#587909}

chrome/browser/media/media_engagement_score.cc

@@ -147,7 +147,8 @@ MediaEngagementScore::GetScoreDetails() const {
   return media::mojom::MediaEngagementScoreDetails::New(
       origin_, actual_score(), visits(), media_playbacks(),
       last_media_playback_time().ToJsTime(), high_score(), audible_playbacks(),
-      significant_playbacks(), high_score_changes());
+      significant_playbacks(), high_score_changes(), audio_context_playbacks(),
+      media_element_playbacks());
 }
 
 MediaEngagementScore::~MediaEngagementScore() = default;

chrome/browser/media/media_engagement_score_details.mojom

@@ -26,6 +26,10 @@ struct MediaEngagementScoreDetails {
 
   // How many time the score changed `is_high` status.
   int32 high_score_changes;
+
+  // Details of the components which make up |media_playbacks|.
+  int32 audio_context_playbacks;
+  int32 media_element_playbacks;
 };
 
 struct MediaEngagementConfig {

chrome/browser/media/media_engagement_score_unittest.cc

@@ -150,6 +150,10 @@ class MediaEngagementScoreTest : public ChromeRenderViewHostTestHarness {
     EXPECT_EQ(details->audible_playbacks, score->audible_playbacks());
     EXPECT_EQ(details->significant_playbacks, score->significant_playbacks());
     EXPECT_EQ(details->high_score_changes, score->high_score_changes());
+    EXPECT_EQ(details->audio_context_playbacks,
+              score->audio_context_playbacks());
+    EXPECT_EQ(details->media_element_playbacks,
+              score->media_element_playbacks());
   }
 
   void OverrideFieldTrial(int min_visits,

chrome/browser/resources/media/media_engagement.html

@@ -38,7 +38,7 @@
       background: rgb(224, 236, 255);
       cursor: pointer;
       padding-bottom: 4px;
-      padding-right: 16px;
+      padding-right: 4px;
       padding-top: 4px;
       white-space: nowrap;
     }
@@ -87,6 +87,10 @@
       background: rgb(255, 255, 187);
     }
 
+    th.sort-column {
+      padding-right: 16px;
+    }
+
     th.sort-column::after {
       content: '▲';
       position: absolute;
@@ -133,6 +137,12 @@
         <th sort-key="mediaPlaybacks" sort-reverse>
           Sessions with playback
         </th>
+        <th sort-key="audioContextPlaybacks" sort-reverse>
+          Sessions with playback<br>(audio context only)
+        </th>
+        <th sort-key="mediaElementPlaybacks" sort-reverse>
+          Sessions with playback<br>(media element only)
+        </th>
         <th sort-key="audiblePlaybacks" sort-reverse>
           Audible Playbacks*
         </th>
@@ -166,6 +176,8 @@
       <td class="origin-cell"></td>
       <td class="visits-count-cell"></td>
       <td class="media-playbacks-count-cell"></td>
+      <td class="audio-context-playbacks-count-cell"></td>
+      <td class="media-element-playbacks-count-cell"></td>
       <td class="audible-playbacks-count-cell"></td>
       <td class="significant-playbacks-count-cell"></td>
       <td class="last-playback-time-cell"></td>

chrome/browser/resources/media/media_engagement.js

@@ -32,15 +32,17 @@ function createRow(rowInfo) {
   td[0].textContent = rowInfo.origin.url;
   td[1].textContent = rowInfo.visits;
   td[2].textContent = rowInfo.mediaPlaybacks;
-  td[3].textContent = rowInfo.audiblePlaybacks;
-  td[4].textContent = rowInfo.significantPlaybacks;
-  td[5].textContent = rowInfo.lastMediaPlaybackTime ?
+  td[3].textContent = rowInfo.audioContextPlaybacks;
+  td[4].textContent = rowInfo.mediaElementPlaybacks;
+  td[5].textContent = rowInfo.audiblePlaybacks;
+  td[6].textContent = rowInfo.significantPlaybacks;
+  td[7].textContent = rowInfo.lastMediaPlaybackTime ?
       new Date(rowInfo.lastMediaPlaybackTime).toISOString() :
       '';
-  td[6].textContent = rowInfo.isHigh ? 'Yes' : 'No';
-  td[7].textContent = rowInfo.highScoreChanges;
-  td[8].textContent = rowInfo.totalScore ? rowInfo.totalScore.toFixed(2) : '0';
-  td[9].getElementsByClassName('engagement-bar')[0].style.width =
+  td[8].textContent = rowInfo.isHigh ? 'Yes' : 'No';
+  td[9].textContent = rowInfo.highScoreChanges;
+  td[10].textContent = rowInfo.totalScore ? rowInfo.totalScore.toFixed(2) : '0';
+  td[11].getElementsByClassName('engagement-bar')[0].style.width =
       (rowInfo.totalScore * 50) + 'px';
   return document.importNode(template.content, true);
 }
@@ -80,7 +82,8 @@ function compareTableItem(sortKey, a, b) {
   if (sortKey == 'visits' || sortKey == 'mediaPlaybacks' ||
       sortKey == 'lastMediaPlaybackTime' || sortKey == 'totalScore' ||
       sortKey == 'audiblePlaybacks' || sortKey == 'significantPlaybacks' ||
-      sortKey == 'highScoreChanges' || sortKey == 'isHigh') {
+      sortKey == 'highScoreChanges' || sortKey == 'mediaElementPlaybacks' ||
+      sortKey == 'audioContextPlaybacks' || sortKey == 'isHigh') {
     return val1 - val2;
   }