Custom html error page implementation (#2136)

Task/Issue URL: https://app.asana.com/0/72649045549333/1203487090719123/f
Tech Design URL: https://app.asana.com/0/481882893211075/1203487090719150/f
BSK PR: duckduckgo/BrowserServicesKit#644
Content-Scope-Scripts PR: duckduckgo/content-scope-scripts#906

Configuration/Tests/IntegrationTests.xcconfig

@@ -22,4 +22,6 @@ FEATURE_FLAGS = FEEDBACK NETWORK_PROTECTION DBP
 INFOPLIST_FILE = IntegrationTests/Info.plist
 PRODUCT_BUNDLE_IDENTIFIER = com.duckduckgo.Integration-Tests
 
+SWIFT_OBJC_BRIDGING_HEADER = $(SRCROOT)/IntegrationTests/Common/IntegrationTestsBridging.h
+
 TEST_HOST=$(BUILT_PRODUCTS_DIR)/DuckDuckGo.app/Contents/MacOS/DuckDuckGo

DuckDuckGo/Assets.xcassets/Images/Alert-Circle-Color-16.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "Alert-Medium-Multicolor-16.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

DuckDuckGo/Assets.xcassets/Images/Globe-Multicolor-16.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "Globe-Multicolor-16.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

DuckDuckGo/Bridging.h

@@ -6,6 +6,7 @@
 
 #import "WKWebView+Private.h"
 #import "NSException+Catch.h"
+#import "NSObject+performSelector.h"
 #import "WKGeolocationProvider.h"
 
 #ifndef APPSTORE

DuckDuckGo/Common/Extensions/NSObject+performSelector.h

@@ -0,0 +1,27 @@
+//
+//  NSObject+performSelector.h
+//
+//  Copyright © 2024 DuckDuckGo. All rights reserved.
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//  http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+
+#import <Foundation/Foundation.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface NSObject (performSelector)
+- (id)performSelector:(SEL)selector withArguments:(NSArray *)arguments;
+@end
+
+NS_ASSUME_NONNULL_END

DuckDuckGo/Common/Extensions/NSObject+performSelector.m

@@ -0,0 +1,52 @@
+//
+//  NSObject+performSelector.m
+//
+//  Copyright © 2024 DuckDuckGo. All rights reserved.
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//  http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+
+#import "NSObject+performSelector.h"
+
+@implementation NSObject (performSelector)
+
+- (id)performSelector:(SEL)selector withArguments:(NSArray *)arguments {
+    NSMethodSignature *methodSignature = [self methodSignatureForSelector:selector];
+
+    if (!methodSignature) {
+        [[[NSException alloc] initWithName:@"InvalidSelectorOrTarget" reason:[NSString stringWithFormat:@"Could not get method signature for selector %@ on %@", NSStringFromSelector(selector), self] userInfo:nil] raise];
+    }
+
+    NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:methodSignature];
+    [invocation setSelector:selector];
+    [invocation setTarget:self];
+
+    for (NSInteger i = 0; i < arguments.count; i++) {
+        id argument = arguments[i];
+        [invocation setArgument:&argument atIndex:i + 2]; // Indices 0 and 1 are reserved for target and selector
+    }
+
+    [invocation invoke];
+
+    if (methodSignature.methodReturnLength > 0) {
+        id returnValue;
+        [invocation getReturnValue:&returnValue];
+
+        return returnValue;
+    }
+
+    return nil;
+}
+
+
+@end

DuckDuckGo/Common/Extensions/StringExtension.swift

@@ -16,8 +16,9 @@
 //  limitations under the License.
 //
 
-import Foundation
 import BrowserServicesKit
