[M116][CSC] Add error page when navigation fails.

See linked buganizer bug for screenshots. (cherry picked from commit 22c8c76) Bug: 1449021, b/282855439 Change-Id: I63b1450773453313dd8221f8f300fa82dd9728f5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4656797 Reviewed-by: Tom Sepez <tsepez@chromium.org> Commit-Queue: Juan Mojica <juanmojica@google.com> Reviewed-by: Ali Stanfield <stanfield@google.com> Cr-Commit-Position: refs/branch-heads/5845@{#223} Cr-Branched-From: 5a5dff6-refs/heads/main@{#1160321}
chromium · Jun 29, 2023 · 81148e3 · 81148e3
1 parent 027a5b7
commit 81148e3
Show file tree

Hide file tree

Showing 11 changed files with 121 additions and 3 deletions.
diff --git a/chrome/browser/companion/core/mojom/companion.mojom b/chrome/browser/companion/core/mojom/companion.mojom
@@ -229,4 +229,8 @@ interface CompanionPage {
 
   // Pass back results from visual classifier for rendering.
   OnDeviceVisualClassificationResult(array<VisualSearchResult> results);
+
+  // Called when the companion page attempts a navigation that resulted in an
+  // error page.
+  OnNavigationError();
 };
diff --git a/chrome/browser/resources/side_panel/companion/BUILD.gn b/chrome/browser/resources/side_panel/companion/BUILD.gn
@@ -12,6 +12,8 @@ build_webui("build") {
   static_files = [
     "companion.html",
     "companion.css",
+    "generic-error-icon.png",
+    "generic-error-icon-dark.png",
   ]
   non_web_component_files = [
     "companion.ts",

diff --git a/chrome/browser/resources/side_panel/companion/companion.css b/chrome/browser/resources/side_panel/companion/companion.css
@@ -14,3 +14,54 @@
 #image-query-form {
   display: none;
 }
+
+#network-error-bottom-line {
+  color: #70757A;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  margin-top: 8px;
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+#network-error-icon {
+  height: 48px;
+  margin: 156px auto 0px;
+  width: 40px;
+}
+
+#network-error-top-line {
+  color: #202124;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  margin-top: 44px;
+  text-align: center;
+}
+
+#network-error-page {
+  background-color: white;
+  display: none;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+@media (prefers-color-scheme: dark) {
+  #network-error-bottom-line {
+    color: #9AA0A6;
+  }
+
+  #network-error-page {
+    background-color: #202124;
+  }
+
+  #network-error-top-line {
+    color: #E8EAED;
+  }
+}
diff --git a/chrome/browser/resources/side_panel/companion/companion.html b/chrome/browser/resources/side_panel/companion/companion.html
@@ -9,6 +9,23 @@
     <meta charset="utf-8">
   </head>
   <body>
+    <!-- Network error UI that is initially hidden -->
+    <div id="network-error-page">
+      <div id="network-error-icon">
+        <picture>
+          <source srcset="generic-error-icon-dark.png"
+                  media="(prefers-color-scheme: dark)">
+          <img src="generic-error-icon.png">
+        </picture>
+      </div>
+      <div id="network-error-top-line">
+        $i18n{network_error_page_top_line}
+      </div>
+      <div id="network-error-bottom-line">
+        $i18n{network_error_page_bottom_line}
+      </div>
+    </div>
+
     <form id="image-query-form" enctype="multipart/form-data"
       target="companion" method="POST">
       <input type="file" id="image-data" name="encoded_image" multiple>

diff --git a/chrome/browser/resources/side_panel/companion/companion.ts b/chrome/browser/resources/side_panel/companion/companion.ts
@@ -168,6 +168,17 @@ function initialize() {
         }
       });
 
+  companionProxy.callbackRouter.onNavigationError.addListener(() => {
+    const networkErrorOverlay = document.getElementById('network-error-page');
+    const frame = document.body.querySelector('iframe');
+    assert(frame);
+    assert(networkErrorOverlay);
+
+    // Hide the frame and show the network error overlay.
+    networkErrorOverlay.style.display = 'block';
+    frame.style.display = 'none';
+  });
+
   companionProxy.handler.showUI();
 }
 

diff --git a/chrome/browser/resources/side_panel/companion/generic-error-icon-dark.png b/chrome/browser/resources/side_panel/companion/generic-error-icon-dark.png
diff --git a/chrome/browser/resources/side_panel/companion/generic-error-icon.png b/chrome/browser/resources/side_panel/companion/generic-error-icon.png
diff --git a/chrome/browser/ui/webui/side_panel/companion/companion_page_handler.cc b/chrome/browser/ui/webui/side_panel/companion/companion_page_handler.cc
@@ -368,6 +368,10 @@ void CompanionPageHandler::OpenUrlInBrowser(
   signin_delegate_->OpenUrlInBrowser(url_to_open.value(), use_new_tab);
 }
 
