feedback: add contents to confirmation page

- add svg icons for the explore and diagnostics app - add css styles for content layout - add test to verify the contents screenshot: https://screenshot.googleplex.com/4CnQSdDuAnxW34Q.png Styles will be fine tuned to match specification later. Bug: b/185624798 Change-Id: Ib8939e117eb4bee2d00bf82e60cb36e5bad06f93 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2954726 Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org> Commit-Queue: Xiangdong Kong <xiangdongkong@google.com> Cr-Commit-Position: refs/heads/master@{#892316}
chromium · Jun 14, 2021 · c6499b8 · c6499b8
1 parent d12648e
commit c6499b8
Show file tree

Hide file tree

Showing 8 changed files with 180 additions and 13 deletions.
diff --git a/ash/content/os_feedback_ui/resources/BUILD.gn b/ash/content/os_feedback_ui/resources/BUILD.gn
@@ -17,6 +17,7 @@ preprocessed_gen_manifest = "preprocessed_gen_manifest.json"
 polymer_element_files = [
   "confirmation_page.js",
   "os_feedback_shared_css.js",
+  "help_resources_icons.js",
 ]
 
 generate_grd("build_grd") {
@@ -45,6 +46,12 @@ js_library("confirmation_page") {
   ]
 }
 
+js_library("help_resources_icons") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 preprocess_if_expr("preprocess_generated") {
   deps = [ ":web_components" ]
   in_folder = target_gen_dir

diff --git a/ash/content/os_feedback_ui/resources/confirmation_page.html b/ash/content/os_feedback_ui/resources/confirmation_page.html
@@ -1,3 +1,46 @@
-<style include="os-feedback-shared"></style>
-<!-- TODO(xiangdongkong): replace with real content-->
-<div id="header"></div>
+<style include="os-feedback-shared">
+  cr-link-row {
+    border: 1px solid;
+    border-radius: 4px;
+    height: 64px;
+    margin: 12px 0 0 0;
+  }
+
+  #help-resources {
+    display: flex;
+    flex-direction: column;
+  }
+</style>
+<!--TODO(xiangdongkong): use localized strings -->
+<!--TODO(xiangdongkong): handle offline case -->
+<div id="container">
+  <div id="header">
+    <h1 id="title">Thanks for your feedback</h1>
+  </div>
+  <div id="message">
+    Your feedback helps improve Chrome OS and will be reviewed by our team.
+    Because of the large number of reports, we won’t be able to send a reply.
+  </div>
+  <div id="helpResources">
+    <p id="helpResourcesLabel">Here are some other helpful resources:</p>
+    <cr-link-row id="explore"
+        start-icon="help-resources:explore"
+        label="Explore app" external
+        sub-label="Find help articles and answers to common Chromebook questions">
+    </cr-link-row>
+    <cr-link-row id="diagnostics"
+        start-icon="help-resources:diagnostics"
+        label="Diagnostics app" external
+        sub-label="Run tests and troubleshooting for hardware issues">
+    </cr-link-row>
+    <cr-link-row id="chromebookCommunity"
+        start-icon="help-resources:chrome"
+        label="Chromebook community"
+        sub-label="Ask the experts in the Chromebook help forum" external>
+    </cr-link-row>
+  </div>
+  <div id="navButtons">
+    <cr-button id="startNewReport" class="action-button">Send new report</cr-button>
+    <cr-button id="done" class="cancel-button">Done</cr-button>
+  </div>
+</div>
diff --git a/ash/content/os_feedback_ui/resources/confirmation_page.js b/ash/content/os_feedback_ui/resources/confirmation_page.js
@@ -2,10 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
+import './help_resources_icons.js';
+import './os_feedback_shared_css.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import 'chrome://resources/cr_elements/cr_link_row/cr_link_row.js';
+import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import './os_feedback_shared_css.js';
 
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
 /**
  * @fileoverview
  * 'confirmation-page' is the last step of the feedback tool.
@@ -22,8 +27,6 @@ export class ConfirmationPageElement extends PolymerElement {
   /** @override */
   ready() {
     super.ready();
-    /**TODO(xiangdongkong): remove  */
-    this.$.header.textContent = 'Thank you for your feedback';
   }
 
   close_() {

diff --git a/ash/content/os_feedback_ui/resources/help_resources_icons.html b/ash/content/os_feedback_ui/resources/help_resources_icons.html
@@ -0,0 +1,32 @@
+<!--TODO(xiangdongkong): svg for chrome -->
+<iron-iconset-svg name="help-resources" size="256">
+  <svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <g id="explore" clip-path="url(#clip0)">
+        <circle cx="128" cy="128" r="117" fill="#1A73E8"/>
+        <path d="M169.026 169.026L64.3746 64.3745C53.0609 75.6882 63.4318 104.915 78.5167 120L148.285 189.768L169.026 169.026Z" fill="#84FFFF"/>
+        <path d="M169.026 169.026L64.3741 64.3743C75.6878 53.0606 104.915 63.4315 120 78.5164L189.768 148.284L169.026 169.026Z" fill="#84FFFF"/>
+        <path d="M91.0686 189.121C89.0682 187.12 87.9444 184.407 87.9444 181.578L87.9444 129.428L148.284 189.768L127.542 210.51C123.377 214.675 116.623 214.675 112.457 210.51L91.0686 189.121Z" fill="#8AB4F8"/>
+        <path d="M189.121 91.0687C187.12 89.0683 184.407 87.9445 181.578 87.9445L129.428 87.9445L189.768 148.284L210.51 127.543C214.675 123.377 214.675 116.623 210.51 112.458L189.121 91.0687Z" fill="#8AB4F8"/>
+        <circle cx="92.6581" cy="92.6585" r="12" transform="rotate(-45 92.6581 92.6585)" fill="#1A73E8"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M130.468 143.668C130.489 143.69 130.511 143.711 130.532 143.733C130.553 143.754 130.575 143.776 130.597 143.797L165.189 178.39C165.211 178.412 165.232 178.433 165.254 178.455C168.899 182.1 174.809 182.1 178.453 178.455C182.098 174.81 182.098 168.901 178.454 165.256L178.454 165.256L143.349 130.151L143.338 130.162C139.673 126.893 134.049 127.017 130.532 130.534C127.015 134.05 126.892 139.675 130.16 143.34L130.15 143.35L130.468 143.668Z" fill="white"/>
+      </g>
+      <g id="diagnostics" clip-path="url(#clip0)">
+        <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="10" y="10" width="236" height="236">
+          <circle cx="127.999" cy="128" r="117.333" fill="#C4C4C4"/>
+        </mask>
+        <g mask="url(#mask0)">
+          <rect width="256" height="256" fill="#5F6368"/>
+          <path d="M65.3325 153.334L107.999 110.668L145.333 146.001L188.666 102.668" stroke="#DADCE0" stroke-width="18.6667" stroke-linejoin="bevel"/>
+          <circle cx="66.6662" cy="153.333" r="14.6667" fill="white"/>
+          <circle cx="146.666" cy="146.667" r="14.6667" fill="white"/>
+          <circle cx="109.333" cy="110.666" r="14.6667" fill="#84FFFF"/>
+          <circle cx="190.666" cy="102.667" r="14.6667" fill="#84FFFF"/>
+        </g>
+      </g>
+      <clipPath id="clip0">
+        <rect width="256" height="256" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+</iron-iconset-svg>
diff --git a/ash/content/os_feedback_ui/resources/help_resources_icons.js b/ash/content/os_feedback_ui/resources/help_resources_icons.js
@@ -0,0 +1,10 @@
+// Copyright 2021 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 'chrome://resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
+
+import {html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+const template = html`{__html_template__}`;
+document.head.appendChild(template.content);
diff --git a/ash/content/os_feedback_ui/resources/index.html b/ash/content/os_feedback_ui/resources/index.html
@@ -6,11 +6,19 @@
 
 <head>
   <meta charset="utf-8">
+  <style>
+    html,
+    body {
+      height: 100%;
+    }
+    body {
+      margin: 0 40px 0;
+    }
+  </style>
 </head>
 
 <body>
-  <!-- TODO(xiangdongkong): replace with real content-->
-  <div>Hello, World!</div>
+  <!-- TODO(xiangdongkong): add other steps and manage states-->
   <confirmation-page></confirmation-page>
 
   <script type="module" src="confirmation_page.js"></script>

diff --git a/ash/content/os_feedback_ui/resources/os_feedback_shared_css.html b/ash/content/os_feedback_ui/resources/os_feedback_shared_css.html
@@ -7,5 +7,32 @@
     html {
       background-color: var(--cros-bg-color);
     }
+
+    #container {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    #header {
+      display: flex;
+      height: 68px;
+      margin: 0 0 24px 0;
+    }
+
+    #title {
+      margin-block-end: 0;
+      margin: auto 0 0 0;
+    }
+
+    #navButtons {
+      align-self: flex-end;
+      display: flex;
+      margin: auto 0 40px 0;
+    }
+
+    cr-button {
+      margin-inline-start: 20px;
+    }
   </style>
 </template>
