feedback: add icons for help content types

- Add an icon for Forum content type.
- Add an icon for both Article and Unknown content types.
- Use rgb() over #hex when not a shade of gray (like #333).
    fill: #db4437 (replace with rgb(219, 68, 55))
    fill: #0f9d58 (replace with rgb(15, 157, 88))
    fill: #ffcd40 (replace with rgb(255, 205, 64))

See [1] for a screenshot showing the icons.

[1] https://screenshot.googleplex.com/BuEp9RogcePHffD.

Bug: b:185624798
Test: browser_tests --gtest_filter=OSFeedbackBrowserTest.*
Change-Id: I230fd9b3111f93af75890e30fd863a2dc9d6d232
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3529231
Reviewed-by: Gavin Williams <gavinwill@chromium.org>
Commit-Queue: Xiangdong Kong <xiangdongkong@google.com>
Cr-Commit-Position: refs/heads/main@{#983376}

ash/webui/os_feedback_ui/os_feedback_untrusted_ui.cc

@@ -44,6 +44,8 @@ OsFeedbackUntrustedUI::OsFeedbackUntrustedUI(content::WebUI* web_ui)
                                     IDR_ASH_OS_FEEDBACK_HELP_CONTENT_JS);
   untrusted_source->AddResourcePath("feedback_types.js",
                                     IDR_ASH_OS_FEEDBACK_FEEDBACK_TYPES_JS);
+  untrusted_source->AddResourcePath(
+      "help_resources_icons.js", IDR_ASH_OS_FEEDBACK_HELP_RESOURCES_ICONS_JS);
   untrusted_source->AddResourcePath(
       "mojom/os_feedback_ui.mojom-lite.js",
       IDR_ASH_OS_FEEDBACK_MOJOM_OS_FEEDBACK_UI_MOJOM_LITE_JS);

ash/webui/os_feedback_ui/resources/fake_data.js

@@ -15,29 +15,29 @@ export const fakeHelpContentList = [
   {
     title: stringToMojoString16('Fix connection problems'),
     url: {url: 'https://support.google.com/chromebook/?q=6318213'},
-    content_type: HelpContentType.kArticle
+    contentType: HelpContentType.kArticle
   },
   {
     title: stringToMojoString16(
         'Why won\'t my wireless mouse with a USB piece wor...?'),
     url: {url: 'https://support.google.com/chromebook/?q=123920509'},
-    content_type: HelpContentType.kForum
+    contentType: HelpContentType.kForum
   },
   {
     title: stringToMojoString16('Wifi Issues - only on Chromebooks'),
     url: {url: 'https://support.google.com/chromebook/?q=114174470'},
-    content_type: HelpContentType.kForum
+    contentType: HelpContentType.kForum
   },
   {
     title: stringToMojoString16('Network Connectivity Fault'),
     url: {url: 'https://support.google.com/chromebook/?q=131459420'},
-    content_type: HelpContentType.kForum
+    contentType: HelpContentType.kForum
   },
   {
     title: stringToMojoString16(
         'Connected to WiFi but can\'t connect to the internet'),
     url: {url: 'https://support.google.com/chromebook/?q=22864239'},
-    content_type: HelpContentType.kForum
+    contentType: HelpContentType.kUnknown
   }
 ];
 

ash/webui/os_feedback_ui/resources/help_content.html

@@ -1,11 +1,15 @@
 <style>
   .help-item {
     display: flex;
-    margin: 12px 12px 0;
+    margin:  12px 0 0;
+  }
+
+  iron-icon {
+    padding-inline-end: 12px;
   }
 
   #helpContentLabel {
-    margin-top: 24px;
+    margin: 24px 0 0;
   }
 </style>
 <div id="helpContentContainer">
@@ -14,8 +18,10 @@
   <dom-repeat items="[[helpContentList]]">
     <template>
       <div class="help-item">
-        <!--TODO(xiangdongkong): add icon -->
-        <a href="[[getUrl_(item)]]" target="_blank">[[getTitle_(item)]]</a>
+        <a href="[[getUrl_(item)]]" target="_blank">
+          <iron-icon icon="[[getIcon_(item.contentType)]]"></iron-icon>
+          <span>[[getTitle_(item)]]</span>
+        </a>
       </div>
     </template>
   </dom-repeat>

ash/webui/os_feedback_ui/resources/help_content.js

@@ -2,10 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './help_resources_icons.js';
+import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
 import {mojoString16ToString} from '//resources/ash/common/mojo_utils.js';
 import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {HelpContent, HelpContentList, HelpContentType} from './feedback_types.js';
 
