Add capture resolution to user metrics field

Bug: 962834
Test: On both v1, v3 device, the resolution can be logged to GA
dashbarod after capturing under different modes.

(cherry picked from commit 4135587910f082d3d9b884e373b9c7dcd057aaa8)

Change-Id: Ib230863242b1ee38890d8865c89cfa6b5a77f6fa
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1637020
Commit-Queue: Kuo Jen Wei <inker@chromium.org>
Reviewed-by: Sheng-hao Tsao <shenghao@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#665452}
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1651532
Cr-Commit-Position: refs/branch-heads/3809@{#207}
Cr-Branched-From: d82dec1a818f378c464ba307ddd9c92133eac355-refs/heads/master@{#665002}

diff --git a/chrome/browser/resources/chromeos/camera/src/js/metrics.js b/chrome/browser/resources/chromeos/camera/src/js/metrics.js
index 107e6c8..9368456 100644
--- a/chrome/browser/resources/chromeos/camera/src/js/metrics.js
+++ b/chrome/browser/resources/chromeos/camera/src/js/metrics.js

@@ -95,10 +95,12 @@
  * Returns event builder for the metrics type: capture.
  * @param {string} facingMode Camera facing-mode of the capture.
  * @param {number=} length Length of 1 minute buckets for captured video.
+ * @param {number} width The width of the capture resolution.
+ * @param {number} height The height of the capture resolution.
  * @return {analytics.EventBuilder}
  * @private
  */
-cca.metrics.captureType_ = function(facingMode, length) {
+cca.metrics.captureType_ = function(facingMode, length, [width, height]) {
   var condState = (states, cond) => {
     // Return the first existing state among the given states only if there is
     // no gate condition or the condition is met.
@@ -117,6 +119,7 @@
       .dimen(7, condState(['mic'], 'video-mode'))
       .dimen(8, condState(['max-wnd']))
       .dimen(9, condState(['tall']))
+      .dimen(10, `${width}x${height}`)
       .value(length || 0);
 };
 

diff --git a/chrome/browser/resources/chromeos/camera/src/js/util.js b/chrome/browser/resources/chromeos/camera/src/js/util.js
index 16b1e8c..386b590 100644
--- a/chrome/browser/resources/chromeos/camera/src/js/util.js
+++ b/chrome/browser/resources/chromeos/camera/src/js/util.js

@@ -848,7 +848,7 @@
   child.height = Math.round(scale * srcHeight);
 };
 
-/*
+/**
  * Checks if the window is maximized or fullscreen.
  * @return {boolean} True if maximized or fullscreen, false otherwise.
  */
@@ -867,7 +867,7 @@
       'https://support.google.com/chromebook/?p=camera_usage_on_chromebook');
 };
 
-/*
+/**
  * Sets up i18n messages on DOM subtree by i18n attributes.
  * @param {HTMLElement} rootElement Root of DOM subtree to be set up with.
  */
@@ -887,3 +887,18 @@
   cca.tooltip.setup(getElements('i18n-label'))
       .forEach((element) => setAriaLabel(element, 'i18n-label'));
 };
+
+/**
+ * Reads blob into Image.
+ * @param {Blob} blob
+ * @return {Promise<HTMLImageElement>}
+ * @throw {Error}
+ */
+cca.util.blobToImage = function(blob) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img. => resolve(img);
+    img. => reject(new Error('Failed to load unprocessed image'));
+    img.src = URL.createObjectURL(blob);
+  });
+};

diff --git a/chrome/browser/resources/chromeos/camera/src/js/views/camera.js b/chrome/browser/resources/chromeos/camera/src/js/views/camera.js
index f3e65b59..51e53325 100644
--- a/chrome/browser/resources/chromeos/camera/src/js/views/camera.js
+++ b/chrome/browser/resources/chromeos/camera/src/js/views/camera.js

@@ -87,7 +87,8 @@
       this.stop_.bind(this), async (blob, isMotionPicture, filename) => {
         if (blob) {
           cca.metrics.log(
-              cca.metrics.Type.CAPTURE, this.facingMode_, blob.mins);
+              cca.metrics.Type.CAPTURE, this.facingMode_, blob.mins,
+              blob.resolution);
           try {
             await this.model_.savePicture(blob, isMotionPicture, filename);
           } catch (e) {

diff --git a/chrome/browser/resources/chromeos/camera/src/js/views/camera/modes.js b/chrome/browser/resources/chromeos/camera/src/js/views/camera/modes.js
index ea3878a..03fe9e9b 100644
--- a/chrome/browser/resources/chromeos/camera/src/js/views/camera/modes.js
+++ b/chrome/browser/resources/chromeos/camera/src/js/views/camera/modes.js

@@ -509,6 +509,8 @@
       var recordedBlob = new Blob(
           recordedChunks, {type: cca.views.camera.Video.VIDEO_MIMETYPE});
       recordedBlob.mins = this.recordTime_.stop();
+      const {width, height} = this.stream_.getVideoTracks()[0].getSettings();
+      recordedBlob.resolution = [width, height];
       recordedChunks = [];
       if (recordedBlob.size) {
         resolve(recordedBlob);
@@ -600,7 +602,10 @@
       imageHeight: caps.imageHeight.max,
     };
   }
-  return await this.imageCapture_.takePhoto(photoSettings);
+  const blob = await this.imageCapture_.takePhoto(photoSettings);
+  const image = await cca.util.blobToImage(blob);
+  blob.resolution = [image.width, image.height];
+  return blob;
 };
 
 /**
@@ -638,29 +643,24 @@
 /**
  * Crops out maximum possible centered square from the image blob.
  * @param {Blob} blob
- * @return {Promise<Blob>} Promise with result cropped square image.
+ * @return {Blob} Promise with result cropped square image.
+ * @async
  */
-cca.views.camera.Square.prototype.cropSquare = function(blob) {
-  return new Promise((resolve, reject) => {
-    var img = new Image();
-    img. => {
-      let side = Math.min(img.width, img.height);
-      let canvas = document.createElement('canvas');
-      canvas.width = side;
-      canvas.height = side;
-      let ctx = canvas.getContext('2d');
-      ctx.drawImage(
-          img, Math.floor((img.width - side) / 2),
-          Math.floor((img.height - side) / 2), side, side, 0, 0, side, side);
-      try {
-        canvas.toBlob(resolve, 'image/jpeg');
-      } catch (e) {
-        reject(e);
-      }
-    };
-    img. => reject(new Error('Failed to load unprocessed image'));
-    img.src = URL.createObjectURL(blob);
+cca.views.camera.Square.prototype.cropSquare = async function(blob) {
+  const img = await cca.util.blobToImage(blob);
+  let side = Math.min(img.width, img.height);
+  let canvas = document.createElement('canvas');
+  canvas.width = side;
+  canvas.height = side;
+  let ctx = canvas.getContext('2d');
+  ctx.drawImage(
+      img, Math.floor((img.width - side) / 2),
+      Math.floor((img.height - side) / 2), side, side, 0, 0, side, side);
+  const croppedBlob = await new Promise((resolve) => {
+    canvas.toBlob(resolve, 'image/jpeg');
   });
+  croppedBlob.resolution = blob.resolution;
+  return croppedBlob;
 };
 
 /**
@@ -732,6 +732,8 @@
                        'error_msg_take_photo_failed');
       throw e;
     }
+    const image = await cca.util.blobToImage(blob);
+    blob.resolution = [image.width, image.height];
     if (!playSound) {
       playSound = true;
       cca.sound.play('#sound-shutter');