[MD Bookmarks] Add draggable sidebar.

chrome/browser/resources/md_bookmarks/app.html

Index: chrome/browser/resources/md_bookmarks/app.html
diff --git a/chrome/browser/resources/md_bookmarks/app.html b/chrome/browser/resources/md_bookmarks/app.html
index b4a21904783d79307f51044cbe74925bb91964be..db4ba72e212d331c31497e331ecbab13f1735325 100644
--- a/chrome/browser/resources/md_bookmarks/app.html
+++ b/chrome/browser/resources/md_bookmarks/app.html
@@ -1,4 +1,5 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/cr/ui/splitter.html">
 <link rel="import" href="chrome://bookmarks/api_listener.html">
 <link rel="import" href="chrome://bookmarks/list.html">
 <link rel="import" href="chrome://bookmarks/shared_vars.html">
@@ -21,20 +22,34 @@
         display: flex;
         flex-direction: row;
         flex-grow: 1;
-        overflow: auto;
+      }
+
+      #splitter {
+        border-left: 1px solid rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        cursor: e-resize;
+        flex: 0 0 var(--splitter-width);
       }
 
       bookmarks-sidebar {
-        flex: 0 0 var(--sidebar-width);
+        max-width: calc(100vw - 700px);
+        min-width: var(--min-sidebar-width);
+        width: var(--min-sidebar-width);
       }
 
       bookmarks-list {
         flex: 1;
       }
+
+      [pad-sidebar] {
+        margin-right: var(--splitter-width);
+      }
     </style>
-    <bookmarks-toolbar></bookmarks-toolbar>
+    <bookmarks-toolbar sidebar-width="[[sidebarWidth_]]"></bookmarks-toolbar>
     <div id="main-container">
-      <bookmarks-sidebar></bookmarks-sidebar>
+      <bookmarks-sidebar id="sidebar" pad-sidebar$="[[hideSplitter_]]">
+      </bookmarks-sidebar>
+      <div id="splitter" hidden$="[[hideSplitter_]]"></div>
       <bookmarks-list></bookmarks-list>
     </div>
   </template>