Use a tooast widget for success and error reports

package.json

@@ -33,6 +33,7 @@
     "react-dom": "^18.2.0",
     "react-dom-factories": "^1.0.2",
     "react-inspector": "^6.0.1",
+    "react-toastify": "^9.1.3",
     "styled-components": "^5.3.6"
   },
   "devDependencies": {
@@ -46,4 +47,4 @@
     "webpack": "^5.75.0",
     "webpack-cli": "^4.10.0"
   }
-}
+}

src/AboutSyncRecordEditor.jsx

@@ -3,6 +3,7 @@ const React = require("react");
 const PropTypes = require("prop-types");
 const { ErrorDisplay } = require("./common");
 const { Utils } = ChromeUtils.importESModule("resource://services-sync/util.sys.mjs");
+const { toast, toast_error } = require("./common");
 
 function shortenText(x, maxLen) {
   return x.length >= maxLen ? x.slice(0, maxLen - 1) + "…" : x;
@@ -75,7 +76,7 @@ class AboutSyncRecordEditor extends React.Component {
     try {
       await inner();
     } catch (e) {
-      console.error("Uncaught error: ", e);
+      toast_error("Uncaught error", e);
       this.setState({ error: "Unexpected error: " + e })
     } finally {
       this.setState({ requesting: false });
@@ -95,7 +96,7 @@ class AboutSyncRecordEditor extends React.Component {
     try {
       resp = await request();
     } catch (e) {
-      console.error("Error: ", e);
+      toast_error("Network Error", e);
       this.setState({ error: "Network error: " + e });
       return false;
     }
@@ -141,6 +142,7 @@ class AboutSyncRecordEditor extends React.Component {
       return;
     }
     console.log("Deleted id", toDelete);
+    toast("Deleted the record");
 
     let index = this.props.records.findIndex(r => r.id == toDelete);
     if (index >= 0) {
@@ -175,6 +177,7 @@ class AboutSyncRecordEditor extends React.Component {
       // Already updated error state.
       return;
     }
+    toast("Updated the record");
 
     // Update current record or add a new one.
     let recordIndex = this.props.records.findIndex(r => r.id == id);

src/EngineActions.jsx

@@ -1,5 +1,6 @@
 "use strict";
 const React = require("react");
+const { toast, toast_error } = require('./common');
 const PropTypes = require("prop-types");
 
 class EngineActions extends React.Component {
@@ -19,19 +20,19 @@ class EngineActions extends React.Component {
     let e = this.props.engine;
     e._log.info("about:sync resetting engine due to user request");
     e.resetClient().then(() => {
-      alert("Reset complete");
+      toast("Reset complete");
     }).catch(err => {
-      console.error("Failed to reset the engine", err);
+      toast_error("Failed to reset the engine", err);
     });
   }
 
   wipe(event) {
     let e = this.props.engine;
     e._log.info("about:sync wiping engine due to user request");
     e.wipeServer().then(() => {
-      alert("Wipe complete");
+      toast("Wipe complete");
     }).catch(err => {
-      console.error("Failed to wipe the engine", err);
+      toast_error("Failed to wipe the engine", err);
     });
   }
 

src/common.jsx

@@ -4,6 +4,7 @@
 const React = require("react");
 const ReactInspector = require("react-inspector");
 const PropTypes = require("prop-types");
+const { toast } = require('react-toastify');
 
 // A placeholder for when we are still fetching data.
 function Fetching({label}) {
@@ -169,6 +170,13 @@ async function arrayCloneWithoutJank(arr) {
   return result;
 }
 
+function toast_error(msg, err) {
+  console.log(msg, err);
+  let full = `${msg}: ${err}`;
+  let display = <div><p>{full}</p><p>(See the console for more details)</p></div>;
+  toast.error(display);
+}
+
 module.exports = {
   Fetching,
   InternalAnchor,
@@ -177,4 +185,6 @@ module.exports = {
   jankYielder,
   arrayCloneWithoutJank,
   valueLookupTable,
+  toast,
+  toast_error,
 };

src/config.jsx

@@ -2,7 +2,7 @@
 // offered by this addon.
 
 const React = require("react");
-const { Fetching, InternalAnchor } = require("./common");
+const { Fetching, InternalAnchor, toast, toast_error } = require("./common");
 
 const { Log } = ChromeUtils.importESModule("resource://gre/modules/Log.sys.mjs");
 const { Preferences } = ChromeUtils.importESModule("resource://gre/modules/Preferences.sys.mjs");
@@ -302,7 +302,7 @@ class LogFilesComponent extends React.Component {
         await puts(outLines.join("\n"));
       }
     } catch (err) {
-      console.error("Error combining logs: ", err);
+      toast_error("Error combining logs", err);
     }
     this.setState({
       downloadingCombined: {
@@ -319,7 +319,7 @@ class LogFilesComponent extends React.Component {
       let filename = await this._makeCombined();
       await this.downloadFile(PathUtils.toFileURI(filename), "aboutsync-combined-log.txt");
     } catch (e) {
-      console.error("Failed to download combined", e);
+      toast_error("Failed to download combined", e);
     }
     this.setState({
       downloadingCombined: null
@@ -338,7 +338,7 @@ class LogFilesComponent extends React.Component {
       // Now "download" it
       await this.downloadFile(Services.io.newFileURI(zipFile), "aboutsync-combined-log.zip");
     } catch(err) {
-      console.error("Failed to download zipfile", err);
+      toast_error("Failed to download zipfile", err);
     }
     this.setState({
       downloadingCombined: null
@@ -348,21 +348,23 @@ class LogFilesComponent extends React.Component {
   flushLog(event) {
     let eh = Weave.Service.errorHandler;
     eh._log.info("about:sync flushing log file due to user request");
-    eh.resetFileLog().catch(err => {
-      console.error("Failed to flush the log", err);
-    }).then(() => {
+    eh.resetFileLog().then(() => {
+      toast("Flushed a new log file");
       this.reload();
+    }).catch(err => {
+      toast_error("Failed to flush the log", err);
     });
   }
 
   removeAllLogs(event) {
     const { logManager } = ChromeUtils.importESModule("resource://gre/modules/FxAccountsCommon.sys.mjs");
-    logManager.removeAllLogs().catch(err => {
-      console.error("Failed to flush the log", err);
-    }).then(() => {
+    logManager.removeAllLogs().then(() => {
       let eh = Weave.Service.errorHandler;
       eh._log.info("about:sync removed all logs due to user request");
+      toast("Removed all logs");
       this.reload();
+    }).catch(err => {
+      toast_error("Failed to flush the log", err);
     });
   }
 
@@ -371,6 +373,7 @@ class LogFilesComponent extends React.Component {
     if (text) {
       let eh = Weave.Service.errorHandler;
       eh._log.info(`about:sync custom log entry: ${text}`);
+      toast("Wrote the log entry");
     }
   }
 
@@ -395,7 +398,7 @@ class LogFilesComponent extends React.Component {
         result.numErrors += fileName.startsWith("error-") ? 1 : 0;
       });
     } catch(err) {
-      console.error("Failed to fetch the logfiles", err);
+      toast_error("Failed to fetch the logfiles", err);
     }
     // Update the state
     this.setState({ logFiles: result });

src/main.jsx

@@ -1,6 +1,8 @@
 const React = require("react");
 import { createRoot } from "react-dom/client";
 import AccountInfo from "./AccountInfo";
+const { ToastContainer } = require('react-toastify');
+import 'react-toastify/dist/ReactToastify.css';
 const { ConfigComponent } = require("./config");
 const { ProviderState, ProviderInfo } = require("./provider");
 const { CollectionsViewer } = require("./CollectionsViewer");
@@ -136,6 +138,10 @@ class AboutSyncComponent extends React.Component {
                           updateProvider={() => this.refreshProvider()}/>
           </div>
         )}
+        <ToastContainer
+          position="top-right"
+          autoClose={5000}
+        />
       </div>
     );
   }

src/provider.jsx

@@ -7,6 +7,7 @@ const { Weave } = ChromeUtils.importESModule("resource://services-sync/main.sys.
 
 const { CryptoWrapper, Collection } = ChromeUtils.importESModule("resource://services-sync/record.sys.mjs");
 const { PlacesUtils } = ChromeUtils.importESModule("resource://gre/modules/PlacesUtils.sys.mjs");
+const { toast, toast_error } = require("./common");
 
 const React = require("react");
 
@@ -385,10 +386,9 @@ class ProviderInfo extends React.Component {
         if (result == nsIFilePicker.returnOK || result == nsIFilePicker.returnReplace) {
           let filename = fp.file.QueryInterface(Ci.nsIFile).path;
           this.props.provider.promiseExport(filename, this.state.anonymize).then(() => {
-            alert("File created");
+            toast("File created");
           }).catch(err => {
-            console.error("Failed to create file", err);
-            alert("Failed to create file: " + err);
+            toast_error("Failed to create file", err);
           });
         }
       }