Files app: QuickView use setProperties

Polymer updates the template upon any property mutation, using
setProperties allows to batch property mutation and update the template
only once, use it for better overall performance.

AVG of 5 runs  | setProperties | without setProperties
onMetadataX()  | 4.273876953   | 5.588183594 (~23% faster)
clear()	       | 2.381201172   | 3.849414063 (~38% better)

Bug: 948605
Change-Id: I63005391e3cbc8ed53ad142d6d9211521ad72a8d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1937949
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#719841}

third_party/closure_compiler/externs/pending_polymer.js

@@ -57,3 +57,17 @@ Polymer.DomIf = function() {};
  * while still using legacy Polymer1 syntax.
  */
 Polymer.DomIf._contentForTemplate = function(template) {};
+
+/**
+ * From:
+ * https://github.com/Polymer/polymer/blob/2.x/lib/mixins/property-effects.html
+ *
+ * @param {Object} props Bag of one or more key-value pairs whose key is
+ *   a property and value is the new value to set for that property.
+ * @param {boolean=} setReadOnly When true, any private values set in
+ *   `props` will be set. By default, `setProperties` will not set
+ *   `readOnly: true` root properties.
+ * @return {void}
+ * @public
+ */
+PolymerElement.prototype.setProperties = function(props, setReadOnly) {};

ui/file_manager/file_manager/foreground/elements/BUILD.gn

@@ -84,6 +84,7 @@ js_library("files_quick_view") {
   externs_list = [
     "$externs_path/chrome_extensions.js",
     "$externs_path/webview_tag.js",
+    "$externs_path/pending_polymer.js",
   ]
 }
 

ui/file_manager/file_manager/foreground/elements/files_quick_view.js

@@ -69,15 +69,17 @@ const FilesQuickView = Polymer({
 
   // Clears fields.
   clear: function() {
-    this.type = '';
-    this.subtype = '';
-    this.filePath = '';
-    this.hasTask = false;
-    this.contentUrl = '';
-    this.videoPoster = '';
-    this.audioArtwork = '';
-    this.autoplay = false;
-    this.browsable = false;
+    this.setProperties({
+        type: '',
+        subtype: '',
+        filePath: '',
+        hasTask: false,
+        contentUrl: '',
+        videoPoster: '',
+        audioArtwork: '',
+        autoplay: false,
+        browsable: false,
+    });
     const video = this.$.contentPanel.querySelector('#videoSafeMedia');
     if (video) {
       video.src = '';

ui/file_manager/file_manager/foreground/js/quick_view_controller.js

@@ -291,15 +291,17 @@ class QuickViewController {
         return;  // Bail: there's no point drawing a stale selection.
       }
 
-      this.quickView_.type = params.type || '';
-      this.quickView_.subtype = params.subtype || '';
-      this.quickView_.filePath = params.filePath || '';
-      this.quickView_.hasTask = params.hasTask || false;
-      this.quickView_.contentUrl = params.contentUrl || '';
-      this.quickView_.videoPoster = params.videoPoster || '';
-      this.quickView_.audioArtwork = params.audioArtwork || '';
-      this.quickView_.autoplay = params.autoplay || false;
-      this.quickView_.browsable = params.browsable || false;
+      this.quickView_.setProperties({
+        type: params.type || '',
+        subtype: params.subtype || '',
+        filePath: params.filePath || '',
+        hasTask: params.hasTask || false,
+        contentUrl: params.contentUrl || '',
+        videoPoster: params.videoPoster || '',
+        audioArtwork: params.audioArtwork || '',
+        autoplay: params.autoplay || false,
+        browsable: params.browsable || false,
+      });
     });
   }