WebUI: Convert Polymer CrPngBehavior to a non-Behavior.

There is no need for this functionality to reside within a Polymer
behavior, and it is already being used a simple class in all call
sites.

This is in preparation of migrating c/b/r/settings/people_page/
to Polymer3.

Bug: 1026426
Change-Id: I9dfbb7bbd2d496f4dcdb6c79df9291d238cae487
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2106916
Commit-Queue: dpapad <dpapad@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751136}

chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.js

@@ -11,7 +11,6 @@ Polymer({
 
   behaviors: [
     settings.RouteObserverBehavior,
-    CrPngBehavior,
     I18nBehavior,
     WebUIListenerBehavior,
     LockStateBehavior,
@@ -232,8 +231,7 @@ Polymer({
     // Extract first frame from image by creating a single frame PNG using
     // url as input if base64 encoded and potentially animated.
     if (info.iconUrl.startsWith('data:image/png;base64')) {
-      this.profileIconUrl_ =
-          CrPngBehavior.convertImageSequenceToPng([info.iconUrl]);
+      this.profileIconUrl_ = cr.png.convertImageSequenceToPng([info.iconUrl]);
       return;
     }
     this.profileIconUrl_ = info.iconUrl;

chrome/browser/resources/settings/chromeos/personalization_page/change_picture.js

@@ -12,7 +12,6 @@ Polymer({
 
   behaviors: [
     settings.RouteObserverBehavior,
-    CrPngBehavior,
     I18nBehavior,
     WebUIListenerBehavior,
   ],
@@ -150,8 +149,8 @@ Polymer({
    */
   receiveOldImage_(imageInfo) {
     this.oldImageLabel_ = this.i18n(
-        CrPngBehavior.isEncodedPngDataUrlAnimated(imageInfo.url) ? 'oldVideo' :
-                                                                   'oldPhoto');
+        cr.png.isEncodedPngDataUrlAnimated(imageInfo.url) ? 'oldVideo' :
+                                                            'oldPhoto');
     this.oldImagePending_ = false;
     this.pictureList_.setOldImageUrl(imageInfo.url, imageInfo.index);
   },

chrome/browser/resources/settings/people_page/people_page.js

@@ -11,9 +11,6 @@ Polymer({
 
   behaviors: [
     settings.RouteObserverBehavior, I18nBehavior, WebUIListenerBehavior,
-    // <if expr="chromeos">
-    CrPngBehavior,
-    // </if>
   ],
 
   properties: {
@@ -233,8 +230,7 @@ Polymer({
      */
     // <if expr="chromeos">
     if (info.iconUrl.startsWith('data:image/png;base64')) {
-      this.profileIconUrl_ =
-          CrPngBehavior.convertImageSequenceToPng([info.iconUrl]);
+      this.profileIconUrl_ = cr.png.convertImageSequenceToPng([info.iconUrl]);
       return;
     }
     // </if>

ui/webui/resources/cr_elements/chromeos/cr_picture/BUILD.gn

@@ -39,4 +39,5 @@ js_library("cr_picture_types") {
 }
 
 js_library("cr_png_behavior") {
+  deps = [ "//ui/webui/resources/js:cr" ]
 }

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.js

@@ -33,8 +33,6 @@ const CAPTURE_DURATION_MS = 1000;
 Polymer({
   is: 'cr-camera',
 
-  behaviors: [CrPngBehavior],
-
   properties: {
     /** Strings provided by host */
     takePhotoLabel: String,
@@ -285,8 +283,7 @@ Polymer({
         encodedImages.concat(encodedImages.slice(1, -1).reverse());
 
     /** Convert image sequence to animated PNG. */
-    return CrPngBehavior.convertImageSequenceToPng(
-        forwardBackwardImageSequence);
+    return cr.png.convertImageSequenceToPng(forwardBackwardImageSequence);
   },
 
   /**

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_list.js

@@ -12,8 +12,6 @@
 Polymer({
   is: 'cr-picture-list',
 
-  behaviors: [CrPngBehavior],
-
   properties: {
     cameraPresent: Boolean,
 
@@ -292,7 +290,7 @@ Polymer({
      * url as input if base64 encoded and potentially animated.
      */
     if (url.split(',')[0] === 'data:image/png;base64') {
-      return CrPngBehavior.convertImageSequenceToPng([url]);
+      return cr.png.convertImageSequenceToPng([url]);
     }
 
     return url;

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.js

@@ -11,8 +11,6 @@
 Polymer({
   is: 'cr-picture-pane',
 
-  behaviors: [CrPngBehavior],
-
   properties: {
 
     /** Whether the camera is present / available */
@@ -123,8 +121,8 @@ Polymer({
       }
       const blob = new Blob([bytes], {'type': 'image/png'});
       // Use first frame as placeholder while rest of image loads.
-      image.style.backgroundImage = 'url(' +
-          CrPngBehavior.convertImageSequenceToPng([this.imageSrc]) + ')';
+      image.style.backgroundImage =
+          'url(' + cr.png.convertImageSequenceToPng([this.imageSrc]) + ')';
       this.imageUrl = URL.createObjectURL(blob);
     } else {
       image.style.backgroundImage = 'none';

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_png_behavior.html

-<link rel="import" href="../../../html/polymer.html">
+<link rel="import" href="../../../html/cr.html">
 <script src="cr_png_behavior.js"></script>