Merge 9d00a57936 into 62d776844c

renderer/src/styles/index.css

@@ -47,6 +47,7 @@
 .bd-divider {
     width: 100%;
     height: 1px;
+    margin: 0;
+    border: none;
     border-top: thin solid var(--background-modifier-accent);
-    margin-bottom: 1em;
 }

renderer/src/styles/ui/errormodal.css

@@ -1,3 +1,8 @@
+.bd-error-modal-header {
+    flex-direction: column;
+    align-items: flex-start;
+}
+
 .bd-addon-errors {
     margin-top: 16px;
 }
@@ -22,8 +27,14 @@
 .bd-addon-error-header {
     display: flex;
     align-items: center;
+    border-radius: 5px;
     padding: 20px 16px;
     cursor: pointer;
+    outline: none;
+}
+
+.bd-addon-error-header:focus-visible {
+    box-shadow: 0 0 0 4px var(--focus-primary);
 }
 
 .bd-addon-error-icon {
@@ -45,19 +56,20 @@
 }
 
 .bd-addon-error-expander {
+    transform: rotate(-90deg);
     color: var(--interactive-normal);
     transition: transform 0.2s ease;
 }
 
+.bd-addon-error[open] .bd-addon-error-expander {
+    transform: none;
+}
+
 .bd-addon-error-expander,
 .bd-addon-error-icon {
     flex: 0 0 auto;
 }
 
-.bd-addon-error.collapsed .bd-addon-error-expander {
-    transform: rotate(90deg);
-}
-
 .bd-addon-error-header-inner {
     display: flex;
     flex-direction: column;
@@ -68,6 +80,10 @@
     padding: 0 16px 24px;
 }
 
+.bd-addon-error-body .bd-divider {
+    margin-bottom: 24px;
+}
+
 .bd-addon-error-stack code {
     user-select: text;
     font-size: 0.875rem;

renderer/src/ui/addonerrormodal.jsx

@@ -1,26 +1,18 @@
-import {React, Strings, WebpackModules, DiscordClasses} from "modules";
+import {React, Strings, DiscordClasses, WebpackModules} from "modules";
 import Extension from "./icons/extension";
 import ThemeIcon from "./icons/theme";
 import Divider from "./divider";
 
+const {ModalHeader, ModalContent} = WebpackModules.getByProps("ModalRoot");
 const Parser = Object(WebpackModules.getByProps("defaultRules", "parse")).defaultRules;
 
 const joinClassNames = (...classNames) => classNames.filter(e => e).join(" ");
 
 class AddonError extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            expanded: false
-        };
-    }
-    toggle() {
-        this.setState({expanded: !this.state.expanded});
-    }
     renderErrorBody(err) {
         const stack = err?.error?.stack ?? err.stack;
-        if (!this.state.expanded || !stack) return null;
+        if (!stack) return null;
+        
         return <div className="bd-addon-error-body">
             <Divider />
             <div className="bd-addon-error-stack">
@@ -28,28 +20,34 @@ class AddonError extends React.Component {
             </div>
         </div>;
     }
+
     render() {
-        const err = this.props.err;
-        return <div key={`${err.type}-${this.props.index}`} className={joinClassNames("bd-addon-error", (this.state.expanded) ? "expanded" : "collapsed")}>
-            <div className="bd-addon-error-header" onClick={() => {this.toggle();}} >
+        const {err} = this.props;
+
+        return <details key={`${err.type}-${this.props.index}`} className="bd-addon-error">
+            <summary className="bd-addon-error-header">
                 <div className="bd-addon-error-icon">
                     {err.type == "plugin" ? <Extension /> : <ThemeIcon />}
                 </div>
                 <div className="bd-addon-error-header-inner">
-                    <h3 className={`bd-addon-error-file ${DiscordClasses.Text.colorHeaderPrimary} ${DiscordClasses.Integrations.secondaryHeader} ${DiscordClasses.Text.size16}`}>{err.name}</h3>
+                    <h3 className={`bd-addon-error-file ${DiscordClasses.Text.colorHeaderPrimary} ${DiscordClasses.Integrations.secondaryHeader} ${DiscordClasses.Text.size16}`}>
+                        {err.name}
+                    </h3>
                     <div className={`bd-addon-error-details ${DiscordClasses.Integrations.detailsWrapper}`}>
                         <svg className={DiscordClasses.Integrations.detailsIcon} aria-hidden="false" width="16" height="16" viewBox="0 0 12 12">
                             <path fill="currentColor" d="M6 1C3.243 1 1 3.244 1 6c0 2.758 2.243 5 5 5s5-2.242 5-5c0-2.756-2.243-5-5-5zm0 2.376a.625.625 0 110 1.25.625.625 0 010-1.25zM7.5 8.5h-3v-1h1V6H5V5h1a.5.5 0 01.5.5v2h1v1z"></path>
                         </svg>
-                        <div className={`${DiscordClasses.Text.colorHeaderSecondary} ${DiscordClasses.Text.size12}`}>{err.message}</div>
+                        <div className={`${DiscordClasses.Text.colorHeaderSecondary} ${DiscordClasses.Text.size12}`}>
+                            {err.message}
+                        </div>
                     </div>
                 </div>
                 <svg className="bd-addon-error-expander" width="24" height="24" viewBox="0 0 24 24">
                     <path fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M7 10L12 15 17 10" aria-hidden="true"></path>
                 </svg>
-            </div>
+            </summary>
             {this.renderErrorBody(err)}
-        </div>;
+        </details>;
     }
 }
 
