Kaleidoscope: Add public usage of cr_elements/

This CL adds two public Polymer wrappers to keep Kaleidoscope's
cr_elements/ usage in the public repo.

This CL adds a new CSS var used to set a background color on a
CrDrawerElement.

Bug: b:157737119
Change-Id: Ibc15f4cf2f497142c68b73a0b20f85ed0a1cc719
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2254452
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#785931}

chrome/browser/media/kaleidoscope/BUILD.gn

@@ -22,6 +22,7 @@ if (enable_kaleidoscope) {
       "//chrome/browser/media/kaleidoscope/internal:kaleidoscope_strings",
       "//chrome/browser/media/kaleidoscope/internal/resources:content",
       "//chrome/browser/media/kaleidoscope/mojom:mojom_js",
+      "//chrome/browser/resources/kaleidoscope:web_components",
       "//url/mojom:url_mojom_gurl_js",
     ]
   }

chrome/browser/media/kaleidoscope/kaleidoscope_internal_resources.grd

@@ -8,6 +8,13 @@
   </outputs>
   <release seq="1">
     <includes>
+      <!-- Public resources -->
+      <include name="IDR_KALEIDOSCOPE_SIDE_NAV_CONTAINER_JS" file="${root_gen_dir}/chrome/browser/resources/kaleidoscope/side_nav_container.js"
+        use_base_dir="false" type="BINDATA" />
+      <include name="IDR_KALEIDOSCOPE_TOOLBAR_JS" file="${root_gen_dir}/chrome/browser/resources/kaleidoscope/toolbar.js"
+        use_base_dir="false" type="BINDATA" />
+
+      <!-- Private resources -->
       <include name="IDR_KALEIDOSCOPE_CONTENT_CSS" file="internal/resources/content.css" type="chrome_html" flattenhtml="true" compress="gzip" />
       <include name="IDR_KALEIDOSCOPE_CONTENT_HTML" file="internal/resources/content.html" type="BINDATA" compress="gzip" />
       <include name="IDR_KALEIDOSCOPE_CONTENT_JS" file="${root_gen_dir}/chrome/browser/media/kaleidoscope/internal/resources/ks-content.js" use_base_dir="false" type="BINDATA" compress="gzip" />

chrome/browser/media/kaleidoscope/kaleidoscope_ui.cc

@@ -93,6 +93,9 @@ content::WebUIDataSource* CreateUntrustedWebUIDataSource() {
   untrusted_source->AddResourcePath("content.js", IDR_KALEIDOSCOPE_CONTENT_JS);
   untrusted_source->AddResourcePath("messages.js",
                                     IDR_KALEIDOSCOPE_MESSAGES_JS);
+  untrusted_source->AddResourcePath("toolbar.js", IDR_KALEIDOSCOPE_TOOLBAR_JS);
+  untrusted_source->AddResourcePath("side_nav_container.js",
+                                    IDR_KALEIDOSCOPE_SIDE_NAV_CONTAINER_JS);
 
   untrusted_source->AddResourcePath("geometry.mojom-lite.js",
                                     IDR_GEOMETRY_MOJOM_LITE_JS);

chrome/browser/resources/BUILD.gn

@@ -2,6 +2,7 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
+import("//chrome/browser/buildflags.gni")
 import("//chrome/common/features.gni")
 import("//chrome/test/base/js2gtest.gni")
 import("//chrome/test/include_js_tests.gni")
@@ -67,6 +68,9 @@ if (enable_js_type_check) {
     if (enable_webui_tab_strip) {
       deps += [ "tab_strip:closure_compile" ]
     }
+    if (enable_kaleidoscope) {
+      deps += [ "kaleidoscope:closure_compile" ]
+    }
     if (is_android) {
       deps += [
         "explore_sites_internals:closure_compile",

chrome/browser/resources/kaleidoscope/BUILD.gn

+# Copyright 2020 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+import("//third_party/closure_compiler/closure_args.gni")
+import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/html_to_js.gni")
+
+html_to_js("web_components") {
+  js_files = [
+    "side_nav_container.js",
+    "toolbar.js",
+  ]
+}
+
+js_type_check("closure_compile") {
+  is_polymer3 = true
+  deps = [
+    ":side_nav_container",
+    ":toolbar",
+  ]
+}
+
+js_library("side_nav_container") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_drawer:cr_drawer.m",
+  ]
+}
+
+js_library("toolbar") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}

chrome/browser/resources/kaleidoscope/side_nav_container.html

+<style>
+  cr-drawer {
+    --cr-drawer-background-color: var(--side-nav-background-color);
+  }
+</style>
+<cr-drawer id="drawer"><slot></slot></cr-drawer>

chrome/browser/resources/kaleidoscope/side_nav_container.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '//resources/cr_elements/cr_drawer/cr_drawer.m.js';
+
+import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+class KaleidoscopeSideNavContainerElement extends PolymerElement {
+  static get is() {
+    return 'kaleidoscope-side-nav-container';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+
+  // Toggles the CrDrawerElement.
+  toggle() {
+    /** @type {!CrDrawerElement} */ (this.$.drawer).toggle();
+  }
+}
+
+customElements.define(
+    KaleidoscopeSideNavContainerElement.is,
+    KaleidoscopeSideNavContainerElement);

chrome/browser/resources/kaleidoscope/toolbar.html

+<style>
+  cr-toolbar {
+    --cr-toolbar-background-color: var(--toolbar-background-color);
+    --cr-toolbar-height: var(--toolbar-height);
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+  }
+</style>
+<cr-toolbar id="toolbar" show-menu></cr-toolbar>

chrome/browser/resources/kaleidoscope/toolbar.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '//resources/cr_elements/cr_toolbar/cr_toolbar.m.js';
+
+import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+class KaleidoscopeToolbarElement extends PolymerElement {
+  static get is() {
+    return 'kaleidoscope-toolbar';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+}
+
+customElements.define(
+    KaleidoscopeToolbarElement.is, KaleidoscopeToolbarElement);

ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html

@@ -11,7 +11,7 @@
       :host dialog {
         --drawer-width: 256px;
         --transition-timing: 200ms ease;
-        background-color: #fff;
+        background-color: var(--cr-drawer-background-color, #fff);
         border: none;
         bottom: 0;
         left: calc(-1 * var(--drawer-width));
@@ -26,7 +26,7 @@
 
       @media (prefers-color-scheme: dark) {
         :host dialog {
-          background: var(--google-grey-900)
+          background: var(--cr-drawer-background-color, var(--google-grey-900))
               linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04));
         }
       }