Add a split pane between the tree and the list.

BUG=39093
TEST=Drag the splitter. Reload the bookmark manager and the size of the tree should be persisted.

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

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

1 files changed, 18 insertions, 9 deletions

diff --git a/chrome/browser/resources/bookmark_manager/css/bmm.css b/chrome/browser/resources/bookmark_manager/css/bmm.css
index d63d427..63cb6e4 100644
--- a/chrome/browser/resources/bookmark_manager/css/bmm.css
+++ b/chrome/browser/resources/bookmark_manager/css/bmm.css
@@ -166,18 +166,22 @@ html[os=mac] .tree-row[selected] > .tree-label {
 
 .main {
   position: absolute;
+  display: -webkit-box;
   top: 85px;
   left: 0;
   right: 0;
   bottom: 0;
 }
 
+.main > * {
+  height: 100%;
+}
+
 #tree-container {
-  position: absolute;
-  left: 5px;
   width: 200px;
-  top: 0;
-  bottom: 0;
+  /* min-width and max-width are used by the split pane. */
+  min-width: 50px;
+  max-width: 50%;
   overflow: auto;
   -webkit-box-sizing: border-box;
   padding: 0px 5px 5px 5px;
@@ -190,15 +194,20 @@ html[os=mac] .tree-row[selected] > .tree-label {
 }
 
 #list {
-  position: absolute;
-  left: 205px;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  -webkit-box-flex: 1;
   -webkit-box-sizing: border-box;
   padding: 0 5px 5px 5px;
 }
 
+.splitter {
+  width: 5px;
+  cursor: e-resize;
+}
+
+html[os=mac] .splitter {
+  cursor: col-resize;
+}
+
 .logo {
   -webkit-appearance: none;
   border: 0;