diff --git a/packages/browser-extension/src/scripts/dialog.js b/packages/browser-extension/src/scripts/dialog.js
index 93849eb..65c8fb1 100644
--- a/packages/browser-extension/src/scripts/dialog.js
+++ b/packages/browser-extension/src/scripts/dialog.js
@@ -112,6 +112,9 @@ const reportDialogHtml = `
${chrome.i18n.getMessage('reportDialog_submitExtraText')}
+
+ ${chrome.i18n.getMessage('contextMenu_issueOption')}
+
@@ -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();
- dispatch({ userAgent, reason, type: 'REPORT' });
+ const issueUrl = await dispatch({ userAgent, reason, type: 'REPORT' });
+
formView?.setAttribute('hidden', 'true');
+ issueButton?.addEventListener('click', () => window.open(issueUrl, '_blank'));
submitView?.removeAttribute('hidden');
-};
+}
/**
* @description Listen to messages
diff --git a/packages/browser-extension/src/styles/dialog.css b/packages/browser-extension/src/styles/dialog.css
index 4d179f8..e47f54a 100644
--- a/packages/browser-extension/src/styles/dialog.css
+++ b/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: center;
+ text-align: justify;
}
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] {