Improvements to crash reporting

- Require the user to search for similar issues before reporting a crash
- Auto-populate crash details in the GitHub form when reporting a crash
  (now that this actually works, yay!)

src/components/oops-notification.vue

@@ -18,7 +18,17 @@
           Show Troubleshooting Guide
         </button>
         <button @click.stop="searchGitHub">Search for Similar Issues</button>
-        <button @click.stop="copyErrorLog">Copy Crash Details</button>
+        <button
+          :disabled="!searchedForCrashes"
+          :title="
+            !searchedForCrashes
+              ? `Please search for similar issues before reporting a crash, to be sure you're not about to report a duplicate.`
+              : ''
+          "
+          @click.stop="reportCrash"
+        >
+          Report Crash
+        </button>
       </p>
 
       <p>
@@ -102,6 +112,8 @@ const model = inject<Model>("$model")!;
 
 const err_log_el: Ref<object | null> = ref(null);
 
+const searchedForCrashes = ref(false);
+
 const showTroubleshooting = () =>
   logErrorsFrom(() => browser.tabs.create({url: TROUBLESHOOTING_URL}));
 
@@ -119,15 +131,21 @@ const searchGitHub = () => {
   const url = `https://github.com/josh-berry/tab-stash/issues?q=is%3Aissue+${encodeURIComponent(
     terms,
   )}`;
+  searchedForCrashes.value = true;
   logErrorsFrom(() => browser.tabs.create({url}));
 };
 
-const copyErrorLog = async () => {
+const reportCrash = () => {
   const el = <HTMLElement>err_log_el.value;
-
-  el.focus();
-  window.getSelection()!.selectAllChildren(el);
-  document.execCommand("copy");
+  const crashText = el.innerText;
+  const summary = errorLog[0].summary;
+  logErrorsFrom(() =>
+    browser.tabs.create({
+      url: `https://github.com/josh-berry/tab-stash/issues/new?assignees=&labels=&projects=&template=1-crash-report.yml&crash-details=${encodeURIComponent(
+        crashText,
+      )}&title=${encodeURIComponent(`[Crash] ${summary}`)}`,
+    }),
+  );
 };
 
 const hideCrashReports = (ms: number) =>

styles/base.less

@@ -130,10 +130,10 @@ select {
   border-radius: var(--ctrl-border-radius);
   background-color: var(--button-bg);
 
-  &:not([disabled]):hover {
+  &:not(:disabled):hover {
     background-color: var(--button-hover-bg);
   }
-  &:not([disabled]):active {
+  &:not(:disabled):active {
     background-color: var(--button-active-bg);
   }
 }

styles/index.less

@@ -29,10 +29,10 @@
   box-shadow: 0 0 4px 0px var(--userlink-fg);
   background-color: var(--userlink-fg);
   color: var(--page-bg);
-  &:not([disabled]):hover {
+  &:not(:disabled):hover {
     background-color: var(--userlink-hover-fg);
   }
-  &:not([disabled]):active {
+  &:not(:disabled):active {
     background-color: var(--userlink-active-fg);
   }
   &:focus-within {

styles/page.less

@@ -191,10 +191,13 @@ header.page {
   & button {
     background-color: var(--userlink-hover-fg);
     color: var(--page-bg);
-    &:hover {
+    &:disabled {
+      opacity: 60%;
+    }
+    &:not(:disabled):hover {
       background-color: var(--userlink-active-fg);
     }
-    &:active {
+    &:not(:disabled):active {
       background-color: var(--userlink-fg);
     }
   }