-import {HelpContent, HelpContentList} from './feedback_types.js';
+/**
+ * @const {string}
+ */
+const ICON_NAME_FOR_ARTICLE = 'content-type:article';
+
+/**
+ * @const {string}
+ */
+const ICON_NAME_FOR_FORUM = 'content-type:forum';
 
 /**
  * @fileoverview
@@ -30,6 +41,25 @@ export class HelpContentElement extends PolymerElement {
     };
   }
 
+  /**
+   * Find the icon name to be used for a help content type.
+   * @param {!HelpContentType} contentType
+   * @return {string}
+   * @protected
+   */
+  getIcon_(contentType) {
+    switch (contentType) {
+      case HelpContentType.kForum:
+        return ICON_NAME_FOR_FORUM;
+      case HelpContentType.kArticle:
+        return ICON_NAME_FOR_ARTICLE;
+      case HelpContentType.kUnknown:
+        return ICON_NAME_FOR_ARTICLE;
+      default:
+        return ICON_NAME_FOR_ARTICLE;
+    }
+  }
+
   /**
    * Extract the url string from help content.
    * @param {!HelpContent} helpContent

ash/webui/os_feedback_ui/resources/help_resources_icons.html

@@ -37,15 +37,15 @@
       <g id="chromebook-community">
         <style>
           .st2 {
-            fill: #db4437
+            fill: rgb(219, 68, 55)
           }
 
           .st6 {
-            fill: #0f9d58
+            fill: rgb(15, 157, 88)
           }
 
           .st11 {
-            fill: #ffcd40
+            fill: rgb(255, 205, 64)
           }
 
           .st31 {
@@ -288,3 +288,28 @@
     </defs>
   </svg>
 </iron-iconset-svg>
+
+<iron-iconset-svg name="content-type" size="20">
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <g id="article">
+        <path d="M7 7H13V9H7V7Z" fill="#202124"></path>
+        <path d="M11 10H7V12H11V10Z" fill="#202124"></path>
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M5 3H15C16.1 3 17 3.9 17 5V15C17 16.1 16.1 17 15 17H5C3.9 17 3 16.1 3 15V5C3 3.9 3.9 3 5 3ZM5 15H15V5H5V15Z"
+            fill="#202124"></path>
+      </g>
+    </defs>
+  </svg>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+          <defs>
+      <g id="forum">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M16 2H3.66667C2.75 2 2.00833 2.75 2.00833 3.66667L2 17.5L5 15H16C16.9167 15 18 14.4167 18 13.5V3.5C18 2.58333 16.9167 2 16 2ZM16 13H4V4H16V13ZM5 9H11V11H5V9ZM5 6H15V8H5V6Z"
+            fill="#202124"></path>
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>

ash/webui/os_feedback_ui/resources/help_resources_icons.js

@@ -2,9 +2,9 @@
 // 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 '//resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
 
-import {html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {html} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 const template = html`{__html_template__}`;
 document.head.appendChild(template.content);

chrome/test/data/webui/chromeos/os_feedback_ui/help_content_test.js

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import {fakeHelpContentList} from 'chrome://os-feedback/fake_data.js';
-import {HelpContentList} from 'chrome://os-feedback/feedback_types.js';
+import {HelpContentList, HelpContentType} from 'chrome://os-feedback/feedback_types.js';
 import {HelpContentElement} from 'chrome://os-feedback/help_content.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
@@ -45,6 +45,23 @@ export function helpContentTestSuite() {
     return helpContentElement.shadowRoot.querySelector(selector);
   }
 
+  /**
+   * @param {!Element} linkElement
+   * @param {!HelpContentType} expectedContentType
+   * */
+  function verifyIconName(linkElement, expectedContentType) {
+    assertEquals(2, linkElement.children.length);
+    // The first child is an iron-icon.
+    const iconName = linkElement.children[0].icon;
+
+    if (expectedContentType === HelpContentType.kForum) {
+      assertEquals(iconName, 'content-type:forum');
+    } else {
+      // Both kArticle or kUnknown have the same icon.
+      assertEquals(iconName, 'content-type:article');
+    }
+  }
+
   /** Test that expected html elements are in the element. */
   test('HelpContentLoaded', async () => {
     await initializeHelpContentElement(fakeHelpContentList);
@@ -65,28 +82,33 @@ export function helpContentTestSuite() {
     assertEquals('Fix connection problems', helpLinks[0].innerText);
     assertEquals(
         'https://support.google.com/chromebook/?q=6318213', helpLinks[0].href);
+    verifyIconName(helpLinks[0], fakeHelpContentList[0].contentType);
 
     assertEquals(
         'Why won\'t my wireless mouse with a USB piece wor...?',
         helpLinks[1].innerText);
     assertEquals(
         'https://support.google.com/chromebook/?q=123920509',
         helpLinks[1].href);
+    verifyIconName(helpLinks[1], fakeHelpContentList[1].contentType);
 
     assertEquals('Wifi Issues - only on Chromebooks', helpLinks[2].innerText);
     assertEquals(
         'https://support.google.com/chromebook/?q=114174470',
         helpLinks[2].href);
+    verifyIconName(helpLinks[2], fakeHelpContentList[2].contentType);
 
     assertEquals('Network Connectivity Fault', helpLinks[3].innerText);
     assertEquals(
         'https://support.google.com/chromebook/?q=131459420',
         helpLinks[3].href);
+    verifyIconName(helpLinks[3], fakeHelpContentList[3].contentType);
 
     assertEquals(
         'Connected to WiFi but can\'t connect to the internet',
         helpLinks[4].innerText);
     assertEquals(
         'https://support.google.com/chromebook/?q=22864239', helpLinks[4].href);
+    verifyIconName(helpLinks[4], fakeHelpContentList[4].contentType);
   });
 }