Bookmark manager: More workarounds for buggy flex box layout code.

BUG=40902
TEST=Go to a folder with not enough items to show a vertical scrollbars. Copy and paste items so that the scrollbar is shown. The scrollbar should be next to the window edge. Also try resizing the window.

Review URL: http://codereview.chromium.org/1625013

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@44418 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 52 insertions, 1 deletions

diff --git a/chrome/browser/resources/bookmark_manager/js/bmm/bookmarklist.js b/chrome/browser/resources/bookmark_manager/js/bmm/bookmarklist.js
index db884b0..a683208 100644
--- a/chrome/browser/resources/bookmark_manager/js/bmm/bookmarklist.js
+++ b/chrome/browser/resources/bookmark_manager/js/bmm/bookmarklist.js
@@ -39,6 +39,11 @@ cr.define('bmm', function() {
     decorate: function() {
       List.prototype.decorate.call(this);
       this.addEventListener('click', this.handleClick_);
+      // HACK(arv): http://crbug.com/40902
+      var self = this;
+      window.addEventListener('resize', function() {
+        self.fixWidth_();
+      });
     },
 
     parentId_: '',
@@ -53,6 +58,7 @@ cr.define('bmm', function() {
       this.parentId_ = parentId;
 
       var callback = cr.bind(this.handleBookmarkCallback, this);
+      this.loading_ = true;
 
       if (!parentId) {
         callback([]);
@@ -72,6 +78,7 @@ cr.define('bmm', function() {
         // Failed to load bookmarks. Most likely due to the bookmark beeing
         // removed.
         cr.dispatchSimpleEvent(this, 'invalidId');
+        this.loading_ = false;
         return;
       }
       // Remove all fields without recreating the object since other code
@@ -90,7 +97,8 @@ cr.define('bmm', function() {
         this.finishBatchAdd();
       }
 
-      fixListWidth(this);
+      this.loading_ = false;
+      this.fixWidth_();
       cr.dispatchSimpleEvent(this, 'load');
     },
 
@@ -114,6 +122,27 @@ cr.define('bmm', function() {
       return this.parentId_ == 'recent';
     },
 
+    /** @inheritDoc */
+    addAt: function(item, index) {
+      // Override to work around list width bug in flex box.
+      List.prototype.addAt.call(this, item, index);
+      this.fixWidth_();
+    },
+
+    /** @inheritDoc */
+    remove: function(item) {
+      // Override to work around list width bug in flex box.
+      List.prototype.remove.call(this, item);
+      this.fixWidth_();
+    },
+
+    /** @inheritDoc */
+    clear: function() {
+      // Override to work around list width bug in flex box.
+      List.prototype.clear.call(this);
+      this.fixWidth_();
+    },
+
     /**
      * Handles the clicks on the list so that we can check if the user clicked
      * on a link or a folder.
@@ -217,6 +246,28 @@ cr.define('bmm', function() {
         this.remove(listItem);
         delete listLookup[id];
       }
+    },
+
+    /**
+     * Workaround for http://crbug.com/40902
+     * @private
+     */
+    fixWidth_: function() {
+      if (this.loading_)
+        return;
+
+      // The width of the list is wrong after its content has changed.
+      // Fortunately the reported offsetWidth is correct so we can detect the
+      //incorrect width.
+      if (list.offsetWidth != list.parentNode.clientWidth - list.offsetLeft) {
+        // Set the width to the correct size. This causes the relayout.
+        list.style.width = list.parentNode.clientWidth - list.offsetLeft + 'px';
+        // Remove the temporary style.width in a timeout. Once the timer fires
+        // the size should not change since we already fixed the width.
+        window.setTimeout(function() {
+          list.style.width = '';
+        }, 0);
+      }
     }
   };