AudioPlayer: Stop using Object.observe() and Array.observe().

ui/file_manager/audio_player/js/audio_player.js

Index: ui/file_manager/audio_player/js/audio_player.js
diff --git a/ui/file_manager/audio_player/js/audio_player.js b/ui/file_manager/audio_player/js/audio_player.js
index f07bb0d4e6d14c5cb445f2e7bd37aac16cf883c1..4cbfb3f2c9811a93175dbb95ebfbad08af650987 100644
--- a/ui/file_manager/audio_player/js/audio_player.js
+++ b/ui/file_manager/audio_player/js/audio_player.js
@@ -19,19 +19,6 @@ function AudioPlayer(container) {
   this.metadataModel_ = MetadataModel.create(this.volumeManager_);
   this.selectedEntry_ = null;
   this.invalidTracks_ = {};
-
-  this.model_ = new AudioPlayerModel();
-  Object.observe(this.model_, function(changes) {
-    for (var i = 0; i < changes.length; i++) {
-      var change = changes[i];
-      if (change.name == 'expanded' &&
-          (change.type == 'add' || change.type == 'update')) {
-        this.onModelExpandedChanged(change.oldValue, change.object.expanded);
-        break;
-      }
-    }
-  }.bind(this));
-
   this.entries_ = [];
   this.currentTrackIndex_ = -1;
   this.playlistGeneration_ = 0;
@@ -48,10 +35,32 @@ function AudioPlayer(container) {
 
   this.player_ =
     /** @type {AudioPlayerElement} */ (document.querySelector('audio-player'));
-  // TODO(yoshiki): Move tracks into the model.
   this.player_.tracks = [];
-  this.model_.initialize(function() {
-    this.player_.model = this.model_;
+
+  // Restore the saved state from local storage, and update the local storage
+  // if the states are changed.
+  var STORAGE_PREFIX = 'audioplayer-';
+  var KEYS_TO_SAVE_STATES = ['shuffle', 'repeat', 'volume', 'expanded'];
+  var objectsToBeRead = KEYS_TO_SAVE_STATES.map(a => STORAGE_PREFIX + a);
+  chrome.storage.local.get(objectsToBeRead, function(results) {
+    for (var storageKey in results) {
+      // Update the UI, and start listening UI changes to write back the states
+      // to local storage.
+      var key = storageKey.substr(STORAGE_PREFIX.length);
+      this.player_[key] = results[storageKey];
+      this.player_.addEventListener(

[yoshiki, 2015/12/07 05:39:21]

Is it guaranteed that all requested items are returned ? If not please use
KEYS_TO_SAVE_STATES instead of the results to add handlers.

[fukino, 2015/12/07 07:21:01]

Oops, thank you for pointing this out!
I had all keys in local storage and I didn't noticed this issue.
Done.

+          key + '-changed',
+          function(storageKey, event) {
+            var objectToBeSaved = {};
+            objectToBeSaved[storageKey] = event.detail.value;
+            chrome.storage.local.set(objectToBeSaved);
+          }.bind(this, storageKey));
+    }
+  }.bind(this));
+
+  // Update the window size when UI's 'expanded' state is changed.
+  this.player_.addEventListener('expanded-changed', function(event) {
+    this.onExpandedChanged_(event.detail.value);
   }.bind(this));
 
   // Run asynchronously after an event of model change is delivered.
@@ -372,10 +381,10 @@ AudioPlayer.EXPANDED_MODE_MIN_HEIGHT = AudioPlayer.CONTROLS_HEIGHT +
 
 /**
  * Invoked when the 'expanded' property in the model is changed.
- * @param {boolean} oldValue Old value.
  * @param {boolean} newValue New value.
+ * @private
  */
-AudioPlayer.prototype.onModelExpandedChanged = function(oldValue, newValue) {
+AudioPlayer.prototype.onExpandedChanged_ = function(newValue) {
   if (this.isExpanded_ !== null &&
       this.isExpanded_ === newValue)
     return;