arc: Implement scrollable OptIn window content.

chrome/browser/resources/chromeos/arc_support/main.css

Index: chrome/browser/resources/chromeos/arc_support/main.css
diff --git a/chrome/browser/resources/chromeos/arc_support/main.css b/chrome/browser/resources/chromeos/arc_support/main.css
index 1ca1369a7eeaf88c8a85d82965e481c10ea537d8..a595ff79f98990ef1ede4953b0cbbca498a84e8f 100644
--- a/chrome/browser/resources/chromeos/arc_support/main.css
+++ b/chrome/browser/resources/chromeos/arc_support/main.css
@@ -15,7 +15,24 @@ webview,
   width: 100%;
 }
 
+::-webkit-scrollbar {
+  background: transparent;
+  height: 4px;
+  width: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.3);
+  height: 16px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
 #arc-support {
+  flex: auto;
+  overflow: hidden;

[khmel, 2016/07/12 21:15:37]

Could not get rid of additional scrollbars even current layout assumes no
scrolling context. Probably yet another surprise from webview.

[xiyuan, 2016/07/12 21:50:21]

Acknowledged.

   width: 960px;
 }
 
@@ -34,6 +51,12 @@ webview,
   width: 16px;
 }
 
+.content {
+  height: 388px;

[xiyuan, 2016/07/12 21:50:21]

388px because default height 688px - image header height 300px ? Maybe add a
comment of how we get this number.

[khmel, 2016/07/12 22:05:10]

Done.

+  margin: 0;
+  padding: 0;
+}
+
 .image-header {
   display: block;
   height: 300px;
@@ -41,7 +64,16 @@ webview,
   width: 960px;
 }
 
+.scrollable {
+  flex: auto;
+  margin: 0;
+  overflow: auto;
+  padding: 0;
+}
+
 .section {
+  display: flex;
+  flex-direction: column;
   text-align: center;
 }
 
@@ -54,7 +86,6 @@ webview,
 .section-flex {
   display: flex;
   flex-direction: column;
-  height: 688px;
 }
 
 .section-checkbox-container {