Add UMA metrics to Photo Editor

chrome/browser/resources/file_manager/js/image_editor/gallery.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /*
  * Base class that Ribbon uses to display photos.
  */
 
 function RibbonClient() {}
 
@@ skipping 207 matching lines @@
   function initRibbon() {
     self.ribbon_.load(urls, selectedIndex);
     // Flash the ribbon briefly to let the user know it is there.
     self.cancelFading_();
     self.initiateFading_(Gallery.FIRST_FADE_TIMEOUT);
   }
 
   var selectedURL = urls[selectedIndex];
   // Initialize the ribbon only after the selected image is fully loaded.
   this.metadataProvider_.fetch(selectedURL, function (metadata) {
-    // The first change is load, we should not count it.
-    self.imageChanges_ = -1;
-    self.filenameEdit_.value = ImageUtil.getFileNameFromUrl(selectedURL);
-    self.editor_.openSession(
-        selectedIndex, selectedURL, metadata, 0, initRibbon);
+    self.openImage(selectedIndex, selectedURL, metadata, 0, initRibbon);
   });
 };
 
 Gallery.prototype.onImageContentChanged_ = function() {
   this.imageChanges_++;
-  if (this.imageChanges_ == 1)
+  if (this.imageChanges_ == 1) {  // First edit
     this.ribbon_.getSelectedItem().setCopyName();
+    ImageUtil.metrics.recordUserAction(ImageUtil.getMetricName('Edit'));
+  }
   this.updateFilename_();
 };
 
 Gallery.prototype.saveItem_ = function(item, callback, canvas, modified) {
   if (modified) {
     item.save(
         this.parentDirEntry_, this.metadataProvider_, canvas, callback);
   } else {
     if (callback) callback();
   }
@@ skipping 87 matching lines @@
 
 Gallery.prototype.onClose_ = function() {
   // TODO: handle write errors gracefully (suggest retry or saving elsewhere).
   this.saveChanges_(this.closeCallback_);
 };
 
 Gallery.prototype.prefetchImage = function(id, content, metadata) {
   this.editor_.prefetchImage(id, content, metadata);
 };
 
+// Used for metrics reporting, keep in sync with the histogram description.
+Gallery.FILE_TYPES = ['jpg', 'png', 'gif', 'bmp', 'webp'];

[dgozman, 2011/12/06 15:45:56]

Move to ImageUtil near metric names?

[Vladislav Kaznacheev, 2011/12/06 16:07:44]

Done.

+
 Gallery.prototype.openImage = function(id, content, metadata, slide, callback) {
   // The first change is load, we should not count it.
   this.imageChanges_ = -1;
-  this.updateFilename_();
-  this.editor_.openSession(id, content, metadata, slide, callback);
+
+  var item = this.ribbon_.getSelectedItem();
+  if (item) {
+    this.updateFilename_();
+  } else {
+    this.filenameEdit_.value = ImageUtil.getFileNameFromUrl(content);
+  }
+
+  var self = this;
+  function loadDone() {
+    ImageUtil.metrics.recordUserAction(ImageUtil.getMetricName('View'));
+
+    function toMillions(number) { return Math.round(number / (1000 * 1000)) }
+
+    ImageUtil.metrics.recordSmallCount(ImageUtil.getMetricName('Size.MB'),
+        toMillions(metadata.fileSize));
+
+    var canvas = self.imageView_.getCanvas();
+    ImageUtil.metrics.recordSmallCount(ImageUtil.getMetricName('Size.MPix'),
+        toMillions(canvas.width * canvas.height));
+
+    var url = item ? item.getUrl() : content;
+    var extIndex = url.lastIndexOf('.');
+    var ext = extIndex < 0 ? '' : url.substr(extIndex + 1).toLowerCase();
+    if (ext == 'jpeg') ext = 'jpg';
+    ImageUtil.metrics.recordEnum(
+        ImageUtil.getMetricName('FileType'), ext, Gallery.FILE_TYPES);
+
+    callback(arguments);
+  }
+
+  this.editor_.openSession(id, content, metadata, slide, loadDone);
 };
 
 Gallery.prototype.closeImage = function(item) {
   this.editor_.closeSession(this.saveItem_.bind(this, item, null));
 };
 
 Gallery.prototype.isEditing_ = function() {
   return this.container_.hasAttribute('editing');
 };
 
@@ skipping 223 matching lines @@
 
   var selectedItem = this.getSelectedItem();
   selectedItem.select(true);
   this.redraw();
 
   var self = this;
   selectedItem.fetchMetadata(this.metadataProvider_, function(metadata){
      if (!selectedItem.isSelected()) return;
      self.client_.openImage(
          selectedItem.getIndex(), selectedItem.getContent(), metadata, step,
-         function(loadedInstantly) {
+         function(loadType) {
            if (!selectedItem.isSelected()) return;
            if (Math.abs(step) != 1) return;
-           if (loadedInstantly || (self.sequenceLength_ >= 3)) {
+           if ((loadType == ImageView.LOAD_TYPE_CACHED_FULL) ||
+               (self.sequenceLength_ >= 3)) {
              // We can always afford to prefetch if the previous load was
              // instant. Even if it was not we should start prefetching
              // if we have been going in the same direction for long enough.
              self.requestPrefetch(step);
            }
            if (opt_callback) opt_callback();
          });
   });
 };
 
@@ skipping 182 matching lines @@
   if (this.canvas_)
     return;  // The image is being saved, the thumbnail is already up-to-date.
 
   var metadataEncoder =
       ImageEncoder.encodeMetadata(this.getMetadata(), canvas, 1);
   this.setMetadata(metadataEncoder.getMetadata());
 };
 
 Ribbon.Item.prototype.save = function(
     dirEntry, metadataProvider, canvas, opt_callback) {
+
+  ImageUtil.metrics.startInterval(ImageUtil.getMetricName('SaveTime'));

[dgozman, 2011/12/06 15:45:56]

Is it ok to not call recordInterval in the case of error?

[Vladislav Kaznacheev, 2011/12/06 16:07:44]

Absolutely. The interval start time will stay in the internal map and will be
overwritten in the next startInterval call with the same name, no harm done.

On 2011/12/06 15:45:56, dgozman wrote:

+
   var metadataEncoder =
       ImageEncoder.encodeMetadata(this.getMetadata(), canvas, 1);
 
   this.overrideContent(canvas, metadataEncoder.getMetadata());
 
   var self = this;
 
   if (!dirEntry) {  // Happens only in gallery_demo.js
     self.onSaveSuccess(
         window.webkitURL.createObjectURL(
@@ skipping 106 matching lines @@
 Ribbon.Item.prototype.getContent = function () {
   return this.canvas_ || this.url_;
 };
 
 Ribbon.Item.prototype.getMetadata = function () {
   return this.metadata_;
 };
 
 Ribbon.Item.prototype.fetchMetadata = function (metadataProvider, callback) {
   if (this.metadata_) {
-    setTimeout(callback.bind(null, this.metadata_), 0);
+    callback(this.metadata_);  // Every millisecond counts, call directly
   } else {
     metadataProvider.fetch(this.getUrl(), callback);
   }
 };
 
 Ribbon.Item.prototype.onSaveSuccess = function(url) {
   this.url_ = url;
   delete this.backupMetadata_;
   delete this.canvas_;
+  ImageUtil.metrics.recordEnum(ImageUtil.getMetricName('Save'), 1, 2);
+  ImageUtil.metrics.recordInterval(ImageUtil.getMetricName('SaveTime'));
 };
 
 Ribbon.Item.prototype.onSaveError = function(error) {
   // TODO(kaznacheev): notify the user that the file write failed and
   // suggest ways to rescue the modified image (retry/save elsewhere).
   // For now - just drop the modified content and revert the thumbnail.
   this.setMetadata(this.backupMetadata_);
   delete this.backupMetadata_;
   delete this.canvas_;
+  ImageUtil.metrics.recordEnum(ImageUtil.getMetricName('Save'), 0, 2);
 };
 
 Ribbon.MAX_THUMBNAIL_PIXEL_COUNT = 1 << 21; // 2 MPix
 Ribbon.MAX_THUMBNAIL_FILE_SIZE = 1 << 20; // 1 Mb
 
 Ribbon.Item.canUseImageForThumbnail = function(metadata) {
   return (metadata.fileSize &&
       metadata.fileSize <= Ribbon.MAX_THUMBNAIL_FILE_SIZE)  ||
       (metadata.width && metadata.height &&
       (metadata.width * metadata.height <= Ribbon.MAX_THUMBNAIL_PIXEL_COUNT));
@@ skipping 105 matching lines @@
 ShareMode.prototype.setUp = function() {
   ImageEditor.Mode.prototype.setUp.apply(this, arguments);
   ImageUtil.setAttribute(this.menu_, 'hidden', false);
   ImageUtil.setAttribute(this.button_, 'pressed', false);
 };
 
 ShareMode.prototype.cleanUpUI = function() {
   ImageEditor.Mode.prototype.cleanUpUI.apply(this, arguments);
   ImageUtil.setAttribute(this.menu_, 'hidden', true);
 };