diff --git a/chrome/test/data/webui/chromeos/os_feedback_ui/confirmation_page_test.js b/chrome/test/data/webui/chromeos/os_feedback_ui/confirmation_page_test.js
@@ -4,7 +4,7 @@
 
 import {ConfirmationPageElement} from 'chrome://os-feedback/confirmation_page.js';
 
-import {assertEquals} from '../../chai_assert.js';
+import {assertEquals, assertTrue} from '../../chai_assert.js';
 
 export function confirmationPageTest() {
   /** @type {?ConfirmationPageElement} */
@@ -22,10 +22,47 @@ export function confirmationPageTest() {
     component = null;
   });
 
-  /**TODO(xiangdongkong): replace with real test  */
+  /**TODO(xiangdongkong): test user actions */
   test('confirmationPageLoaded', () => {
     assertEquals(
-        'Thank you for your feedback',
-        component.shadowRoot.querySelector('#header').textContent);
+        'Thanks for your feedback',
+        component.shadowRoot.querySelector('#title').textContent);
+    assertTrue(!!component.shadowRoot.querySelector('#message'));
+
+    // verify navigation buttons exist
+    const doneButton = component.shadowRoot.querySelector('#done');
+    const startNewButton =
+        component.shadowRoot.querySelector('#startNewReport');
+    assertTrue(!!doneButton);
+    assertTrue(!!startNewButton);
+
+    // verify help resources exist
+    const helpResourcesSection =
+        component.shadowRoot.querySelector('#helpResources');
+    assertTrue(!!helpResourcesSection);
+    assertEquals(
+        'Here are some other helpful resources:',
+        component.shadowRoot.querySelector('#helpResourcesLabel').textContent);
+    const helpLinks = helpResourcesSection.querySelectorAll('cr-link-row');
+    assertTrue(!!helpLinks);
+    assertEquals(helpLinks.length, 3);
+
+    assertTrue(!!helpLinks[0].shadowRoot.querySelector('#startIcon'));
+    assertTrue(!!helpLinks[0].shadowRoot.querySelector('#subLabel'));
+    const exploreLabel = helpLinks[0].shadowRoot.querySelector('#label');
+    assertTrue(!!exploreLabel);
+    assertEquals(exploreLabel.textContent.trim(), 'Explore app');
+
+    assertTrue(!!helpLinks[1].shadowRoot.querySelector('#startIcon'));
+    assertTrue(!!helpLinks[1].shadowRoot.querySelector('#subLabel'));
+    const diagnosticsLabel = helpLinks[1].shadowRoot.querySelector('#label');
+    assertTrue(!!diagnosticsLabel);
+    assertEquals(diagnosticsLabel.textContent.trim(), 'Diagnostics app');
+
+    assertTrue(!!helpLinks[2].shadowRoot.querySelector('#startIcon'));
+    assertTrue(!!helpLinks[2].shadowRoot.querySelector('#subLabel'));
+    const communityLabel = helpLinks[2].shadowRoot.querySelector('#label');
+    assertTrue(!!communityLabel);
+    assertEquals(communityLabel.textContent.trim(), 'Chromebook community');
   });
 }