@@ -102,18 +100,28 @@ export default class AddonErrorModal extends React.Component {
     render() {
         const selectedTab = this.getTabs().find(e => this.state.selectedTab === e.id);
         const tabs = this.getTabs();
+        
         return <>
-            <div className={`bd-error-modal-header ${DiscordClasses.Modal.header} ${DiscordClasses.Modal.separator}`}>
-                <h4 className={`${DiscordClasses.Titles.defaultColor} ${DiscordClasses.Text.size14} ${DiscordClasses.Titles.h4} ${DiscordClasses.Margins.marginBottom8}`}>{Strings.Modals.addonErrors}</h4>
+            <ModalHeader className={`bd-error-modal-header ${DiscordClasses.Modal.separator}`}>
+                <h4 className={`${DiscordClasses.Titles.defaultColor} ${DiscordClasses.Text.size14} ${DiscordClasses.Titles.h4} ${DiscordClasses.Margins.marginBottom8}`}>
+                    {Strings.Modals.addonErrors}
+                </h4>
                 <div className="bd-tab-bar">
-                    {tabs.map(tab => <div onClick={() => {this.switchToTab(tab.id);}} className={joinClassNames("bd-tab-item", tab.id === selectedTab.id && "selected")}>{tab.name}</div>)}
+                    {tabs.map(tab => (
+                        <div
+                            onClick={() => {this.switchToTab(tab.id)}}
+                            className={joinClassNames("bd-tab-item", tab.id === selectedTab.id && "selected")}
+                        >
+                            {tab.name}
+                        </div>
+                    ))}
                 </div>
-            </div>
-            <div className={`bd-error-modal-content ${DiscordClasses.Modal.content} ${DiscordClasses.Scrollers.thin}`}>
+            </ModalHeader>
+            <ModalContent className="bd-error-modal-content">
                 <div className="bd-addon-errors">
                     {selectedTab.errors.map((error, index) => <AddonError index={index} err={error} />)}
                 </div>
-            </div>
+            </ModalContent>
         </>;
     }
 }

renderer/src/ui/divider.jsx

@@ -1,3 +1,3 @@
 import {React} from "modules";
 
-export default ({className}) => <div className={`bd-divider ${className || ""}`}></div>;
+export default ({className, ...rest}) => <hr className={`bd-divider ${className || ""}`} {...rest} />