feat(browser-extension): add button to open issue in GitHub after report

packages/browser-extension/src/scripts/dialog.js

@@ -112,6 +112,9 @@ const reportDialogHtml = `
         <report-dialog-submit-extra-text>
           ${chrome.i18n.getMessage('reportDialog_submitExtraText')}
         </report-dialog-submit-extra-text>
+        <report-dialog-issue-button role="button" tabindex="0">
+            ${chrome.i18n.getMessage('contextMenu_issueOption')}
+        </report-dialog-issue-button>
       </report-dialog-submit-view>
     </report-dialog-body>
   </dialog>
@@ -121,25 +124,25 @@ const reportDialogHtml = `
  * @description Dialog close button click handler
  * @param {MouseEvent} event
  */
-const closeButtonClickHandler = (event) => {
+function closeButtonClickHandler(event) {
   const dialog = document.getElementById(reportDialogId);
 
   event.preventDefault();
   dialog?.remove();
-};
+}
 
 /**
  * @description Hide report dialog
  */
-const hideReportDialog = () => {
+function hideReportDialog() {
   document.getElementById(reportDialogId)?.remove();
-};
+}
 
 /**
  * @description Dialog radio input click handler
  * @param {MouseEvent} event
  */
-const radioClickHandler = (event) => {
+function radioClickHandler(event) {
   const dialog = document.getElementById(reportDialogId);
   const radios = dialog.getElementsByTagName('report-dialog-radio');
   const submitButton = dialog?.getElementsByTagName('report-dialog-submit-button')[0];
@@ -152,12 +155,12 @@ const radioClickHandler = (event) => {
   event.currentTarget.setAttribute('aria-checked', 'true');
   submitButton.setAttribute('aria-disabled', 'false');
   submitButton.addEventListener('click', submitButtonClickHandler);
-};
+}
 
 /**
  * @description Show report dialog
  */
-const showReportDialog = () => {
+function showReportDialog() {
   const parser = new DOMParser();
   const result = parser.parseFromString(reportDialogHtml, 'text/html');
   const dialog = result.body.firstElementChild;
@@ -181,26 +184,30 @@ const showReportDialog = () => {
   if (!document.getElementById('report-dialog-font')) {
     document.head.appendChild(link);
   }
-};
+}
 
 /**
  * @description Dialog submit button click handler
  * @param {MouseEvent} event
  */
-const submitButtonClickHandler = (event) => {
+async function submitButtonClickHandler(event) {
+  event.preventDefault();
+
   const dialog = document.getElementById(reportDialogId);
   const formView = dialog?.getElementsByTagName('report-dialog-form-view')[0];
+  const issueButton = dialog?.getElementsByTagName('report-dialog-issue-button')[0];
   const option = dialog?.querySelector('report-dialog-radio[aria-checked="true"]');
   const reasonIndex = option?.dataset.value;
   const reason = Number.isNaN(reasonIndex) ? 'Unknown' : reasons[reasonIndex];
   const submitView = dialog?.getElementsByTagName('report-dialog-submit-view')[0];
   const userAgent = window.navigator.userAgent;
 
-  event.preventDefault();
+  const issueUrl = await dispatch({ userAgent, reason, type: 'REPORT' });
-  dispatch({ userAgent, reason, type: 'REPORT' });
+
   formView?.setAttribute('hidden', 'true');
+  issueButton?.addEventListener('click', () => window.open(issueUrl, '_blank'));
   submitView?.removeAttribute('hidden');
-};
+}
 
 /**
  * @description Listen to messages

packages/browser-extension/src/styles/dialog.css

@@ -70,6 +70,18 @@ report-dialog-close-button:hover {
   background-color: var(--cookie-dialog-monster-color-white);
 }
 
+report-dialog-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+report-dialog-form-view {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
 report-dialog-form-view[hidden] {
   display: none;
 }
@@ -96,7 +108,6 @@ report-dialog-radio {
   cursor: pointer;
   display: block;
   font-family: Inter, Arial, Helvetica, sans-serif;
-  margin-top: 18px;
   outline: none !important;
   padding-left: 24px;
   position: relative;
@@ -148,8 +159,10 @@ report-dialog-radio:before {
 report-dialog-radio-group {
   display: flex;
   flex-direction: column;
+  gap: 18px;
 }
 
+report-dialog-issue-button,
 report-dialog-submit-button {
   align-items: center;
   background-color: var(--cookie-dialog-monster-color-secondary);
@@ -162,7 +175,6 @@ report-dialog-submit-button {
   font-size: 14px;
   height: 39px;
   justify-content: center;
-  margin-top: 24px;
   outline: none !important;
   padding: 8px 16px;
   text-align: center;
@@ -170,12 +182,15 @@ report-dialog-submit-button {
   width: 100%;
 }
 
+report-dialog-issue-button:focus,
+report-dialog-issue-button:hover,
 report-dialog-submit-button:focus,
 report-dialog-submit-button:hover {
   background-color: var(--cookie-dialog-monster-color-white);
   color: var(--cookie-dialog-monster-color-secondary);
 }
 
+report-dialog-issue-button[aria-disabled='true'],
 report-dialog-submit-button[aria-disabled='true'] {
   background-color: var(--cookie-dialog-monster-color-tertiary);
   border: 1px solid var(--cookie-dialog-monster-color-tertiary);
@@ -186,18 +201,16 @@ report-dialog-submit-button[aria-disabled='true'] {
 report-dialog-submit-extra-text {
   font-family: inherit !important;
   font-size: 14px;
-  line-height: 14px;
+  line-height: 16px;
   margin: 0px;
-  margin-top: 16px;
+  text-align: justify;
-  text-align: center;
 }
 
 report-dialog-submit-text {
   font-family: inherit !important;
   font-size: 18px;
-  line-height: 18px;
+  line-height: 20px;
   margin: 0px;
-  margin-top: 24px;
   text-align: center;
 }
 
@@ -206,8 +219,9 @@ report-dialog-submit-view {
   display: flex;
   flex-direction: column;
   font-family: Inter, Arial, Helvetica, sans-serif;
+  gap: 24px;
   justify-content: center;
-  min-height: 269px;
+  margin-top: 16px;
 }
 
 report-dialog-submit-view[hidden] {