Chrome OS OOBE - Add sticky footer gradient

Implements the sticky footer gradient for OOBE screens on Chrome OS.

Adds the behaviour 'CrScrollableBehaviour' to oobe-dialog and make
its 'top-scroll-container' 'scrollable'.

Bug: 1017621
Change-Id: Ieb0a62e1cf5054cf461addaa8d493a762334a861
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1916872
Commit-Queue: Renato Silva <rrsilva@google.com>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#719993}

chrome/browser/resources/chromeos/login/BUILD.gn

@@ -251,6 +251,9 @@ js_library("oobe_buttons") {
 }
 
 js_library("oobe_dialog") {
+  deps = [
+    "//ui/webui/resources/cr_elements:cr_scrollable_behavior",
+  ]
 }
 
 js_library("oobe_eula") {

chrome/browser/resources/chromeos/login/oobe_a11y_option.css

@@ -3,7 +3,6 @@
  * found in the LICENSE file. */
 
 :host {
-  background-color: white;
   display: flex;
   min-height: 0;
   width: 100%;

chrome/browser/resources/chromeos/login/oobe_dialog.css

@@ -11,6 +11,7 @@
 }
 
 #top-scroll-container {
+  border: transparent;
   overflow-y: auto;
 }
 
@@ -69,6 +70,28 @@
   flex-shrink: 1;
 }
 
+
+
+#top-scroll-container[scrollable].can-scroll:not(.is-scrolled):not(.scrolled-to-bottom) {
+  background: linear-gradient(0deg,
+                              rgba(var(--google-grey-refresh-100-rgb), 1) 0,
+                              rgba(var(--google-grey-refresh-100-rgb), 0) 8px);
+
+}
+#top-scroll-container[scrollable].can-scroll.is-scrolled:not(.scrolled-to-bottom) {
+  background: linear-gradient(0deg,
+                              rgba(var(--google-grey-refresh-100-rgb), 1) 0,
+                              rgba(var(--google-grey-refresh-100-rgb), 0) 8px),
+              linear-gradient(180deg,
+                              rgba(var(--google-grey-refresh-100-rgb), 1) 0,
+                              rgba(var(--google-grey-refresh-100-rgb), 0) 8px);
+}
+#top-scroll-container[scrollable].is-scrolled.scrolled-to-bottom {
+  background: linear-gradient(180deg,
+                              rgba(var(--google-grey-refresh-100-rgb), 1) 0,
+                              rgba(var(--google-grey-refresh-100-rgb), 0) 8px);
+}
+
 #oobe-bottom {
   height: calc(var(--oobe-dialog-footer-height)
                - 2 * var(--oobe-dialog-footer-padding));

chrome/browser/resources/chromeos/login/oobe_dialog.html

@@ -2,8 +2,10 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
+<link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
 
 <!--
   Simple OOBE dialog which should be used for OOBE UI elements.
@@ -64,7 +66,7 @@
     <link rel="stylesheet" href="oobe_dialog.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <style include="cr-shared-style"></style>
-    <div id="top-scroll-container" class="layout vertical flex">
+    <div id="top-scroll-container" class="layout vertical flex" scrollable>
       <div id="header-container" hidden="[[noHeader]]">
         <div id="oobe-icon-div" class="slot-container">
           <slot name="oobe-icon"></slot>

chrome/browser/resources/chromeos/login/oobe_dialog.js

@@ -5,6 +5,8 @@
 Polymer({
   is: 'oobe-dialog',
 
+  behaviors: [CrScrollableBehavior],
+
   properties: {
     /**
      * Controls visibility of the bottom-buttons element.
@@ -99,6 +101,14 @@ Polymer({
     el.scrollTop = el.scrollHeight;
   },
 
+
+  /**
+   * Updates the scroll behaviour.
+   */
+  updateScroll: function() {
+    this.requestUpdateScroll();
+  },
+
   /**
    * This is called from oobe_welcome when this dialog is shown.
    */
@@ -117,6 +127,7 @@ Polymer({
       focusedElements[0].focus();
 
     this.fire('show-dialog');
+    this.updateScroll();
   },
 
   /** @private */