Introduce sidebar bookmarks page

app/theme/brave_theme_resources.grd

@@ -21,6 +21,10 @@
       <structure type="chrome_scaled_image" name="IDR_BRAVE_BOOKMARK_FOLDER_CLOSED_LIN_LIGHT" file="common/brave_bookmark_folder_closed-lin-light.png" />
       <structure type="chrome_scaled_image" name="IDR_BRAVE_BOOKMARK_FOLDER_CLOSED_WIN_DARK" file="common/brave_bookmark_folder_closed-win-dark.png" />
       <structure type="chrome_scaled_image" name="IDR_BRAVE_BOOKMARK_FOLDER_CLOSED_WIN_LIGHT" file="common/brave_bookmark_folder_closed-win-light.png" />
+      <structure type="chrome_scaled_image" name="IDR_BRAVE_BOOKMARK_FOLDER_OPEN_LIN_DARK" file="common/brave_bookmark_folder_open-lin-dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_BRAVE_BOOKMARK_FOLDER_OPEN_LIN_LIGHT" file="common/brave_bookmark_folder_open-lin-light.png" />
+      <structure type="chrome_scaled_image" name="IDR_BRAVE_BOOKMARK_FOLDER_OPEN_WIN_DARK" file="common/brave_bookmark_folder_open-win-dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_BRAVE_BOOKMARK_FOLDER_OPEN_WIN_LIGHT" file="common/brave_bookmark_folder_open-win-light.png" />
       <structure type="chrome_scaled_image" name="IDR_BRAVE_WAYBACK_INFOBAR" file="brave/brave_wayback_infobar.png" />
       <structure type="chrome_scaled_image" name="IDR_BRAVE_WAYBACK_INFOBAR_DARK" file="brave/brave_wayback_infobar_dark.png" />
       <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_32_BETA" file="brave/product_logo_32_beta.png" />

brave_paks.gni

@@ -3,6 +3,7 @@
 # You can obtain one at http://mozilla.org/MPL/2.0/.
 
 import("//brave/components/brave_webtorrent/browser/buildflags/buildflags.gni")
+import("//brave/components/sidebar/buildflags/buildflags.gni")
 import("//brave/components/tor/buildflags/buildflags.gni")
 import("//build/config/locales.gni")
 import("//chrome/common/features.gni")
@@ -83,6 +84,13 @@ template("brave_extra_paks") {
       ]
     }
 
