diff --git a/chrome/browser/chrome_browser_interface_binders.cc b/chrome/browser/chrome_browser_interface_binders.cc index e534f636d39c9..cc1b51d594b3c 100644 --- a/chrome/browser/chrome_browser_interface_binders.cc +++ b/chrome/browser/chrome_browser_interface_binders.cc @@ -136,6 +136,7 @@ #include "chrome/browser/ui/webui/download_shelf/download_shelf.mojom.h" #include "chrome/browser/ui/webui/download_shelf/download_shelf_ui.h" #include "chrome/browser/ui/webui/history_clusters/history_clusters.mojom.h" +#include "chrome/browser/ui/webui/history_clusters/memories_ui.h" #include "chrome/browser/ui/webui/internals/user_education/user_education_internals.mojom.h" #include "chrome/browser/ui/webui/new_tab_page/new_tab_page.mojom.h" #include "chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.h" @@ -691,7 +692,7 @@ void PopulateChromeWebUIFrameBinders( if (base::FeatureList::IsEnabled(history_clusters::kMemories)) { RegisterWebUIControllerInterfaceBinder(map); + HistoryUI, MemoriesUI>(map); } RegisterWebUIControllerInterfaceBinder< diff --git a/chrome/browser/flag_descriptions.cc b/chrome/browser/flag_descriptions.cc index 565be687535ff..bd0c32fe2c853 100644 --- a/chrome/browser/flag_descriptions.cc +++ b/chrome/browser/flag_descriptions.cc @@ -1588,11 +1588,11 @@ const char kMediaSessionWebRTCDescription[] = "Adds new actions into Media Session for video conferencing."; const char kMemoriesName[] = "Memories"; -const char kMemoriesDescription[] = "Enables chrome://history/journeys."; +const char kMemoriesDescription[] = "Enables chrome://memories."; const char kMemoriesDebugName[] = "Memories Debug"; const char kMemoriesDebugDescription[] = - "Shows visit metadata in chrome://history to debug history clustering."; + "Show debug information for chrome://memories."; const char kMetricsSettingsAndroidName[] = "Metrics Settings on Android"; const char kMetricsSettingsAndroidDescription[] = diff --git a/chrome/browser/resources/BUILD.gn b/chrome/browser/resources/BUILD.gn index a9bd738415f45..4176f1772e1dd 100644 --- a/chrome/browser/resources/BUILD.gn +++ b/chrome/browser/resources/BUILD.gn @@ -35,6 +35,7 @@ group("resources") { "gaia_auth_host:resources", "history:resources", "management:resources", + "memories:resources", "new_tab_page:resources", "new_tab_page_instant:resources", "new_tab_page_third_party:resources", diff --git a/chrome/browser/resources/history/BUILD.gn b/chrome/browser/resources/history/BUILD.gn index 60fea25cf0cd3..902e95019287f 100644 --- a/chrome/browser/resources/history/BUILD.gn +++ b/chrome/browser/resources/history/BUILD.gn @@ -70,7 +70,6 @@ preprocess_if_expr("preprocess") { "browser_service.ts", "constants.ts", "externs.ts", - "history_clusters/browser_proxy.ts", "history.ts", "lazy_load.ts", "query_manager.ts", @@ -84,14 +83,6 @@ preprocess_if_expr("preprocess_generated") { out_folder = "$target_gen_dir/$preprocess_folder" in_files = [ "app.ts", - "history_clusters/cluster.ts", - "history_clusters/clusters.ts", - "history_clusters/page_favicon.ts", - "history_clusters/search_query.ts", - "history_clusters/shared_style.ts", - "history_clusters/shared_vars.ts", - "history_clusters/top_visit.ts", - "history_clusters/url_visit.ts", "history_item.ts", "history_list.ts", "history_toolbar.ts", @@ -121,7 +112,7 @@ grit("resources") { output_dir = "$root_gen_dir/chrome" } -html_to_js("web_components_local") { +html_to_js("web_components") { js_files = [ "app.ts", "history_item.ts", @@ -136,13 +127,6 @@ html_to_js("web_components_local") { ] } -group("web_components") { - public_deps = [ - ":web_components_local", - "history_clusters:web_components", - ] -} - ts_library("build_ts") { root_dir = "$target_gen_dir/$preprocess_folder" out_dir = "$target_gen_dir/tsc" @@ -152,16 +136,16 @@ ts_library("build_ts") { "browser_service.ts", "constants.ts", "externs.ts", - "history_clusters/browser_proxy.ts", - "history_clusters/cluster.ts", - "history_clusters/clusters.ts", + "history_clusters/browser_proxy.js", + "history_clusters/cluster.js", + "history_clusters/clusters.js", "history_clusters/history_clusters.mojom-webui.js", - "history_clusters/page_favicon.ts", - "history_clusters/search_query.ts", - "history_clusters/shared_style.ts", - "history_clusters/shared_vars.ts", - "history_clusters/top_visit.ts", - "history_clusters/url_visit.ts", + "history_clusters/page_favicon.js", + "history_clusters/search_query.js", + "history_clusters/shared_style.js", + "history_clusters/shared_vars.js", + "history_clusters/top_visit.js", + "history_clusters/visit_row.js", "history_item.ts", "history_list.ts", "history_toolbar.ts", @@ -182,12 +166,31 @@ ts_library("build_ts") { ] definitions = [ "//tools/typescript/definitions/chrome_send.d.ts" ] extra_deps = [ + ":copy_history_clusters", ":copy_history_clusters_mojom", ":preprocess", ":preprocess_generated", ] } +copy("copy_history_clusters") { + sources = [ + "$target_gen_dir/../memories/tsc/browser_proxy.js", + "$target_gen_dir/../memories/tsc/cluster.js", + "$target_gen_dir/../memories/tsc/clusters.js", + "$target_gen_dir/../memories/tsc/page_favicon.js", + "$target_gen_dir/../memories/tsc/search_query.js", + "$target_gen_dir/../memories/tsc/shared_style.js", + "$target_gen_dir/../memories/tsc/shared_vars.js", + "$target_gen_dir/../memories/tsc/top_visit.js", + "$target_gen_dir/../memories/tsc/visit_row.js", + ] + outputs = [ + "$target_gen_dir/$preprocess_folder/history_clusters/{{source_file_part}}", + ] + deps = [ "//chrome/browser/resources/memories:build_ts" ] +} + copy("copy_history_clusters_mojom") { sources = [ "$root_gen_dir/mojom-webui/chrome/browser/ui/webui/history_clusters/history_clusters.mojom-webui.js" ] outputs = [ diff --git a/chrome/browser/resources/history/history_clusters/BUILD.gn b/chrome/browser/resources/history/history_clusters/BUILD.gn deleted file mode 100644 index 47a7bc9bd29ec..0000000000000 --- a/chrome/browser/resources/history/history_clusters/BUILD.gn +++ /dev/null @@ -1,18 +0,0 @@ -# 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("//tools/polymer/html_to_js.gni") - -html_to_js("web_components") { - js_files = [ - "cluster.ts", - "clusters.ts", - "page_favicon.ts", - "search_query.ts", - "shared_style.ts", - "shared_vars.ts", - "top_visit.ts", - "url_visit.ts", - ] -} diff --git a/chrome/browser/resources/memories/.eslintrc.js b/chrome/browser/resources/memories/.eslintrc.js new file mode 100644 index 0000000000000..52e5ab65cc690 --- /dev/null +++ b/chrome/browser/resources/memories/.eslintrc.js @@ -0,0 +1,11 @@ +// 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. + +module.exports = { + 'env': { + 'browser': true, + 'es6': true, + }, + 'rules': {'eqeqeq': ['error', 'always', {'null': 'ignore'}]}, +}; diff --git a/chrome/browser/resources/history/history_clusters/DIR_METADATA b/chrome/browser/resources/memories/DIR_METADATA similarity index 100% rename from chrome/browser/resources/history/history_clusters/DIR_METADATA rename to chrome/browser/resources/memories/DIR_METADATA diff --git a/chrome/browser/resources/history/history_clusters/OWNERS b/chrome/browser/resources/memories/OWNERS similarity index 66% rename from chrome/browser/resources/history/history_clusters/OWNERS rename to chrome/browser/resources/memories/OWNERS index d18a5f8f64f90..d03b4327dacc2 100644 --- a/chrome/browser/resources/history/history_clusters/OWNERS +++ b/chrome/browser/resources/memories/OWNERS @@ -1,2 +1 @@ -mahmadi@chromium.org file://components/history_clusters/OWNERS diff --git a/chrome/browser/resources/memories/app.html b/chrome/browser/resources/memories/app.html new file mode 100644 index 0000000000000..84b66270e5d9a --- /dev/null +++ b/chrome/browser/resources/memories/app.html @@ -0,0 +1,20 @@ + + + + + diff --git a/chrome/browser/resources/memories/app.ts b/chrome/browser/resources/memories/app.ts new file mode 100644 index 0000000000000..00e0908a69d26 --- /dev/null +++ b/chrome/browser/resources/memories/app.ts @@ -0,0 +1,96 @@ +// 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 './clusters.js'; +import './router.js'; +import './shared_vars.js'; +import 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar.js'; + +import {CrToolbarElement} from 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar.js'; +import {CrToolbarSearchFieldElement} from 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js'; +import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; + +/** + * @fileoverview This file provides the root custom element for the Clusters + * landing page. + */ + +const RESULTS_PER_PAGE: number = 5; + +declare global { + interface HTMLElementTagNameMap { + 'clusters-app': HistoryClustersAppElement, + } + + interface Window { + // https://github.com/microsoft/TypeScript/issues/40807 + requestIdleCallback(callback: () => void): void; + } +} + +interface HistoryClustersAppElement { + $: { + toolbar: CrToolbarElement, + }; +} + +class HistoryClustersAppElement extends PolymerElement { + static get is() { + return 'clusters-app'; + } + + static get template() { + return html`{__html_template__}`; + } + + static get properties() { + return { + /** + * The current query for which related Clusters are requested and shown. + */ + query_: { + type: String, + observer: 'onQueryChanged_', + }, + }; + } + + //============================================================================ + // Properties + //============================================================================ + + private query_: string = ''; + + //============================================================================ + // Event handlers + //============================================================================ + + /** + * Called when the value of the search field changes. + */ + private onSearchChanged_(event: CustomEvent) { + // Update the query based on the value of the search field, if necessary. + if (event.detail !== this.query_) { + this.query_ = event.detail; + } + } + + //============================================================================ + // Helper methods + //============================================================================ + + private getSearchField_(): CrToolbarSearchFieldElement { + return this.$.toolbar.getSearchField(); + } + + private onQueryChanged_() { + // Update the value of the search field based on the query, if necessary. + const searchField = this.getSearchField_(); + if (searchField.getValue() !== this.query_) { + searchField.setValue(this.query_); + } + } +} + +customElements.define(HistoryClustersAppElement.is, HistoryClustersAppElement); diff --git a/chrome/browser/resources/history/history_clusters/browser_proxy.ts b/chrome/browser/resources/memories/browser_proxy.ts similarity index 100% rename from chrome/browser/resources/history/history_clusters/browser_proxy.ts rename to chrome/browser/resources/memories/browser_proxy.ts diff --git a/chrome/browser/resources/history/history_clusters/cluster.html b/chrome/browser/resources/memories/cluster.html similarity index 100% rename from chrome/browser/resources/history/history_clusters/cluster.html rename to chrome/browser/resources/memories/cluster.html diff --git a/chrome/browser/resources/history/history_clusters/cluster.ts b/chrome/browser/resources/memories/cluster.ts similarity index 100% rename from chrome/browser/resources/history/history_clusters/cluster.ts rename to chrome/browser/resources/memories/cluster.ts diff --git a/chrome/browser/resources/history/history_clusters/clusters.html b/chrome/browser/resources/memories/clusters.html similarity index 100% rename from chrome/browser/resources/history/history_clusters/clusters.html rename to chrome/browser/resources/memories/clusters.html diff --git a/chrome/browser/resources/history/history_clusters/clusters.ts b/chrome/browser/resources/memories/clusters.ts similarity index 98% rename from chrome/browser/resources/history/history_clusters/clusters.ts rename to chrome/browser/resources/memories/clusters.ts index fdd99dd19e223..3021ddb8fb1bc 100644 --- a/chrome/browser/resources/history/history_clusters/clusters.ts +++ b/chrome/browser/resources/memories/clusters.ts @@ -150,12 +150,12 @@ class HistoryClustersElement extends PolymerElement { } /** - * Called when an event is received from a cluster that should be removed or + * Called with `event` received from a cluster that should be removed or * restructured due to all its visits or its top visit having been removed. * Contains the id of the Cluster in question. * @private */ - private onClusterChangedOrRemoved_() { + private onClusterChangedOrRemoved_(event: CustomEvent) { // Request up to as many of the freshest clusters as currently shown until // now. this.onBrowserIdle_().then(() => { diff --git a/chrome/browser/resources/memories/history_clusters.html b/chrome/browser/resources/memories/history_clusters.html new file mode 100644 index 0000000000000..24feb7ff486e3 --- /dev/null +++ b/chrome/browser/resources/memories/history_clusters.html @@ -0,0 +1,31 @@ + + + + + + $i18n{title} + + + + + + + + + + diff --git a/chrome/browser/resources/memories/history_clusters.ts b/chrome/browser/resources/memories/history_clusters.ts new file mode 100644 index 0000000000000..a42cf1521b280 --- /dev/null +++ b/chrome/browser/resources/memories/history_clusters.ts @@ -0,0 +1,5 @@ +// 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 './app.js'; diff --git a/chrome/browser/resources/history/history_clusters/page_favicon.html b/chrome/browser/resources/memories/page_favicon.html similarity index 100% rename from chrome/browser/resources/history/history_clusters/page_favicon.html rename to chrome/browser/resources/memories/page_favicon.html diff --git a/chrome/browser/resources/history/history_clusters/page_favicon.ts b/chrome/browser/resources/memories/page_favicon.ts similarity index 100% rename from chrome/browser/resources/history/history_clusters/page_favicon.ts rename to chrome/browser/resources/memories/page_favicon.ts diff --git a/chrome/browser/resources/memories/router.html b/chrome/browser/resources/memories/router.html new file mode 100644 index 0000000000000..7da98f67f7194 --- /dev/null +++ b/chrome/browser/resources/memories/router.html @@ -0,0 +1,3 @@ + + diff --git a/chrome/browser/resources/memories/router.ts b/chrome/browser/resources/memories/router.ts new file mode 100644 index 0000000000000..58cded40573bf --- /dev/null +++ b/chrome/browser/resources/memories/router.ts @@ -0,0 +1,81 @@ +// 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-location/iron-location.js'; +import 'chrome://resources/polymer/v3_0/iron-location/iron-query-params.js'; + +import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; + +/** + * @fileoverview This file provides a custom element that routes the query + * parameters of the page URL to the search query. + */ + +declare global { + interface HTMLElementTagNameMap { + 'clusters-router': ClustersRouterElement, + } +} + +class ClustersRouterElement extends PolymerElement { + static get is() { + return 'clusters-router'; + } + + static get template() { + return html`{__html_template__}`; + } + + static get properties() { + return { + /** + * The value of the query parameter with the name q. + */ + query: { + type: String, + notify: true, + observer: 'onQueryChanged_', + }, + + /** + * The parsed query parameters of the page URL ({foo: 'bar'}). + */ + queryParamsObject_: { + type: Object, + observer: 'onQueryParamsObjectChanged_', + }, + + /** + * The string query parameters of the page URL ('?foo=bar'), provided by + * and parsed by into + * `queryParamsObject_` and vice versa. Not to be modified directly. + */ + queryParamsString_: { + type: String, + }, + }; + } + + //============================================================================ + // Properties + //============================================================================ + + query: string = ''; + private queryParamsObject_: {q: string}|null = null; + private queryParamsString_: string = ''; + + //============================================================================ + // Helper methods + //============================================================================ + + private onQueryChanged_() { + this.queryParamsObject_ = this.query ? {q: this.query} : null; + } + + private onQueryParamsObjectChanged_() { + this.query = this.queryParamsObject_ ? this.queryParamsObject_.q : ''; + } +} + +customElements.define(ClustersRouterElement.is, ClustersRouterElement); diff --git a/chrome/browser/resources/history/history_clusters/search_query.html b/chrome/browser/resources/memories/search_query.html similarity index 100% rename from chrome/browser/resources/history/history_clusters/search_query.html rename to chrome/browser/resources/memories/search_query.html diff --git a/chrome/browser/resources/history/history_clusters/search_query.ts b/chrome/browser/resources/memories/search_query.ts similarity index 100% rename from chrome/browser/resources/history/history_clusters/search_query.ts rename to chrome/browser/resources/memories/search_query.ts diff --git a/chrome/browser/resources/history/history_clusters/shared_style.html b/chrome/browser/resources/memories/shared_style.html similarity index 100% rename from chrome/browser/resources/history/history_clusters/shared_style.html rename to chrome/browser/resources/memories/shared_style.html diff --git a/chrome/browser/resources/history/history_clusters/shared_style.ts b/chrome/browser/resources/memories/shared_style.ts similarity index 100% rename from chrome/browser/resources/history/history_clusters/shared_style.ts rename to chrome/browser/resources/memories/shared_style.ts diff --git a/chrome/browser/resources/history/history_clusters/shared_vars.html b/chrome/browser/resources/memories/shared_vars.html similarity index 100% rename from chrome/browser/resources/history/history_clusters/shared_vars.html rename to chrome/browser/resources/memories/shared_vars.html diff --git a/chrome/browser/resources/history/history_clusters/shared_vars.ts b/chrome/browser/resources/memories/shared_vars.ts similarity index 100% rename from chrome/browser/resources/history/history_clusters/shared_vars.ts rename to chrome/browser/resources/memories/shared_vars.ts diff --git a/chrome/browser/resources/history/history_clusters/top_visit.html b/chrome/browser/resources/memories/top_visit.html similarity index 95% rename from chrome/browser/resources/history/history_clusters/top_visit.html rename to chrome/browser/resources/memories/top_visit.html index 6ccfd047c02ab..111afb1e7607c 100644 --- a/chrome/browser/resources/history/history_clusters/top_visit.html +++ b/chrome/browser/resources/memories/top_visit.html @@ -91,17 +91,17 @@ transform: rotate(180deg); } - +