[Emoji Picker] Render <seal-app /> under flag

- Sync seal resources from CIPD.
- Render <seal-snackbar /> and <seal-app /> when related flag is enabled.


Bug: b:311086550
Change-Id: I7b64fc44327c165b849d07c5c7d07c1815ecfca1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5242520
Commit-Queue: Grey Wang <greywang@google.com>
Reviewed-by: Lei Zhang <thestig@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1254265}

.gitignore

@@ -123,6 +123,7 @@ vs-chromium-project.txt
 /chrome/browser/performance_monitor/performance_monitor.xml
 /chrome/browser/protector/internal
 /chrome/browser/resources/chromeos/mako/resources/
+/chrome/browser/resources/chromeos/seal/resources/
 /chrome/browser/resources/pdf/html_office
 /chrome/browser/resources/media_router/extension/src/
 /chrome/browser/resources/preinstalled_web_apps/internal/

DEPS

@@ -3868,6 +3868,17 @@ deps = {
     'dep_type': 'cipd',
   },
 
+  'src/chrome/browser/resources/chromeos/seal/resources': {
+    'packages' : [
+      {
+        'package': 'chromeos_internal/inputs/seal',
+        'version': '11AdGL1RBEo2LflLT5Vc8Q3vBfjsHQAuH5jAhUBxL9QC'
+      }
+    ],
+    'condition': 'checkout_chromeos and checkout_src_internal',
+    'dep_type': 'cipd',
+  },
+
   # Installer bits used only by Mac, but mapped for all OSes to ease source
   # grepping.
   'src/chrome/installer/mac/internal': {

chrome/browser/resources/chromeos/BUILD.gn

@@ -44,6 +44,7 @@ group("resources") {
     "parent_access:resources",
     "password_change:resources",
     "remote_maintenance_curtain:resources",
+    "seal:resources",
     "sensor_info:resources",
     "set_time_dialog:resources",
     "supervision:resources",

chrome/browser/resources/chromeos/emoji_picker/app.html

@@ -334,6 +334,7 @@
     on-scroll="onSearchScroll"
     category-metadata="[[getCategoryMetadata(gifSupport, category)]]"
     gif-support$="[[gifSupport]]"
+    seal-support$="[[sealSupport]]"
     close-gif-nudge-overlay="[[closeGifNudgeOverlay]]"
     use-grouped-preference="[[shouldUseGroupedPreference(false)]]"
     global-tone="[[globalTone]]"

chrome/browser/resources/chromeos/emoji_picker/emoji_search.html

@@ -171,6 +171,12 @@
   #search-results {
     width: var(--search-content-width);
   }
+
+  seal-app {
+    width: var(--search-content-width);
+    margin-top: 8px;
+    margin-bottom: 8px;
+  }
 </style>
 
 <div id="searchShadow">
@@ -196,34 +202,58 @@
     <div class="sr-only" role="heading" aria-level="1">
       Emoji Search Results
     </div>
-    <div id="search-results">
-      <template is="dom-repeat" items="[[searchResults]]">
-        <emoji-group data="[[item.emoji]]" category$="[[item.category]]"
-          gif-support$="[[gifSupport]]" global-tone="[[globalTone]]"
-          global-gender="[[globalGender]]"
-          use-grouped-preference="[[useGroupedPreference]">
-        </emoji-group>
-      </template>
+
+    <template is="dom-if" if="[[sealMode]]">
+      <seal-app
+        query="[[getSearchQuery()]]"
+        on-seal-app-query-change="onSealQueryChange"
+        on-seal-app-image-click="onSealImageClick"
+      >
+      </seal-app>
+    </template>
+
+    <!-- Do not show regular search results in seal mode -->
+    <template is="dom-if" if="[[!sealMode]]">
+      <div id="search-results">
+
+        <template is="dom-repeat" items="[[searchResults]]">
+          <emoji-group data="[[item.emoji]]" category$="[[item.category]]"
+            gif-support$="[[gifSupport]]" global-tone="[[globalTone]]"
+            global-gender="[[globalGender]]"
+            use-grouped-preference="[[useGroupedPreference]">
+          </emoji-group>
+        </template>
     </div>
-    <div class="no-result">
-      <template is="dom-if" if="[[noResults(status, searchResults)]]">
-        <svg id="no-emoji-image" xmlns="http://www.w3.org/2000/svg" width="224" height="168" viewBox="0 0 224 168" fill="none">
-          <path d="M183 71.5103C183 70.6172 183.782 69.9474 184.675 70.0032C192.21 70.8405 198.071 77.2038 198.071 84.9068C198.071 92.6656 192.266 99.0289 184.731 99.8662C183.838 99.9778 183.056 99.2522 183.056 98.3591L183 71.5103Z" fill="var(--cros-sys-illo-secondary)" />
-          <path d="M123.572 74.0606C121.841 74.7862 120.167 75.7351 118.548 76.6282C116.259 77.8562 113.58 78.1353 111.124 77.4097C109.729 77.019 108.389 76.5166 106.938 76.2375C101.97 75.3444 97.1704 78.9168 97.0024 84.0521C96.8904 88.6292 100.742 92.704 105.375 92.4807C107.496 92.3691 109.561 91.5318 111.627 91.2527C113.915 90.9736 116.148 91.3643 118.101 92.5365C119.776 93.5413 121.339 94.7134 123.125 95.5507C124.856 96.3322 126.753 96.6671 128.707 96.5555C134.456 96.1647 139.145 91.5876 139.647 85.8383C140.261 78.9726 134.959 73.1675 128.205 73C126.586 73.0558 125.023 73.4466 123.572 74.0606Z" stroke="var(--cros-sys-illo-secondary)" stroke-width="1.65922" stroke-miterlimit="10" />
-          <path d="M68.0816 87.1182L82.2037 95.491C83.655 96.3283 85.497 95.3236 85.5528 93.649L85.7761 77.2384C85.7761 75.5638 83.9899 74.4474 82.4828 75.2847L68.1374 83.3226C66.6303 84.104 66.6303 86.2251 68.0816 87.1182Z" fill="var(--cros-sys-illo-color1-2)" />
-          <path d="M214.247 90.4939C217.145 90.4939 219.494 88.1448 219.494 85.247C219.494 82.3492 217.145 80 214.247 80C211.349 80 209 82.3492 209 85.247C209 88.1448 211.349 90.4939 214.247 90.4939Z" fill="var(--cros-sys-illo-color1-1)" />
-          <path d="M31.9604 97.1109C44.9697 97.1109 55.5158 86.5648 55.5158 73.5555C55.5158 60.5462 44.9697 50 31.9604 50C18.9511 50 8.40491 60.5462 8.40491 73.5555C8.40491 86.5648 18.9511 97.1109 31.9604 97.1109Z" stroke="var(--cros-sys-illo-color1)" stroke-width="1.65922" stroke-miterlimit="10" />
-          <path d="M19.9036 93.8184L5 118.825" stroke="var(--cros-sys-illo-color1)" stroke-width="5.94044" stroke-miterlimit="10" />
-          <path d="M170.717 88.1871L164.187 94.7179C162.68 96.225 160.168 96.225 158.661 94.7179L152.13 88.1871C150.623 86.68 150.623 84.1682 152.13 82.6611L158.661 76.1303C160.168 74.6232 162.68 74.6232 164.187 76.1303L170.717 82.6611C172.225 84.1682 172.225 86.6242 170.717 88.1871Z" fill="var(--cros-sys-illo-color1)" />
-        </svg>
-        No result found
-      </template>
-      <template is="dom-if" if="[[isGifInErrorState(status, searchResults)]]">
-        <emoji-error
-          status="[[status]]"
-          error-message="[[errorMessage]]">
-        </emoji-error>
-      </template>
+    </template>
+
+    <!-- No results / error for seal mode is rendered by <seal-app /> -->
+    <template is="dom-if" if="[[!sealMode]]">
+      <div class="no-result">
+        <template is="dom-if" if="[[noResults(status, searchResults)]]">
+          <svg id="no-emoji-image" xmlns="http://www.w3.org/2000/svg" width="224" height="168" viewBox="0 0 224 168" fill="none">
+            <path d="M183 71.5103C183 70.6172 183.782 69.9474 184.675 70.0032C192.21 70.8405 198.071 77.2038 198.071 84.9068C198.071 92.6656 192.266 99.0289 184.731 99.8662C183.838 99.9778 183.056 99.2522 183.056 98.3591L183 71.5103Z" fill="var(--cros-sys-illo-secondary)" />
+            <path d="M123.572 74.0606C121.841 74.7862 120.167 75.7351 118.548 76.6282C116.259 77.8562 113.58 78.1353 111.124 77.4097C109.729 77.019 108.389 76.5166 106.938 76.2375C101.97 75.3444 97.1704 78.9168 97.0024 84.0521C96.8904 88.6292 100.742 92.704 105.375 92.4807C107.496 92.3691 109.561 91.5318 111.627 91.2527C113.915 90.9736 116.148 91.3643 118.101 92.5365C119.776 93.5413 121.339 94.7134 123.125 95.5507C124.856 96.3322 126.753 96.6671 128.707 96.5555C134.456 96.1647 139.145 91.5876 139.647 85.8383C140.261 78.9726 134.959 73.1675 128.205 73C126.586 73.0558 125.023 73.4466 123.572 74.0606Z" stroke="var(--cros-sys-illo-secondary)" stroke-width="1.65922" stroke-miterlimit="10" />
+            <path d="M68.0816 87.1182L82.2037 95.491C83.655 96.3283 85.497 95.3236 85.5528 93.649L85.7761 77.2384C85.7761 75.5638 83.9899 74.4474 82.4828 75.2847L68.1374 83.3226C66.6303 84.104 66.6303 86.2251 68.0816 87.1182Z" fill="var(--cros-sys-illo-color1-2)" />
+            <path d="M214.247 90.4939C217.145 90.4939 219.494 88.1448 219.494 85.247C219.494 82.3492 217.145 80 214.247 80C211.349 80 209 82.3492 209 85.247C209 88.1448 211.349 90.4939 214.247 90.4939Z" fill="var(--cros-sys-illo-color1-1)" />
+            <path d="M31.9604 97.1109C44.9697 97.1109 55.5158 86.5648 55.5158 73.5555C55.5158 60.5462 44.9697 50 31.9604 50C18.9511 50 8.40491 60.5462 8.40491 73.5555C8.40491 86.5648 18.9511 97.1109 31.9604 97.1109Z" stroke="var(--cros-sys-illo-color1)" stroke-width="1.65922" stroke-miterlimit="10" />
+            <path d="M19.9036 93.8184L5 118.825" stroke="var(--cros-sys-illo-color1)" stroke-width="5.94044" stroke-miterlimit="10" />
+            <path d="M170.717 88.1871L164.187 94.7179C162.68 96.225 160.168 96.225 158.661 94.7179L152.13 88.1871C150.623 86.68 150.623 84.1682 152.13 82.6611L158.661 76.1303C160.168 74.6232 162.68 74.6232 164.187 76.1303L170.717 82.6611C172.225 84.1682 172.225 86.6242 170.717 88.1871Z" fill="var(--cros-sys-illo-color1)" />
+          </svg>
+          No result found
+        </template>
+
+        <template is="dom-if" if="[[isGifInErrorState(status, searchResults)]]">
+          <emoji-error
+            status="[[status]]"
+            error-message="[[errorMessage]]">
+          </emoji-error>
+        </template>
     </div>
+    </template>
   </div>
 </template>
+
+<template is="dom-if" if="[[sealSupport]]">
+  <seal-snackbar on-seal-snackbar-confirm="onSealToastConfirmed">
+  </seal-snackbar>
+</template>

chrome/browser/resources/chromeos/emoji_picker/emoji_search.ts

@@ -9,15 +9,28 @@ import './emoji_group.js';
 import {CrSearchFieldElement} from 'chrome://resources/ash/common/cr_elements/cr_search_field/cr_search_field.js';
 import {PolymerSpliceChange} from 'chrome://resources/polymer/v3_0/polymer/interfaces.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {Size} from 'chrome://resources/mojo/ui/gfx/geometry/mojom/geometry.mojom-webui.js';
+import {Url} from 'chrome://resources/mojo/url/mojom/url.mojom-webui.js';
 
 import {NO_INTERNET_SEARCH_ERROR_MSG} from './constants.js';
 import {Status} from './emoji_picker.mojom-webui.js';
 import {EmojiPickerApiProxyImpl} from './emoji_picker_api_proxy.js';
 import {getTemplate} from './emoji_search.html.js';
-import {GIF_ERROR_TRY_AGAIN} from './events.js';
+import {createCustomEvent, EMOJI_IMG_BUTTON_CLICK, GIF_ERROR_TRY_AGAIN} from './events.js';
 import Fuse from './fuse.js';
 import {CategoryData, CategoryEnum, EmojiGroupData, EmojiVariants, Gender, Tone} from './types.js';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'seal-snackbar': { show(): void } & HTMLElement;
+  }
+}
+
+interface Image {
+  url: Url;
+  size: Size;
+}
+
 export interface EmojiSearch {
   $: {
     search: CrSearchFieldElement,
@@ -25,6 +38,7 @@ export interface EmojiSearch {
   };
 }
 
+const SEAL_DEFAULT_STYLE_NAME = 'seal';
 
 export class EmojiSearch extends PolymerElement {
   static get is() {
@@ -43,6 +57,7 @@ export class EmojiSearch extends PolymerElement {
       searchResults: {type: Array},
       needIndexing: {type: Boolean, value: false},
       gifSupport: {type: Boolean, value: false},
+      sealSupport: {type: Boolean, value: false},
       status: {type: Status, value: null},
       searchQuery: {type: String, value: ''},
       nextGifPos: {type: String, value: ''},
@@ -51,6 +66,7 @@ export class EmojiSearch extends PolymerElement {
       useGroupedPreference: {type: Boolean, value: false},
       globalTone: {type: Number, value: null, readonly: true},
       globalGender: {type: Number, value: null, readonly: true},
+      sealMode: {type: Boolean, value: false},
     };
   }
   categoriesData: EmojiGroupData;
@@ -59,11 +75,13 @@ export class EmojiSearch extends PolymerElement {
   private searchResults: EmojiGroupData;
   private needIndexing: boolean;
   private gifSupport: boolean;
+  private sealSupport: boolean;
   private status: Status|null;
   private closeGifNudgeOverlay: () => void;
   private useGroupedPreference: boolean;
   private globalTone: Tone|null = null;
   private globalGender: Gender|null = null;
+  private sealMode: boolean;
 
   // TODO(b/235419647): Update the config to use extended search.
   private fuseConfig: Fuse.IFuseOptions<EmojiVariants> = {
@@ -98,6 +116,11 @@ export class EmojiSearch extends PolymerElement {
   }
 
   private onSearch(newSearch: string): void {
+    this.sealMode = this.isSealMode(newSearch);
+    if (this.sealMode) {
+      return;
+    }
+
     const localSearchResults = this.computeLocalSearchResults(newSearch);
     if (!this.gifSupport) {
       this.set('searchResults', localSearchResults);
@@ -333,6 +356,11 @@ export class EmojiSearch extends PolymerElement {
           .then((searchResults) => {
             this.push(['searchResults', gifIndex, 'emoji'], ...searchResults);
           });
+
+      // As part of loading more GIFs process, we also show seal snackbar.
+      if (!this.sealMode && this.sealSupport) {
+        this.shadowRoot?.querySelector('seal-snackbar')?.show();
+      }
     }
   }
 
@@ -433,6 +461,41 @@ export class EmojiSearch extends PolymerElement {
     this.onSearch(this.$.search.getValue());
   }
 
+  getSearchQuery(): string {
+    return this.$.search.getValue();
+  }
+
+  isSealMode(query: string): boolean {
+    return query.includes(':');
+  }
+
+  onSealToastConfirmed() {
+    if (!this.sealMode && this.sealSupport) {
+      this.setSearchQuery(`${SEAL_DEFAULT_STYLE_NAME}: ${this.getSearchQuery()}`);
+    }
+  }
+
+  onSealQueryChange(e: CustomEvent<string>) {
+    this.setSearchQuery(e.detail);
+  }
+
+  onSealImageClick(e: CustomEvent<Image>) {
+    this.dispatchEvent(createCustomEvent(
+      EMOJI_IMG_BUTTON_CLICK, {
+        name: 'image',
+        category: CategoryEnum.GIF,
+        visualContent: {
+          id: 'seal',
+          url: {
+            full: e.detail.url,
+            preview: e.detail.url,
+          },
+          previewSize: e.detail.size,
+        },
+      },
+    ));
+  }
+
   /**
    * Sets the search query
    */
@@ -453,5 +516,4 @@ declare global {
   }
 }
 
-
 customElements.define(EmojiSearch.is, EmojiSearch);

chrome/browser/resources/chromeos/emoji_picker/index.html

@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="chrome://theme/typography.css">
   <meta charset="utf-8">
   <title>Emoji Picker</title>
+  <script type="module" src="seal.js"></script>
   <script type="module" src="emoji_picker.js"></script>
   <style>
     html,

chrome/browser/resources/chromeos/seal/BUILD.gn

@@ -0,0 +1,18 @@
+# Copyright 2024 The Chromium Authors
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+import("//tools/grit/grit_rule.gni")
+grit("resources") {
+  source = "resources.grd"
+
+  outputs = [
+    "grit/seal_resources.h",
+    "grit/seal_resources_map.h",
+    "grit/seal_resources_map.cc",
+    "seal_resources.pak",
+  ]
+  output_dir = "$root_gen_dir/chrome"
+
+  use_brotli = true
+}

chrome/browser/resources/chromeos/seal/OWNERS

@@ -0,0 +1,2 @@
+greywang@google.com
+jopalmer@chromium.org

chrome/browser/resources/chromeos/seal/README

@@ -0,0 +1 @@
+Private resources for Seal

chrome/browser/resources/chromeos/seal/resources.grd

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<grit latest_public_release="0" current_release="1" output_all_resource_defines="false">
+  <outputs>
+    <output filename="grit/seal_resources.h" type="rc_header">
+      <emit emit_type='prepend'></emit>
+    </output>
+    <output filename="seal_resources.pak" type="data_package" />
+    <output filename="grit/seal_resources_map.cc"
+            type="resource_file_map_source" />
+    <output filename="grit/seal_resources_map.h"
+            type="resource_map_header" />
+  </outputs>
+  <release seq="1">
+    <includes>
+      <if expr="_google_chrome">
+        <then>
+          <include name="IDR_SEAL_JS" file="resources/seal/seal_js.js" resource_path="seal.js" type="BINDATA" />
+        </then>
+        <else>
+          <include name="IDR_SEAL_JS" file="seal_fake.js" resource_path="seal.js" type="BINDATA" />
+        </else>
+      </if>
+    </includes>
+  </release>
+</grit>

chrome/browser/resources/chromeos/seal/seal_fake.js

@@ -0,0 +1 @@
+// fake resource for seal.js

chrome/browser/ui/webui/ash/emoji/emoji_ui.cc

@@ -20,6 +20,8 @@
 #include "chrome/grit/emoji_picker_resources.h"
 #include "chrome/grit/emoji_picker_resources_map.h"
 #include "chrome/grit/generated_resources.h"
+#include "chrome/grit/seal_resources.h"
+#include "chrome/grit/seal_resources_map.h"
 #include "chromeos/ash/components/emoji/grit/emoji_map.h"
 #include "content/public/browser/url_data_source.h"
 #include "content/public/browser/web_ui.h"
@@ -71,6 +73,21 @@ EmojiUI::EmojiUI(content::WebUI* web_ui)
       IDR_EMOJI_PICKER_INDEX_HTML);
   source->AddResourcePaths(base::make_span(kEmoji, kEmojiSize));
 
+  // Add seal extra resources.
+  if (SealUtils::ShouldEnable()) {
+    source->AddResourcePaths(
+        base::make_span(kSealResources, kSealResourcesSize));
+  }
+
+  // Some web components defined in seal extra resources are based on lit; so
+  // we override content security policy here to make them work.
+  source->OverrideContentSecurityPolicy(
+      network::mojom::CSPDirectiveName::TrustedTypes,
+      "trusted-types goog#html parse-html-subset sanitize-inner-html "
+      "static-types lit-html lottie-worker-script-loader webui-test-script "
+      "webui-test-html print-preview-plugin-loader polymer-html-literal "
+      "polymer-template-event-attribute-policy;");
+
   Profile* profile = Profile::FromWebUI(web_ui);
   content::URLDataSource::Add(profile,
                               std::make_unique<SanitizedImageSource>(profile));

chrome/chrome_paks.gni

@@ -287,6 +287,7 @@ template("chrome_extra_paks") {
         "$root_gen_dir/chrome/parent_access_resources.pak",
         "$root_gen_dir/chrome/password_change_resources.pak",
         "$root_gen_dir/chrome/remote_maintenance_curtain_resources.pak",
+        "$root_gen_dir/chrome/seal_resources.pak",
         "$root_gen_dir/chrome/sensor_info_resources.pak",
         "$root_gen_dir/chrome/set_time_dialog_resources.pak",
         "$root_gen_dir/chrome/supervision_resources.pak",

tools/gritsettings/resource_ids.spec

@@ -182,6 +182,10 @@
     "META": {"sizes": {"includes": [50]}},
     "includes": [2640],
   },
+  "chrome/browser/resources/chromeos/seal/resources.grd": {
+    "META": {"sizes": {"includes": [50]}},
+    "includes": [2650],
+  },
   "<(SHARED_INTERMEDIATE_DIR)/chrome/browser/resources/chromeos/parent_access/resources.grd": {
     "META": {"sizes": {"includes": [50],}},
     "includes": [2660],