NUX Google Apps - Initial WebUI

Add WebUI at chrome://welcome/apps.
WebUI is only shown when NuxGoogleApps feature is enabled.

Bug: 832938
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I46721ac4474a4335d9c0dfdb977e09622ae0ac1c
Reviewed-on: https://chromium-review.googlesource.com/1066503
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Jochen Eisinger <jochen@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#569424}

BUILD.gn

@@ -13,6 +13,7 @@ import("//build/config/features.gni")
 import("//build/config/sanitizers/sanitizers.gni")
 import("//build/config/ui.gni")
 import("//components/nacl/features.gni")
+import("//components/nux_google_apps/features.gni")
 import("//device/vr/buildflags/buildflags.gni")
 import("//extensions/buildflags/buildflags.gni")
 import("//media/media_options.gni")
@@ -1184,6 +1185,9 @@ if (closure_compile) {
     if (is_android) {
       data_deps += [ "components/offline_pages/resources:closure_compile" ]
     }
+    if (enable_nux_google_apps) {
+      data_deps += [ "components/nux_google_apps/resources:closure_compile" ]
+    }
   }
 }
 

chrome/browser/ui/BUILD.gn

@@ -10,6 +10,7 @@ import("//build/split_static_library.gni")
 import("//chrome/common/features.gni")
 import("//chromeos/assistant/assistant.gni")
 import("//components/nacl/features.gni")
+import("//components/nux_google_apps/features.gni")
 import("//components/offline_pages/buildflags/features.gni")
 import("//components/signin/features.gni")
 import("//extensions/buildflags/buildflags.gni")
