WebUI Polymer3: Port action_link_css.html

- Autogenerate Polymer 3 action_link_css style module
- Add <a is="action-link"> instance in the demo page

This is in preparation of migrating chrome://extensions to Polymer3.

Bug: 965770
Change-Id: I32a51118ffd2f0cd9edad8ed3f01723002e1244f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1799466
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#695906}

chrome/browser/resources/print_preview/polymer3/demo.js

@@ -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://resources/cr_elements/action_link_css.m.js';
 import 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.m.js';
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';
@@ -22,6 +23,7 @@ import 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar.m.js';
 import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/cr_elements/md_select_css.m.js';
 import 'chrome://resources/cr_elements/policy/cr_tooltip_icon.m.js';
+import 'chrome://resources/js/action_link.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -29,7 +31,7 @@ import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/poly
 class HelloPolymer3Element extends PolymerElement {
   static get template() {
     return html`
-      <style include="md-select">
+      <style include="md-select action-link">
         cr-toggle {
           display: inline-block;
         }
@@ -144,6 +146,8 @@ class HelloPolymer3Element extends PolymerElement {
       <div>
         <cr-link-row class="hr" label="Hello Link Row"></cr-link-row>
       </div>
+
+      <a is="action-link">I am an action link</a>
     `;
   }
 

ui/webui/resources/cr_elements/BUILD.gn

@@ -85,6 +85,12 @@ js_library("cr_container_shadow_behavior") {
 
 # Targets for auto-generating Polymer 3 JS Modules.
 
+polymer_modulizer("action_link_css") {
+  js_file = "action_link_css.m.js"
+  html_file = "action_link_css.html"
+  html_type = "style-module"
+}
+
 polymer_modulizer("shared_vars_css") {
   js_file = "shared_vars_css.m.js"
   html_file = "shared_vars_css.html"
@@ -128,6 +134,7 @@ js_modulizer("modulize") {
 
 group("polymer3_elements") {
   deps = [
+    ":action_link_css_module",
     ":cr_icons_css_module",
     ":hidden_style_css_module",
     ":icons_module",

ui/webui/resources/cr_elements_resources_v3.grdp

 <?xml version="1.0" encoding="utf-8"?>
 <grit-part>
   <!-- Polymer 3.0 Elements -->
+  <include name="IDR_CR_ELEMENTS_ACTION_LINK_CSS_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/action_link_css.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
   <include name="IDR_CR_ELEMENTS_CR_ACTION_MENU_ANCHOR_ALIGNMENT_M_JS"
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_action_menu/anchor_alignment.m.js"
          use_base_dir="false"