1 files changed, 85 insertions, 0 deletions
diff --git a/devtools/client/shared/components/AppErrorBoundary.css b/devtools/client/shared/components/AppErrorBoundary.css
new file mode 100644
index 0000000000..4ff5964f6a
--- /dev/null
+++ b/devtools/client/shared/components/AppErrorBoundary.css
@@ -0,0 +1,85 @@
+/* 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/. */
+
+/* Base styles (common to most error boundaries) */
+
+
+/* Container */
+.app-error-panel {
+  color: var(--theme-text-color-strong);
+  display: flex;
+  flex-direction: column;
+  font-family: inherit;
+  margin: 0 0 2rem;
+  overflow-y: scroll;
+  padding: 1rem 3rem;
+  width: 100%;
+  height: 100%;
+}
+
+/* "Has crashed" header */
+.app-error-panel .error-panel-header {
+  align-self: center;
+  font-size: 22px;
+  font-weight: 300;
+}
+
+/* "File a Bug" button */
+.app-error-panel .error-panel-file-button {
+  align-self: center;
+  background-color: var(--blue-60);
+  outline: none;
+  color: white;
+  font-size: 15px;
+  font-weight: 400;
+  margin-bottom: 14.74px;
+  padding: 0.75rem;
+  text-align: center;
+  inline-size: 200px;
+  text-decoration: none;
+}
+
+.app-error-panel .error-panel-file-button:hover {
+  background-color: var(--blue-70);
+}
+
+.app-error-panel .error-panel-file-button:hover:active {
+  background-color: var(--blue-80);
+}
+
+/* Text of the error itself, not the stack trace */
+.app-error-panel .error-panel-error {
+  background-color: var(--theme-body-emphasized-background);
+  border: 1px solid var(--theme-toolbar-separator);
+  border-block-end: 0;
+  font-size: 17px;
+  font-weight: 500;
+  margin: 0;
+  padding: 2rem;
+}
+
+/* Stack trace; composed of <p> elements */
+.app-error-panel .stack-trace-section {
+  background-color: var(--theme-body-emphasized-background);
+  border: 1px solid var(--theme-toolbar-separator);
+  padding: 2rem;
+  margin-bottom: 1rem;
+}
+
+.app-error-panel .stack-trace-section p {
+  color: var(--theme-stack-trace-text);
+  margin: 0;
+  margin-inline-start: 1rem;
+}
+
+.app-error-panel .stack-trace-section p:first-child {
+  margin: 0;
+}
+
+/* Instructions to reopen the toolbox */
+.app-error-panel .error-panel-reload-info {
+  font-size: 15px;
+  font-weight: 400;
+  margin: 2rem 0 1rem;
+}