@@ -955,6 +956,7 @@ split_static_library("ui") {
     "//components/net_log",
     "//components/ntp_snippets",
     "//components/ntp_tiles",
+    "//components/nux_google_apps:buildflags",
     "//components/offline_pages/buildflags",
     "//components/omnibox/browser",
     "//components/onc",
@@ -3853,6 +3855,10 @@ split_static_library("ui") {
     deps += [ "//components/nacl/browser" ]
   }
 
+  if (enable_nux_google_apps) {
+    deps += [ "//components/nux_google_apps:nux_google_apps_feature" ]
+  }
+
   if (enable_plugins) {
     sources += [
       "hung_plugin_tab_helper.cc",

chrome/browser/ui/webui/welcome_ui.cc

@@ -14,11 +14,17 @@
 #include "chrome/grit/chrome_unscaled_resources.h"
 #include "chrome/grit/chromium_strings.h"
 #include "chrome/grit/generated_resources.h"
+#include "components/nux_google_apps/buildflags.h"
 #include "components/prefs/pref_service.h"
 #include "content/public/browser/web_ui_data_source.h"
 #include "net/base/url_util.h"
 #include "ui/base/l10n/l10n_util.h"
 
+#if BUILDFLAG(ENABLE_NUX_GOOGLE_APPS)
+#include "components/nux_google_apps/constants.h"
+#include "components/nux_google_apps/webui.h"
+#endif  // ENABLE_NUX_GOOGLE_APPS
+
 namespace {
   const bool kIsBranded =
 #if defined(GOOGLE_CHROME_BUILD)
@@ -99,6 +105,12 @@ WelcomeUI::WelcomeUI(content::WebUI* web_ui, const GURL& url)
     html_source->SetDefaultResource(IDR_WELCOME_HTML);
   }
 
+#if BUILDFLAG(ENABLE_NUX_GOOGLE_APPS)
+  if (base::FeatureList::IsEnabled(nux_google_apps::kNuxGoogleAppsFeature)) {
+    nux_google_apps::AddSources(html_source);
+  }
+#endif  // ENABLE_NUX_GOOGLE_APPS
+
   content::WebUIDataSource::Add(profile, html_source);
 }
 

components/components_strings.grd

@@ -197,6 +197,7 @@
       <part file="history_strings.grdp" />
       <part file="login_dialog_strings.grdp" />
       <part file="new_or_sad_tab_strings.grdp" />
+      <part file="nux_google_apps_strings.grdp" />
       <part file="ntp_snippets_strings.grdp" />
       <part file="omnibox_strings.grdp" />
       <part file="page_info_strings.grdp" />

components/nux_google_apps/BUILD.gn

+# Copyright 2018 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("//build/buildflag_header.gni")
+import("//components/nux_google_apps/features.gni")
+
+# Always required.
+buildflag_header("buildflags") {
+  header = "buildflags.h"
+  flags = [ "ENABLE_NUX_GOOGLE_APPS=$enable_nux_google_apps" ]
+}
+
+if (enable_nux_google_apps) {
+  static_library("nux_google_apps_feature") {
+    sources = [
+      "constants.cc",
+      "constants.h",
+      "webui.cc",
+      "webui.h",
+    ]
+
+    public_deps = [
+      "//base",
+      "//net",
+      "//url",
+    ]
+
+    deps = [
+      "//components/pref_registry",
+      "//components/prefs",
+      "//components/resources",
+      "//components/strings",
+      "//components/variations",
+      "//content/public/browser",
+      "//ui/base",
+    ]
+  }
+}

components/nux_google_apps/DEPS

+include_rules = [
+  "+components/grit",
+  "+components/strings/grit/components_strings.h",
+  "+content/public/browser",
+]

components/nux_google_apps/OWNERS

+hcarmona@chromium.org

components/nux_google_apps/README

+New User Experience Experiment (NUX). Code here will enable new users to
+bookmark popular Google Apps as part of the first run steps.
+
+Feature is initially Windows Only. After collecting stats, we will determine
+how useful it is for users, this data will help decide next steps for component.

components/nux_google_apps/constants.cc

+// Copyright 2018 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.
+
+#include "components/nux_google_apps/constants.h"
+
+#include "base/feature_list.h"
+
+namespace nux_google_apps {
+
+extern const base::Feature kNuxGoogleAppsFeature{
+    "NuxGoogleApps", base::FEATURE_DISABLED_BY_DEFAULT};
+
+}  // namespace nux_google_apps

components/nux_google_apps/constants.h

+// Copyright 2018 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.
+
+#ifndef COMPONENTS_NUX_GOOGLE_APPS_CONSTANTS_H_
+#define COMPONENTS_NUX_GOOGLE_APPS_CONSTANTS_H_
+
+namespace base {
+struct Feature;
+}  // namespace base
+
+namespace nux_google_apps {
+
+extern const base::Feature kNuxGoogleAppsFeature;
+
+}  // namespace nux_google_apps
+
+#endif  // COMPONENTS_NUX_GOOGLE_APPS_CONSTANTS_H_

components/nux_google_apps/features.gni

+# Copyright 2018 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("//build/config/features.gni")
+
+declare_args() {
+  # Only supported on windows.
+  enable_nux_google_apps = is_win
+}

components/nux_google_apps/resources/BUILD.gn

+# Copyright 2018 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/compile_js.gni")
+
+js_type_check("closure_compile") {
+  deps = [
+    ":apps_chooser",
+    ":nux_google_apps",
+  ]
+}
+
+js_library("apps_chooser") {
+  deps = []
+}
+
+js_library("nux_google_apps") {
+  deps = [
+    ":apps_chooser",
+  ]
+}

components/nux_google_apps/resources/apps_chooser.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+
+<dom-module id="apps-chooser">
+  <template>
+    <style>
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .app-icon {
+        -webkit-margin-end: 16px;
+        -webkit-margin-start: 4px;
+      }
+
+      iron-icon {
+        -webkit-margin-end: 48px;
+      }
+
+      [active] iron-icon[icon="cr:check"] {
+        --iron-icon-fill-color: var(--google-blue-600);
+        opacity: unset;
+      }
+
+      iron-icon[icon="cr:check"] {
+        opacity: 0;
+      }
+
+      .gmail {
+        content: -webkit-image-set(
+            url(chrome://welcome/apps/gmail_1x.png) 1x,
+            url(chrome://welcome/apps/gmail_2x.png) 2x);
+      }
+
+      .youtube {
+        content: -webkit-image-set(
+            url(chrome://welcome/apps/youtube_1x.png) 1x,
+            url(chrome://welcome/apps/youtube_2x.png) 2x);
+      }
+
+      .maps {
+        content: -webkit-image-set(
+            url(chrome://welcome/apps/maps_1x.png) 1x,
+            url(chrome://welcome/apps/maps_2x.png) 2x);
+      }
+
+      .translate {
+        content: -webkit-image-set(
+            url(chrome://welcome/apps/translate_1x.png) 1x,
+            url(chrome://welcome/apps/translate_2x.png) 2x);
+      }
+
+      .news {
+        content: -webkit-image-set(
+            url(chrome://welcome/apps/news_1x.png) 1x,
+            url(chrome://welcome/apps/news_2x.png) 2x);
+      }
+
+      .chrome_store {
+        content: -webkit-image-set(
+            url(chrome://welcome/apps/chrome_store_1x.png) 1x,
+            url(chrome://welcome/apps/chrome_store_2x.png) 2x);
+      }
+
+      paper-button:first-of-type {
+        border-top: unset;
+      }
+
+      paper-button {
+        border-radius: 0;
+        border-top: var(--cr-section_-_border-top);
+        display: flex;
+        margin: 0;
+        padding: 12px 0;
+        text-transform: unset;
+      }
+
+      paper-button:not([raised]).keyboard-focus {
+        outline-width: unset;
+        font-weight: unset;
+      }
+
+      .app-name {
+        flex: 1;
+      }
+    </style>
+
+    <template is="dom-repeat" items="[[appList]]">
+      <paper-button toggles noink
+          active$="[[item.selected]]" on-click="onAppClick_">
+        <div class$="[[item.icon]] app-icon"></div>
+        <div class="app-name">[[item.name]]</div>
+        <iron-icon icon="cr:check"></iron-icon>
+      </paper-button>
+    </template>
+  </template>
+  <script src="apps_chooser.js"></script>
+</dom-module>

components/nux_google_apps/resources/apps_chooser.js

+// Copyright 2018 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.
+
+/**
+ * @const
+ */
+var nux_google_apps = nux_google_apps || {};
+
+/**
+ * @typedef {{
+ *   item: !{
+ *     name: string,
+ *     icon: string,
+ *     selected: boolean,
+ *   },
+ *   set: function(string, boolean):void
+ * }}
+ */
+nux_google_apps.AppsArrayModel;
+
+Polymer({
+  is: 'apps-chooser',
+  properties: {
+    // TODO(hcarmona): Get this list dynamically.
+    appList: {
+      type: Array,
+      value: function() {
+        return [
+          {
+            name: 'Gmail',
+            icon: 'gmail',
+            selected: true,
+          },
+          {
+            name: 'YouTube',
+            icon: 'youtube',
+            selected: true,
+          },
+          {
+            name: 'Maps',
+            icon: 'maps',
+            selected: true,
+          },
+          {
+            name: 'Translate',
+            icon: 'translate',
+            selected: true,
+          },
+          {
+            name: 'News',
+            icon: 'news',
+            selected: true,
+          },
+          {
+            name: 'Chrome Web Store',
+            icon: 'chrome_store',
+            selected: true,
+          },
+        ];
+      },
+    },
+  },
+
+  /**
+   * Handle toggling the apps selected.
+   * @param {!{model: !nux_google_apps.AppsArrayModel}} e
+   * @private
+   */
+  onAppClick_: function(e) {
+    e.model.set('item.selected', !e.model.item.selected);
+  },
+});

components/nux_google_apps/resources/nux_google_apps.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>$i18n{headerText}</title>
+
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://welcome/apps/apps_chooser.html">
+
+<dom-module id="nux-google-apps">
+  <template>
+    <style include="paper-button-style">
+      body {
+        margin: 0;
+      }
+
+      .apps-ask {
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 116px;
+        max-width: 568px;
+      }
+
+      .chrome-logo {
+        content: -webkit-image-set(
+            url('chrome://welcome/logo.png') 1x,
+            url('chrome://welcome/logo2x.png') 2x);
+        height: 40px;
+        margin-bottom: 36px;
+        width: 40px;
+      }
+
+      h1 {
+        color: #202124;
+        font-size: 28px;
+        opacity: .8;
+        margin-bottom: 16px;
+      }
+
+      .description {
+        color: #5f6368;
+        font-size: 16px;
+        margin-bottom: 24px;
+      }
+
+      apps-chooser {
+        color: #202124;
+        font-size: 14px;
+        margin-bottom: 48px;
+      }
+
+      paper-button {
+        font-size: 14px;
+      }
+
+      .button-bar {
+        display: flex;
+        justify-content: space-between;
+      }
+    </style>
+
+    <div class="apps-ask">
+      <div class="chrome-logo"></div>
+      <h1>$i18n{headerText}</h1>
+      <div class="description">$i18n{nuxDescription}</div>
+
+      <apps-chooser></apps-chooser>
+
+      <div class="button-bar">
+        <paper-button>$i18n{noThanks}</paper-button>
+        <paper-button class="action-button">$i18n{getStarted}</paper-button>
+      </div>
+    </div>
+  </template>
+  <script src="apps/nux_google_apps.js"></script>
+</dom-module>
+
+<nux-google-apps></nux-google-apps>
+<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+
+</html>

components/nux_google_apps/resources/nux_google_apps.js

+// Copyright 2018 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.
+
+Polymer({
+  is: 'nux-google-apps',
+});

components/nux_google_apps/webui.cc

+// Copyright 2018 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.
+
+#include "components/nux_google_apps/webui.h"
+
+#include "base/metrics/field_trial_params.h"
+#include "components/grit/components_resources.h"
+#include "components/grit/components_scaled_resources.h"
+#include "components/nux_google_apps/constants.h"
+#include "components/strings/grit/components_strings.h"
+#include "content/public/browser/web_ui_data_source.h"
+
+namespace nux_google_apps {
+
+void AddSources(content::WebUIDataSource* html_source) {
+  // Localized strings.
+  html_source->AddLocalizedString("noThanks", IDS_NO_THANKS);
+  html_source->AddLocalizedString("getStarted",
+                                  IDS_NUX_GOOGLE_APPS_GET_STARTED);
+  html_source->AddLocalizedString("nuxDescription",
+                                  IDS_NUX_GOOGLE_APPS_DESCRIPTION);
+
+  // Add required resources.
+  html_source->AddResourcePath("apps", IDR_NUX_GOOGLE_APPS_HTML);
+  html_source->AddResourcePath("apps/nux_google_apps.js",
+                               IDR_NUX_GOOGLE_APPS_JS);
+
+  html_source->AddResourcePath("apps/apps_chooser.html",
+                               IDR_NUX_GOOGLE_APPS_CHOOSER_HTML);
+  html_source->AddResourcePath("apps/apps_chooser.js",
+                               IDR_NUX_GOOGLE_APPS_CHOOSER_JS);
+
+  // Add icons
+  html_source->AddResourcePath("apps/chrome_store_1x.png",
+                               IDR_NUX_GOOGLE_APPS_CHROME_STORE_1X);
+  html_source->AddResourcePath("apps/chrome_store_2x.png",
+                               IDR_NUX_GOOGLE_APPS_CHROME_STORE_2X);
+  html_source->AddResourcePath("apps/gmail_1x.png",
+                               IDR_NUX_GOOGLE_APPS_GMAIL_1X);
+  html_source->AddResourcePath("apps/gmail_2x.png",
+                               IDR_NUX_GOOGLE_APPS_GMAIL_2X);
+  html_source->AddResourcePath("apps/maps_1x.png", IDR_NUX_GOOGLE_APPS_MAPS_1X);
+  html_source->AddResourcePath("apps/maps_2x.png", IDR_NUX_GOOGLE_APPS_MAPS_2X);
+  html_source->AddResourcePath("apps/news_1x.png", IDR_NUX_GOOGLE_APPS_NEWS_1X);
+  html_source->AddResourcePath("apps/news_2x.png", IDR_NUX_GOOGLE_APPS_NEWS_2X);
+  html_source->AddResourcePath("apps/translate_1x.png",
+                               IDR_NUX_GOOGLE_APPS_TRANSLATE_1X);
+  html_source->AddResourcePath("apps/translate_2x.png",
+                               IDR_NUX_GOOGLE_APPS_TRANSLATE_2X);
+  html_source->AddResourcePath("apps/youtube_1x.png",
+                               IDR_NUX_GOOGLE_APPS_YOUTUBE_1X);
+  html_source->AddResourcePath("apps/youtube_2x.png",
+                               IDR_NUX_GOOGLE_APPS_YOUTUBE_2X);
+}
+
+}  // namespace nux_google_apps

components/nux_google_apps/webui.h

+// Copyright 2018 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.
+
+#ifndef COMPONENTS_NUX_GOOGLE_APPS_WEBUI_H_
+#define COMPONENTS_NUX_GOOGLE_APPS_WEBUI_H_
+
+#include "base/macros.h"
+#include "content/public/browser/web_ui_data_source.h"
+
+namespace nux_google_apps {
+
+void AddSources(content::WebUIDataSource* html_source);
+
+}  // namespace nux_google_apps
+
+#endif  // COMPONENTS_NUX_GOOGLE_APPS_WEBUI_H_

components/nux_google_apps_strings.grdp

+<?xml version="1.0" encoding="utf-8"?>
+<grit-part>
+  <message name="IDS_NUX_GOOGLE_APPS_GET_STARTED" desc="Message for a confirmation button that will add the selected apps from a list.">
+    Get started
+  </message>
+  <message name="IDS_NUX_GOOGLE_APPS_DESCRIPTION" desc="Description of what selecting apps and pressing 'Get started' will do.">
+    Get quick access to your favorite Google Apps
+  </message>
+</grit-part>

components/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("//components/nux_google_apps/features.gni")
 import("//printing/buildflags/buildflags.gni")
 import("//tools/grit/grit_rule.gni")
 import("//third_party/brotli/brotli.gni")
@@ -32,6 +33,7 @@ grit("components_resources") {
   defines = [
     "enable_basic_printing=$enable_basic_printing",
     "enable_print_preview=$enable_print_preview",
+    "enable_nux_google_apps=$enable_nux_google_apps",
   ]
 
   deps = [

components/resources/components_resources.grd

@@ -16,6 +16,9 @@
       <part file="net_log_resources.grdp" />
       <part file="neterror_resources.grdp" />
       <part file="ntp_tiles_resources.grdp" />
+      <if expr="enable_nux_google_apps">
+        <part file="nux_google_apps.grdp" />
+      </if>
       <part file="offline_pages_resources.grdp" />
       <part file="password_manager_internals_resources.grdp" />
       <part file="printing_resources.grdp" />

components/resources/nux_google_apps.grdp

+<?xml version="1.0" encoding="utf-8"?>
+<grit-part>
+  <include name="IDR_NUX_GOOGLE_APPS_HTML" file="../nux_google_apps/resources/nux_google_apps.html" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_JS" file="../nux_google_apps/resources/nux_google_apps.js" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_CHOOSER_HTML" file="../nux_google_apps/resources/apps_chooser.html" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_CHOOSER_JS" file="../nux_google_apps/resources/apps_chooser.js" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_CHROME_STORE_1X" file="../nux_google_apps/resources/chrome_store_24dp_1x.png" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_CHROME_STORE_2X" file="../nux_google_apps/resources/chrome_store_24dp_2x.png" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_GMAIL_1X" file="../nux_google_apps/resources/gmail_24dp_1x.png" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_GMAIL_2X" file="../nux_google_apps/resources/gmail_24dp_2x.png" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_MAPS_1X" file="../nux_google_apps/resources/maps_24dp_1x.png" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_MAPS_2X" file="../nux_google_apps/resources/maps_24dp_2x.png" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_NEWS_1X" file="../nux_google_apps/resources/news_24dp_1x.png" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_NEWS_2X" file="../nux_google_apps/resources/news_24dp_2x.png" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_TRANSLATE_1X" file="../nux_google_apps/resources/translate_24dp_1x.png" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_TRANSLATE_2X" file="../nux_google_apps/resources/translate_24dp_2x.png" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_YOUTUBE_1X" file="../nux_google_apps/resources/youtube_24dp_1x.png" type="BINDATA" />
+  <include name="IDR_NUX_GOOGLE_APPS_YOUTUBE_2X" file="../nux_google_apps/resources/youtube_24dp_2x.png" type="BINDATA" />
+</grit-part>

ui/webui/resources/cr_elements/icons.html

@@ -32,8 +32,8 @@ blurry at 20 px). Please use 20 px icons when available.
       <g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"></path></g>
 <if expr="chromeos">
       <g id="camera-alt"><circle cx="12" cy="12" r="3.2"></circle><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"></path></g>
-      <g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></g>
 </if>
+      <g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></g>
       <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></g>
       <g id="clear"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g>
       <g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g>