+import Common
+import Foundation
 import UniformTypeIdentifiers
 
 extension String {
@@ -32,6 +33,42 @@ extension String {
         self.replacingOccurrences(of: "\\", with: "\\\\")
             .replacingOccurrences(of: "\"", with: "\\\"")
             .replacingOccurrences(of: "'", with: "\\'")
+            .replacingOccurrences(of: "\n", with: "\\n")
+    }
+
+    private static let unicodeHtmlCharactersMapping: [Character: String] = [
+        "&": "&",
+        "\"": """,
+        "'": "'",
+        "<": "&lt;",
+        ">": "&gt;",
+        "/": "&#x2F;",
+        "!": "&excl;",
+        "$": "&#36;",
+        "%": "&percnt;",
+        "=": "&#61;",
+        "#": "&#35;",
+        "@": "&#64;",
+        "[": "&#91;",
+        "\\": "&#92;",
+        "]": "&#93;",
+        "^": "&#94;",
+        "`": "&#97;",
+        "{": "&#123;",
+        "}": "&#125;",
+    ]
+    func escapedUnicodeHtmlString() -> String {
+        var result = ""
+
+        for character in self {
+            if let mapped = Self.unicodeHtmlCharactersMapping[character] {
+                result.append(mapped)
+            } else {
+                result.append(character)
+            }
+        }
+
+        return result
     }
 
     init(_ staticString: StaticString) {

DuckDuckGo/Common/Extensions/URLExtension.swift

@@ -130,6 +130,8 @@ extension URL {
     static let welcome = URL(string: "duck://welcome")!
     static let settings = URL(string: "duck://settings")!
     static let bookmarks = URL(string: "duck://bookmarks")!
+    // base url for Error Page Alternate HTML loaded into Web View
+    static let error = URL(string: "duck://error")!
 
     static let dataBrokerProtection = URL(string: "duck://dbp")!
 

DuckDuckGo/Common/Extensions/WKBackForwardListItemExtension.swift

@@ -0,0 +1,35 @@
+//
+//  WKBackForwardListItemExtension.swift
+//
+//  Copyright © 2024 DuckDuckGo. All rights reserved.
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//  http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+
+import Foundation
+import WebKit
+
+extension WKBackForwardListItem {
+
+    // sometimes WKBackForwardListItem returns wrong or outdated title
+    private static let tabTitleKey = UnsafeRawPointer(bitPattern: "tabTitleKey".hashValue)!
+    var tabTitle: String? {
+        get {
+            objc_getAssociatedObject(self, Self.tabTitleKey) as? String
+        }
+        set {
+            objc_setAssociatedObject(self, Self.tabTitleKey, newValue, .OBJC_ASSOCIATION_RETAIN)
+        }
+    }
+
+}

DuckDuckGo/Common/Extensions/WKWebViewExtension.swift

@@ -16,6 +16,7 @@
 //  limitations under the License.
 //
 
+import Common
 import Navigation
 import WebKit
 
@@ -231,6 +232,21 @@ extension WKWebView {
         self.evaluateJavaScript("window.open(\(urlEnc), '_blank', 'noopener, noreferrer')")
     }
 
+    func loadAlternateHTML(_ html: String, baseURL: URL, forUnreachableURL failingURL: URL) {
+        guard responds(to: Selector.loadAlternateHTMLString) else {
+            if #available(macOS 12.0, *) {
+                os_log(.error, log: .navigation, "WKWebView._loadAlternateHTMLString not available")
+                loadSimulatedRequest(URLRequest(url: failingURL), responseHTML: html)
+            }
+            return
+        }
+        self.perform(Selector.loadAlternateHTMLString, withArguments: [html, baseURL, failingURL])
+    }
+
+    func setDocumentHtml(_ html: String) {
+        self.evaluateJavaScript("document.open(); document.write('\(html.escapedJavaScriptString())'); document.close()", in: nil, in: .defaultClient)
+    }
+
     @MainActor
     var mimeType: String? {
         get async {
@@ -285,6 +301,7 @@ extension WKWebView {
     enum Selector {
         static let fullScreenPlaceholderView = NSSelectorFromString("_fullScreenPlaceholderView")
         static let printOperationWithPrintInfoForFrame = NSSelectorFromString("_printOperationWithPrintInfo:forFrame:")
+        static let loadAlternateHTMLString = NSSelectorFromString("_loadAlternateHTMLString:baseURL:forUnreachableURL:")
     }
 
 }

DuckDuckGo/Common/Localizables/UserText.swift

@@ -17,6 +17,7 @@
 //
 
 import Foundation
+import Navigation
 
 struct UserText {
 
@@ -212,12 +213,15 @@ struct UserText {
     static let tabPreferencesTitle = NSLocalizedString("tab.preferences.title", value: "Settings", comment: "Tab preferences title")
     static let tabBookmarksTitle = NSLocalizedString("tab.bookmarks.title", value: "Bookmarks", comment: "Tab bookmarks title")
     static let tabOnboardingTitle = NSLocalizedString("tab.onboarding.title", value: "Welcome", comment: "Tab onboarding title")
-    static let tabErrorTitle = NSLocalizedString("tab.error.title", value: "Oops!", comment: "Tab error title")
+    static let tabErrorTitle = NSLocalizedString("tab.error.title", value: "Failed to open page", comment: "Tab error title")
+    static let errorPageHeader = NSLocalizedString("page.error.header", value: "DuckDuckGo can’t load this page.", comment: "Error page heading text")
+    static let webProcessCrashPageHeader = NSLocalizedString("page.crash.header", value: "This webpage has crashed.", comment: "Error page heading text shown when a Web Page process had crashed")
+    static let webProcessCrashPageMessage = NSLocalizedString("page.crash.message", value: "Try reloading the page or come back later.", comment: "Error page message text shown when a Web Page process had crashed")
+
     static let openSystemPreferences = NSLocalizedString("open.preferences", value: "Open System Preferences", comment: "Open System Preferences (to re-enable permission for the App) (up to and including macOS 12")
     static let openSystemSettings = NSLocalizedString("open.settings", value: "Open System Settings…", comment: "")
     static let checkForUpdate = NSLocalizedString("check.for.update", value: "Check for Update", comment: "Button users can use to check for a new update")
 
-    static let unknownErrorMessage = NSLocalizedString("error.unknown", value: "An unknown error has occurred", comment: "Error page subtitle")
     static let unknownErrorTryAgainMessage = NSLocalizedString("error.unknown.try.again", value: "An unknown error has occurred", comment: "Generic error message on a dialog for when the cause is not known.")
 
     static let moveTabToNewWindow = NSLocalizedString("options.menu.move.tab.to.new.window",

DuckDuckGo/Common/View/AppKit/ColorView.swift

@@ -29,6 +29,7 @@ internal class ColorView: NSView {
     init(frame: NSRect, backgroundColor: NSColor? = nil, cornerRadius: CGFloat = 0, borderColor: NSColor? = nil, borderWidth: CGFloat = 0, interceptClickEvents: Bool = false) {
         super.init(frame: frame)
 
+        self.translatesAutoresizingMaskIntoConstraints = false
         self.backgroundColor = backgroundColor
         self.cornerRadius = cornerRadius
         self.borderColor = borderColor

DuckDuckGo/DataExport/BookmarksExporter.swift

@@ -34,7 +34,7 @@ struct BookmarksExporter {
         for entity in entities {
             if let bookmark = entity as? Bookmark {
                 content.append(Template.bookmark(level: level,
-                                                 title: bookmark.title.escapedForHTML,
+                                                 title: bookmark.title.escapedUnicodeHtmlString(),
                                                  url: bookmark.url,
                                                  isFavorite: bookmark.isFavorite))
             }
@@ -100,12 +100,6 @@ extension BookmarksExporter {
 
 fileprivate extension String {
 
-    var escapedForHTML: String {
-        self.replacingOccurrences(of: "&", with: "&")
-            .replacingOccurrences(of: "<", with: "&lt;")
-            .replacingOccurrences(of: ">", with: "&gt;")
-    }
-
     static func indent(by level: Int) -> String {
         return String(repeating: "\t", count: level)
     }

DuckDuckGo/ErrorPage/ErrorPageHTMLTemplate.swift

@@ -0,0 +1,45 @@
+//
+//  ErrorPageHTMLTemplate.swift
+//
+//  Copyright © 2024 DuckDuckGo. All rights reserved.
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//  http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+
+import Foundation
+import ContentScopeScripts
+import WebKit
+
+struct ErrorPageHTMLTemplate {
+
+    static var htmlTemplatePath: String {
+        guard let file = ContentScopeScripts.Bundle.path(forResource: "index", ofType: "html", inDirectory: "pages/errorpage") else {
+            assertionFailure("HTML template not found")
+            return ""
+        }
+        return file
+    }
+
+    let error: WKError
+    let header: String
+
+    func makeHTMLFromTemplate() -> String {
+        guard let html = try? String(contentsOfFile: Self.htmlTemplatePath) else {
+            assertionFailure("Should be able to load template")
+            return ""
+        }
+        return html.replacingOccurrences(of: "$ERROR_DESCRIPTION$", with: error.localizedDescription.escapedUnicodeHtmlString(), options: .literal)
+            .replacingOccurrences(of: "$HEADER$", with: header.escapedUnicodeHtmlString(), options: .literal)
+    }
+
+}