+    if (enable_sidebar) {
+      sources += [
+        "$root_gen_dir/brave/browser/resources/sidebar/sidebar_resources.pak",
+      ]
+      deps += [ "//brave/browser/resources/sidebar:resources" ]
+    }
+
     if (enable_tor) {
       sources +=
           [ "$root_gen_dir/brave/components/tor/resources/tor_resources.pak" ]

browser/brave_content_browser_client.cc

@@ -61,6 +61,7 @@
 #include "brave/components/ftx/browser/buildflags/buildflags.h"
 #include "brave/components/gemini/browser/buildflags/buildflags.h"
 #include "brave/components/ipfs/buildflags/buildflags.h"
+#include "brave/components/sidebar/buildflags/buildflags.h"
 #include "brave/components/skus/common/skus_sdk.mojom.h"
 #include "brave/components/speedreader/buildflags.h"
 #include "brave/components/speedreader/speedreader_util.h"
@@ -176,6 +177,12 @@ using extensions::ChromeContentBrowserClientExtensionsPart;
 #include "brave/browser/ethereum_remote_client/ethereum_remote_client_service_factory.h"
 #endif
 
+#if BUILDFLAG(ENABLE_SIDEBAR)
+#include "brave/browser/ui/webui/sidebar/sidebar.mojom.h"
+#include "brave/browser/ui/webui/sidebar/sidebar_bookmarks_ui.h"
+#include "brave/components/sidebar/features.h"
+#endif
+
 #if !defined(OS_ANDROID)
 #include "brave/browser/new_tab/new_tab_shows_navigation_throttle.h"
 #include "brave/browser/ui/webui/brave_shields/shields_panel_ui.h"
@@ -493,6 +500,13 @@ void BraveContentBrowserClient::RegisterBrowserInterfaceBindersForFrame(
   }
 #endif
 
+#if BUILDFLAG(ENABLE_SIDEBAR)
+  if (base::FeatureList::IsEnabled(sidebar::kSidebarFeature)) {
+    chrome::internal::RegisterWebUIControllerInterfaceBinder<
+        sidebar::mojom::BookmarksPageHandlerFactory, SidebarBookmarksUI>(map);
+  }
+#endif
+
 // Brave News
 #if !defined(OS_ANDROID)
   if (base::FeatureList::IsEnabled(brave_today::features::kBraveNewsFeature)) {

browser/resources/resource_ids

@@ -1,4 +1,4 @@
-# Resource ids starting at 31000 are reserved for projects built on Chromium.
+# Resource ids starting at 38000 are reserved for projects built on Chromium.
 {
   "SRCDIR": "../../..",
   "brave/common/extensions/api/brave_api_resources.grd": {
@@ -127,4 +127,7 @@
   "<(ROOT_GEN_DIR)/brave/web-ui-trezor_bridge/trezor_bridge.grd": {
     "includes": [51250]
   },
+  "<(SHARED_INTERMEDIATE_DIR)/brave/browser/resources/sidebar/sidebar_resources.grd": {
+    "includes": [51500]
+  },
 }

browser/resources/sidebar/BUILD.gn

@@ -0,0 +1,34 @@
+# Copyright (c) 2022 The Brave Authors. All rights reserved.
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this file,
+# You can obtain one at http://mozilla.org/MPL/2.0/.
+
+import("//chrome/common/features.gni")
+import("//tools/grit/grit_rule.gni")
+import("//ui/webui/resources/tools/generate_grd.gni")
+
+grit("resources") {
+  defines = chrome_grit_defines
+  defines +=
+      [ "SHARED_INTERMEDIATE_DIR=" + rebase_path(root_gen_dir, root_build_dir) ]
+
+  enable_input_discovery_for_gn_analyze = false
+  source = "$target_gen_dir/sidebar_resources.grd"
+  deps = [ ":build_grd" ]
+
+  outputs = [
+    "grit/sidebar_resources.h",
+    "grit/sidebar_resources_map.cc",
+    "grit/sidebar_resources_map.h",
+    "sidebar_resources.pak",
+  ]
+  output_dir = "$root_gen_dir/brave/browser/resources/sidebar"
+  resource_ids = "//brave/browser/resources/resource_ids"
+}
+
+generate_grd("build_grd") {
+  grdp_files = [ "$target_gen_dir/bookmarks/resources.grdp" ]
+  deps = [ "bookmarks:build_grdp" ]
+  grd_prefix = "sidebar"
+  out_grd = "$target_gen_dir/${grd_prefix}_resources.grd"
+}

browser/resources/sidebar/bookmarks/BUILD.gn

@@ -0,0 +1,85 @@
+# Copyright (c) 2022 The Brave Authors. All rights reserved.
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this file,
+# You can obtain one at http://mozilla.org/MPL/2.0/.
+
+import("//tools/grit/preprocess_if_expr.gni")
+import("//tools/polymer/html_to_js.gni")
+import("//tools/typescript/ts_library.gni")
+import("//ui/webui/resources/tools/generate_grd.gni")
+
+preprocess_folder =
+    "$root_gen_dir/brave/browser/resources/sidebar/bookmarks/preprocessed"
+
+generate_grd("build_grdp") {
+  grd_prefix = "sidebar_bookmarks"
+  out_grd = "$target_gen_dir/resources.grdp"
+  deps = [ ":build_ts" ]
+  manifest_files = [
+    "$root_gen_dir/brave/browser/resources/sidebar/bookmarks/tsconfig.manifest",
+  ]
+  input_files = [ "bookmarks.html" ]
+  input_files_base_dir = rebase_path(".", "//")
+}
+
+preprocess_if_expr("preprocess") {
+  in_folder = "./"
+  out_folder = preprocess_folder
+  in_files = [
+    "bookmarks_api_proxy.ts",
+    "bookmarks_drag_manager.ts",
+  ]
+}
+
+preprocess_if_expr("preprocess_generated") {
+  deps = [ ":web_components" ]
+  in_folder = target_gen_dir
+  out_folder = preprocess_folder
+  in_files = [
+    "bookmark_folder.ts",
+    "bookmarks_list.ts",
+  ]
+}
+
+preprocess_if_expr("preprocess_mojo") {
+  deps = [ "//brave/browser/ui/webui/sidebar:mojo_bindings_webui_js" ]
+  in_folder = "$root_gen_dir/mojom-webui/brave/browser/ui/webui/sidebar/"
+  out_folder = preprocess_folder
+  out_manifest = "$target_gen_dir/preprocessed_mojo_manifest.json"
+  in_files = [ "sidebar.mojom-webui.js" ]
+}
+
+html_to_js("web_components") {
+  js_files = [
+    "bookmark_folder.ts",
+    "bookmarks_list.ts",
+  ]
+}
+
+ts_library("build_ts") {
+  tsconfig_base = "tsconfig_base.json"
+  root_dir = "$target_gen_dir/preprocessed"
+  out_dir = "$target_gen_dir/tsc"
+  in_files = [
+    "bookmark_folder.ts",
+    "bookmarks_list.ts",
+    "bookmarks_api_proxy.ts",
+    "bookmarks_drag_manager.ts",
+    "sidebar.mojom-webui.js",
+  ]
+  definitions = [
+    "//tools/typescript/definitions/bookmark_manager_private.d.ts",
+    "//tools/typescript/definitions/bookmarks.d.ts",
+    "//tools/typescript/definitions/chrome_event.d.ts",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0:library",
+    "//ui/webui/resources:library",
+    "//ui/webui/resources/mojo:library",
+  ]
+  extra_deps = [
+    ":preprocess",
+    ":preprocess_generated",
+    ":preprocess_mojo",
+  ]
+}