+void CompanionPageHandler::OnNavigationError() {
+  page_->OnNavigationError();
+}
+
 Browser* CompanionPageHandler::GetBrowser() {
   auto* webui_contents = companion_untrusted_ui_->web_ui()->GetWebContents();
   auto* browser = companion::GetBrowserForWebContents(webui_contents);

diff --git a/chrome/browser/ui/webui/side_panel/companion/companion_page_handler.h b/chrome/browser/ui/webui/side_panel/companion/companion_page_handler.h
@@ -90,6 +90,10 @@ class CompanionPageHandler
   bool OnSearchTextQuery();
   void OnImageQuery(side_panel::mojom::ImageQuery image_query);
 
+  // Informs the page handler that the WebUI has detected a navigation that
+  // resulted in an error page.
+  void OnNavigationError();
+
  private:
   // Notifies the companion side panel about the URL of the main frame. Based on
   // the call site, either does a full reload of the side panel or does a

diff --git a/chrome/browser/ui/webui/side_panel/companion/companion_side_panel_untrusted_ui.cc b/chrome/browser/ui/webui/side_panel/companion/companion_side_panel_untrusted_ui.cc
@@ -10,6 +10,7 @@
 #include "chrome/browser/ui/side_panel/companion/companion_side_panel_controller_utils.h"
 #include "chrome/browser/ui/webui/side_panel/companion/companion_page_handler.h"
 #include "chrome/common/webui_url_constants.h"
+#include "chrome/grit/generated_resources.h"
 #include "chrome/grit/side_panel_companion_resources.h"
 #include "chrome/grit/side_panel_companion_resources_map.h"
 #include "content/public/browser/web_contents.h"
@@ -53,6 +54,15 @@ CompanionSidePanelUntrustedUI::CompanionSidePanelUntrustedUI(
       network::mojom::CSPDirectiveName::FormAction, formActionDirective);
   html_source->AddString("companion_origin", frameSrcString);
 
+  // Add localized companion strings.
+  html_source->AddLocalizedString(
+      "network_error_page_top_line",
+      IDS_SIDE_PANEL_COMPANION_ERROR_PAGE_FIRST_LINE);
+  html_source->AddLocalizedString(
+      "network_error_page_bottom_line",
+      IDS_SIDE_PANEL_COMPANION_ERROR_PAGE_SECOND_LINE);
+
+  Observe(web_ui->GetWebContents());
   web_ui->GetWebContents()->SetDelegate(this);
 }
 
@@ -81,6 +91,13 @@ void CompanionSidePanelUntrustedUI::RequestMediaAccessPermission(
       web_contents, request, std::move(callback), /*extension=*/nullptr);
 }
 
+void CompanionSidePanelUntrustedUI::DidFinishNavigation(
+    content::NavigationHandle* navigation_handle) {
+  if (navigation_handle->IsErrorPage() && companion_page_handler_) {
+    companion_page_handler_->OnNavigationError();
+  }
+}
+
 base::WeakPtr<CompanionSidePanelUntrustedUI>
 CompanionSidePanelUntrustedUI::GetWeakPtr() {
   return weak_factory_.GetWeakPtr();

diff --git a/chrome/browser/ui/webui/side_panel/companion/companion_side_panel_untrusted_ui.h b/chrome/browser/ui/webui/side_panel/companion/companion_side_panel_untrusted_ui.h
@@ -7,13 +7,16 @@
 
 #include "base/memory/weak_ptr.h"
 #include "chrome/browser/companion/core/mojom/companion.mojom.h"
+#include "chrome/browser/ui/webui/side_panel/companion/companion_page_handler.h"
 #include "content/public/browser/web_contents_delegate.h"
+#include "content/public/browser/web_contents_observer.h"
 #include "content/public/browser/webui_config.h"
 #include "content/public/common/url_constants.h"
 #include "ui/webui/untrusted_bubble_web_ui_controller.h"
 
 class CompanionSidePanelUntrustedUI
-    : public content::WebContentsDelegate,
+    : public content::WebContentsObserver,
+      public content::WebContentsDelegate,
       public ui::UntrustedBubbleWebUIController,
       public side_panel::mojom::CompanionPageHandlerFactory {
  public:
@@ -44,14 +47,19 @@ class CompanionSidePanelUntrustedUI
       mojo::PendingReceiver<side_panel::mojom::CompanionPageHandler> receiver,
       mojo::PendingRemote<side_panel::mojom::CompanionPage> page) override;
 
+  // content::WebContentsObserver:
+  // Listening to navigations because the primary document is the WebUI frame
+  // which is able to load without network access.
+  void DidFinishNavigation(
+      content::NavigationHandle* navigation_handle) override;
+
   // content::WebContentsDelegate:
   void RequestMediaAccessPermission(
       content::WebContents* web_contents,
       const content::MediaStreamRequest& request,
       content::MediaResponseCallback callback) override;
 
-  std::unique_ptr<side_panel::mojom::CompanionPageHandler>
-      companion_page_handler_;
+  std::unique_ptr<companion::CompanionPageHandler> companion_page_handler_;
   mojo::Receiver<side_panel::mojom::CompanionPageHandlerFactory>
       companion_page_factory_receiver_{this};