[ntp][modules] Add helper element simplifying embedding external images

+ Use this helper to embed images into the dummy module.

Fixed: 1110064
Bug: 1087011
Change-Id: Ifb2f20ee085f547f8b55cd3b18cfd4cc3b05153d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2380147
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Auto-Submit: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#802805}

chrome/browser/resources/new_tab_page/BUILD.gn

@@ -18,6 +18,7 @@ js_type_check("closure_compile") {
     ":fakebox",
     ":iframe",
     ":logo",
+    ":new_tab_page",
     ":one_google_bar_api",
     ":promo_browser_command_proxy",
     ":realbox",
@@ -34,6 +35,21 @@ js_type_check("closure_compile") {
   ]
 }
 
+js_library("new_tab_page") {
+  deps = [
+    ":app",
+    ":background_manager",
+    ":browser_proxy",
+    ":customize_dialog",
+    ":promo_browser_command_proxy",
+    ":utils",
+    "modules:module_descriptor",
+    "modules:module_registry",
+    "modules/dummy:module",
+    "modules/kaleidoscope:module",
+  ]
+}
+
 js_library("browser_proxy") {
   deps = [
     ":background_manager",
@@ -229,6 +245,9 @@ js_library("background_manager") {
 js_library("one_google_bar_api") {
 }
 
+js_library("img") {
+}
+
 html_to_js("web_components_local") {
   js_files = [
     "app.js",

chrome/browser/resources/new_tab_page/img.js

+// Copyright 2020 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.
+
+/**
+ * @fileoverview <ntp-img> is specialized <img> that lets you embed external
+ * images via its external-src attribute. Usage:
+ *
+ *   1. In C++ register |SanitizedImageSource| for your WebUI.
+ *
+ *   2. In HTML instantiate
+ *
+ *      <img is="ntp-img" external-src="https://foo.com/bar.png"></img>
+ *
+ * NOTE: Internally, <ntp-img> uses the chrome://image data source. This means
+ * the external image will be transcoded to PNG.
+ */
+
+/** @type {string} */
+const EXTERNAL_SRC = 'external-src';
+
+export class ImgElement extends HTMLImageElement {
+  static get observedAttributes() {
+    return [EXTERNAL_SRC];
+  }
+
+  /** @override */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === EXTERNAL_SRC) {
+      this.src = newValue ? 'chrome://image?' + newValue : '';
+    }
+  }
+
+  /** @param {string} src */
+  set externalSrc(src) {
+    this.setAttribute(EXTERNAL_SRC, src);
+  }
+
+  /** @return {string} */
+  get externalSrc() {
+    return this.getAttribute(EXTERNAL_SRC);
+  }
+}
+
+customElements.define('ntp-img', ImgElement, {extends: 'img'});

chrome/browser/resources/new_tab_page/modules/dummy/BUILD.gn

@@ -8,6 +8,7 @@ import("//tools/polymer/html_to_js.gni")
 js_library("module") {
   deps = [
     "..:module_descriptor",
+    "../..:img",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_grid",
   ]

chrome/browser/resources/new_tab_page/modules/dummy/module.html

 <style>
-.tile-item {
-    background-color: var(--ntp-active-background-color);
-    border-color: var(--ntp-border-color);
-    border-radius: 8px;
-    border-style: solid;
-    border-width: thin;
+  cr-grid {
+    --cr-grid-gap: 8px;
+  }
+
+  .tile-item {
     color: var(--cr-primary-text-color);
-    height: 85px;
-    line-height: 85px;
-    margin: 10px;
-    text-align: center;
+    height: 120px;
     width: 170px;
   }
+
+  img {
+    border-radius: 8px;
+  }
 </style>
 <cr-grid id="tiles" columns="3">
   <template id="tileList" is="dom-repeat" items="[[tiles]]">
-    <div class="tile-item" title="[[item.label]]">[[item.value]]</div>
+    <div class="tile-item" title="[[item.label]]">
+      <img is="ntp-img" external-src="[[item.imageUrl]]"></img>
+      <span>[[item.value]]</span>
+    </div>
   </template>
 </cr-grid>

chrome/browser/resources/new_tab_page/modules/dummy/module.js

@@ -4,6 +4,8 @@
 
 import 'chrome://resources/cr_elements/cr_grid/cr_grid.js';
 
+import '../../img.js';
+
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -28,9 +30,54 @@ class DummyModuleElement extends PolymerElement {
       tiles: {
         type: Array,
         value: () => ([
-          {label: 'item1', value: 'foo'},
-          {label: 'item2', value: 'bar'},
-          {label: 'item3', value: 'baz'},
+          {
+            label: 'item1',
+            value: 'foo',
+            imageUrl: 'https://lh4.googleusercontent.com/proxy/' +
+                'kFIJNnm2DMbS3B5LXaIdm2JKI6twGWwmzQbcJCfqTfuaH_' +
+                'ULD50v1Z3BGPEF32xTPRvgGLx492zcy_kcatCde2wmz-9Z' +
+                'YFqifbJRMl2DzyE=w170-h85-p-k-no-nd-mv',
+          },
+          {
+            label: 'item2',
+            value: 'bar',
+            imageUrl: 'https://lh6.googleusercontent.com/proxy/' +
+                'KyyCsF6dIQ783r3Znmvdo76QY2RgzcR5t4rnA5kKjsmrlp' +
+                'sb_pWGndQkyuAI4mv68X_9ZX2Edd-0FP4iQZRFm8UAW3oD' +
+                'X8Coqk3C85UNAX3H4Eh_5wGyDB0SY6HOQjOXVQ=w170-h85-p-k-no-nd-mv',
+          },
+          {
+            label: 'item3',
+            value: 'baz',
+            imageUrl: 'https://lh6.googleusercontent.com/proxy/' +
+                '4IP40Q18w6aDF4oS4WRnUj0MlCCKPK-vLHqSd4r-RfS6Jx' +
+                'gblG5WJuRYpkJkoTzLMS0qv3Sxhf9wdaKkn3vHnyy6oe7Ah' +
+                '5y0=w170-h85-p-k-no-nd-mv',
+          },
+          {
+            label: 'item4',
+            value: 'foo',
+            imageUrl: 'https://lh3.googleusercontent.com/proxy/' +
+                'd_4gDNBtm9Ddv8zqqm0MVY93_j-_e5M-bGgH-bSAfIR65F' +
+                'YGacJTemvNp9fDT0eiIbi3bzrf7HMMsupe2QIIfm5H7BMH' +
+                'Y3AI5rkYUpx-lQ=w170-h85-p-k-no-nd-mv',
+          },
+          {
+            label: 'item5',
+            value: 'bar',
+            imageUrl: 'https://lh5.googleusercontent.com/proxy/' +
+                'xvtq6_782kBajCBr0GISHpujOb51XLKUeEOJ2lLPKh12-x' +
+                'NBTCtsoHT14NQcaH9l4JhatcXEMBkqgUeCWhb3XhdLnD1B' +
+                'iNzQ_LVydwg=w170-h85-p-k-no-nd-mv',
+          },
+          {
+            label: 'item6',
+            value: 'baz',
+            imageUrl: 'https://lh6.googleusercontent.com/proxy/' +
+                'fUx750lchxFJb3f37v_-4iJPzcTKtJbd5LDRO7S9Xy7nkP' +
+                'zh7HFU61tN36j4Diaa9Yk3K7kWshRwmqcrulnhbeJrRpIn' +
+                '79PjHN-N=w170-h85-p-k-no-nd-mv',
+          },
         ]),
       }
     };

chrome/browser/resources/new_tab_page/new_tab_page.js

@@ -15,6 +15,7 @@ import './app.js';
 export {BackgroundManager} from './background_manager.js';
 export {BrowserProxy} from './browser_proxy.js';
 export {BackgroundSelectionType} from './customize_dialog.js';
+export {ImgElement} from './img.js';
 export {dummyDescriptor} from './modules/dummy/module.js';
 export {kaleidoscopeDescriptor} from './modules/kaleidoscope/module.js';
 export {ModuleDescriptor} from './modules/module_descriptor.js';

chrome/browser/resources/new_tab_page/new_tab_page_resources.grd

@@ -72,6 +72,8 @@
       <include name="IDR_NEW_TAB_PAGE_REALBOX_MATCH_JS"
           file="${root_gen_dir}/chrome/browser/resources/new_tab_page/realbox_match.js"
           use_base_dir="false" type="BINDATA" compress="false" />
+      <include name="IDR_NEW_TAB_PAGE_IMG_JS"
+          file="img.js" type="BINDATA" compress="false" />
       <include name="IDR_NEW_TAB_PAGE_BROWSER_PROXY_JS"
           file="browser_proxy.js" type="BINDATA" compress="false" />
       <include name="IDR_NEW_TAB_PAGE_UTILS_JS"

chrome/test/data/webui/BUILD.gn

@@ -430,6 +430,7 @@ group("closure_compile") {
     "cr_elements:closure_compile",
     "nearby_share:closure_compile",
     "nearby_share/shared:closure_compile",
+    "new_tab_page:closure_compile",
     "print_preview:closure_compile",
     "settings:closure_compile",
     "signin:closure_compile",

chrome/test/data/webui/new_tab_page/BUILD.gn

+# Copyright 2020 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") {
+  is_polymer3 = true
+  closure_flags = default_closure_args + [ "browser_resolver_prefix_replacements=\"chrome://new-tab-page/=../../chrome/browser/resources/new_tab_page/\"" ]
+  deps = [ ":img_test" ]
+}
+
+js_library("img_test") {
+  deps = [ "//chrome/browser/resources/new_tab_page" ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}

chrome/test/data/webui/new_tab_page/img_test.js

+// Copyright 2020 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 {ImgElement} from 'chrome://new-tab-page/new_tab_page.js';
+
+import {assertEquals} from '../chai_assert.js';
+
+suite('NewTabPageImgTest', () => {
+  /** @type {!ImgElement} */
+  let img;
+
+  setup(() => {
+    document.body.innerHTML = '';
+    img = new ImgElement();
+    document.body.appendChild(img);
+  });
+
+  test('setting externalSrc sets src', () => {
+    // Act.
+    img.externalSrc = 'foo.com/img.png';
+
+    // Assert.
+    assertEquals('foo.com/img.png', img.externalSrc);
+    assertEquals('foo.com/img.png', img.getAttribute('external-src'));
+    assertEquals('chrome://image/?foo.com/img.png', img.src);
+  });
+
+  test('setting external-src sets src', () => {
+    // Act.
+    img.setAttribute('external-src', 'foo.com/img.png');
+
+    // Assert.
+    assertEquals('foo.com/img.png', img.externalSrc);
+    assertEquals('foo.com/img.png', img.getAttribute('external-src'));
+    assertEquals('chrome://image/?foo.com/img.png', img.src);
+  });
+});

chrome/test/data/webui/new_tab_page/modules/dummy/module_test.js

@@ -20,8 +20,14 @@ suite('NewTabPageModulesDummyModuleTest', () => {
     // Assert.
     assertTrue(isVisible(module.$.tiles));
     const tiles = module.shadowRoot.querySelectorAll('#tiles .tile-item');
-    assertEquals(3, tiles.length);
+    assertEquals(6, tiles.length);
     assertEquals('item3', tiles[2].getAttribute('title'));
-    assertEquals('baz', tiles[2].textContent);
+    assertEquals('baz', tiles[2].querySelector('span').textContent);
+    assertEquals(
+        'https://lh6.googleusercontent.com/proxy/' +
+            '4IP40Q18w6aDF4oS4WRnUj0MlCCKPK-vLHqSd4r-RfS6Jx' +
+            'gblG5WJuRYpkJkoTzLMS0qv3Sxhf9wdaKkn3vHnyy6oe7Ah' +
+            '5y0=w170-h85-p-k-no-nd-mv',
+        tiles[2].querySelector('img').externalSrc);
   });
 });

chrome/test/data/webui/new_tab_page/new_tab_page_browsertest.js

@@ -203,6 +203,18 @@ TEST_F('NewTabPageModulesModuleWrapperTest', 'All', function() {
   mocha.run();
 });
 
+// eslint-disable-next-line no-var
+var NewTabPageImgTest = class extends NewTabPageBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://new-tab-page/test_loader.html?module=new_tab_page/img_test.js';
+  }
+};
+
+TEST_F('NewTabPageImgTest', 'All', function() {
+  mocha.run();
+});
+
 // eslint-disable-next-line no-var
 var NewTabPageModulesModuleRegistryTest = class extends NewTabPageBrowserTest {
   /** @override */