fix(browser-extension): issue #832
This commit is contained in:
parent
3fa412f4bc
commit
ce77c75351
@ -25,102 +25,115 @@ const reportDialogId = 'report-dialog';
|
||||
*/
|
||||
const reportDialogHtml = `
|
||||
<dialog id="${reportDialogId}" tabindex="0">
|
||||
<report-dialog-header>
|
||||
<report-dialog-header-title>Cookie Dialog Monster</report-dialog-header-title>
|
||||
<report-dialog-close-button role="button" tabindex="0">
|
||||
<div class="report-dialog-header">
|
||||
<div class="report-dialog-header-title">Cookie Dialog Monster</div>
|
||||
<div class="report-dialog-close-button" role="button" tabindex="0">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
height="20"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</report-dialog-close-button>
|
||||
</report-dialog-header>
|
||||
<report-dialog-body>
|
||||
<report-dialog-form-view>
|
||||
<report-dialog-body-text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="report-dialog-body">
|
||||
<div class="report-dialog-form-view">
|
||||
<div class="report-dialog-body-text">
|
||||
${browser.i18n.getMessage('reportDialog_bodyText')}
|
||||
</report-dialog-body-text>
|
||||
<report-dialog-form>
|
||||
<report-dialog-radio-group>
|
||||
<report-dialog-radio
|
||||
aria-checked="false"
|
||||
data-value="0" role="radio"
|
||||
tabindex="0">
|
||||
</div>
|
||||
<div class="report-dialog-form">
|
||||
<div class="report-dialog-radio-group">
|
||||
<div
|
||||
aria-checked="false"
|
||||
class="report-dialog-radio"
|
||||
data-value="0"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
${browser.i18n.getMessage('reportDialog_cannotClickOption')}
|
||||
</report-dialog-radio>
|
||||
<report-dialog-radio
|
||||
aria-checked="false"
|
||||
data-value="1"
|
||||
role="radio"
|
||||
tabindex="0">
|
||||
</div>
|
||||
<div
|
||||
aria-checked="false"
|
||||
class="report-dialog-radio"
|
||||
data-value="1"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
${browser.i18n.getMessage('reportDialog_pageVisualGlitchOption')}
|
||||
</report-dialog-radio>
|
||||
<report-dialog-radio
|
||||
aria-checked="false"
|
||||
data-value="2"
|
||||
role="radio"
|
||||
tabindex="0">
|
||||
</div>
|
||||
<div
|
||||
aria-checked="false"
|
||||
class="report-dialog-radio"
|
||||
data-value="2"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
${browser.i18n.getMessage('reportDialog_blankPageOption')}
|
||||
</report-dialog-radio>
|
||||
<report-dialog-radio
|
||||
aria-checked="false"
|
||||
data-value="3"
|
||||
role="radio"
|
||||
tabindex="0">
|
||||
</div>
|
||||
<div
|
||||
aria-checked="false"
|
||||
class="report-dialog-radio"
|
||||
data-value="3"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
${browser.i18n.getMessage('reportDialog_laggyPageOption')}
|
||||
</report-dialog-radio>
|
||||
<report-dialog-radio
|
||||
aria-checked="false"
|
||||
data-value="4"
|
||||
role="radio"
|
||||
tabindex="0">
|
||||
</div>
|
||||
<div
|
||||
aria-checked="false"
|
||||
class="report-dialog-radio"
|
||||
data-value="4"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
${browser.i18n.getMessage('reportDialog_pageNotRespondingOption')}
|
||||
</report-dialog-radio>
|
||||
<report-dialog-radio
|
||||
aria-checked="false"
|
||||
data-value="5"
|
||||
role="radio"
|
||||
tabindex="0">
|
||||
</div>
|
||||
<div
|
||||
aria-checked="false"
|
||||
class="report-dialog-radio"
|
||||
data-value="5"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
${browser.i18n.getMessage('reportDialog_popupShowUpOption')}
|
||||
</report-dialog-radio>
|
||||
</report-dialog-radio-group>
|
||||
<report-dialog-submit-button aria-disabled="true" role="button" tabindex="0">
|
||||
</div>
|
||||
</div>
|
||||
<div aria-disabled="true" class="report-dialog-submit-button" role="button" tabindex="0">
|
||||
${browser.i18n.getMessage('contextMenu_reportOption')?.replace('...', '')}
|
||||
</report-dialog-submit-button>
|
||||
</report-dialog-form>
|
||||
</report-dialog-form-view>
|
||||
<report-dialog-submit-view hidden>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="report-dialog-submit-view" hidden>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="48"
|
||||
height="48"
|
||||
stroke="var(--cookie-dialog-monster-color-success)"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
height="48"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
stroke="var(--cookie-dialog-monster-color-success)"
|
||||
viewBox="0 0 24 24"
|
||||
width="48"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
||||
<polyline points="22 4 12 14.01 9 11.01" />
|
||||
</svg>
|
||||
<report-dialog-submit-text>
|
||||
<div class="report-dialog-submit-text">
|
||||
${browser.i18n.getMessage('reportDialog_submitText')}
|
||||
</report-dialog-submit-text>
|
||||
<report-dialog-submit-extra-text>
|
||||
</div>
|
||||
<div class="report-dialog-submit-extra-text">
|
||||
${browser.i18n.getMessage('reportDialog_submitExtraText')}
|
||||
</report-dialog-submit-extra-text>
|
||||
<report-dialog-issue-button role="button" tabindex="0">
|
||||
${browser.i18n.getMessage('contextMenu_issueOption')}
|
||||
</report-dialog-issue-button>
|
||||
</report-dialog-submit-view>
|
||||
</report-dialog-body>
|
||||
</div>
|
||||
<div class="report-dialog-issue-button" role="button" tabindex="0">
|
||||
${browser.i18n.getMessage('contextMenu_issueOption')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
`;
|
||||
|
||||
@ -148,8 +161,8 @@ function hideReportDialog() {
|
||||
*/
|
||||
function radioClickHandler(event) {
|
||||
const dialog = document.getElementById(reportDialogId);
|
||||
const radios = dialog.getElementsByTagName('report-dialog-radio');
|
||||
const submitButton = dialog?.getElementsByTagName('report-dialog-submit-button')[0];
|
||||
const radios = dialog.getElementsByClassName('report-dialog-radio');
|
||||
const submitButton = dialog?.getElementsByClassName('report-dialog-submit-button')[0];
|
||||
|
||||
for (const radio of radios) {
|
||||
radio.setAttribute('aria-checked', 'false');
|
||||
@ -165,12 +178,19 @@ function radioClickHandler(event) {
|
||||
* @description Show report dialog
|
||||
*/
|
||||
function showReportDialog() {
|
||||
const existingDialog = document.getElementById(reportDialogId);
|
||||
|
||||
if (existingDialog) {
|
||||
existingDialog.showModal();
|
||||
return;
|
||||
}
|
||||
|
||||
const parser = new DOMParser();
|
||||
const result = parser.parseFromString(reportDialogHtml, 'text/html');
|
||||
const dialog = result.body.firstElementChild;
|
||||
const closeButton = dialog.getElementsByTagName('report-dialog-close-button')[0];
|
||||
const closeButton = dialog.getElementsByClassName('report-dialog-close-button')[0];
|
||||
const link = document.createElement('link');
|
||||
const radios = dialog.getElementsByTagName('report-dialog-radio');
|
||||
const radios = dialog.getElementsByClassName('report-dialog-radio');
|
||||
|
||||
closeButton.addEventListener('click', closeButtonClickHandler);
|
||||
link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Inter');
|
||||
@ -183,11 +203,8 @@ function showReportDialog() {
|
||||
|
||||
dispatch({ type: 'INSERT_DIALOG_CSS' });
|
||||
document.body.appendChild(dialog);
|
||||
document.head.appendChild(link);
|
||||
dialog.showModal();
|
||||
|
||||
if (!document.getElementById('report-dialog-font')) {
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -205,12 +222,12 @@ async function submitButtonClickHandler(event) {
|
||||
target.setAttribute('aria-disabled', 'true');
|
||||
|
||||
const dialog = document.getElementById(reportDialogId);
|
||||
const formView = dialog?.getElementsByTagName('report-dialog-form-view')[0];
|
||||
const issueButton = dialog?.getElementsByTagName('report-dialog-issue-button')[0];
|
||||
const formView = dialog?.getElementsByClassName('report-dialog-form-view')[0];
|
||||
const issueButton = dialog?.getElementsByClassName('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 submitView = dialog?.getElementsByClassName('report-dialog-submit-view')[0];
|
||||
const userAgent = window.navigator.userAgent;
|
||||
|
||||
const issueUrl = await dispatch({ userAgent, reason, type: 'REPORT' });
|
||||
|
||||
@ -13,9 +13,9 @@
|
||||
box-sizing: border-box;
|
||||
color: var(--cookie-dialog-monster-color-secondary);
|
||||
font-size: 100%;
|
||||
margin: auto !important;
|
||||
padding: 0px !important;
|
||||
text-align: left !important;
|
||||
margin: auto;
|
||||
padding: 0px;
|
||||
text-align: left;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
@ -25,24 +25,23 @@
|
||||
|
||||
#report-dialog * {
|
||||
box-sizing: border-box;
|
||||
visibility: visible !important;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
report-dialog-body {
|
||||
.report-dialog-body {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
report-dialog-body-text {
|
||||
.report-dialog-body-text {
|
||||
display: block;
|
||||
font-family: Inter, Arial, Helvetica, sans-serif;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
report-dialog-close-button {
|
||||
.report-dialog-close-button {
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
@ -51,42 +50,45 @@ report-dialog-close-button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
margin: 0px;
|
||||
outline: none !important;
|
||||
outline: none;
|
||||
padding: 0px;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
report-dialog-close-button {
|
||||
.report-dialog-close-button {
|
||||
stroke: var(--cookie-dialog-monster-color-white);
|
||||
}
|
||||
|
||||
report-dialog-close-button:focus,
|
||||
report-dialog-close-button:hover > svg {
|
||||
.report-dialog-close-button:focus,
|
||||
.report-dialog-close-button:hover > svg {
|
||||
stroke: var(--cookie-dialog-monster-color-secondary);
|
||||
}
|
||||
|
||||
report-dialog-close-button:focus,
|
||||
report-dialog-close-button:hover {
|
||||
.report-dialog-close-button:focus-visible {
|
||||
box-shadow: initial;
|
||||
transition: initial;
|
||||
}
|
||||
|
||||
.report-dialog-close-button:focus,
|
||||
.report-dialog-close-button:hover {
|
||||
background-color: var(--cookie-dialog-monster-color-white);
|
||||
}
|
||||
|
||||
report-dialog-form {
|
||||
.report-dialog-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
report-dialog-form-view {
|
||||
.report-dialog-form-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
report-dialog-form-view[hidden] {
|
||||
.report-dialog-form-view[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
report-dialog-header {
|
||||
.report-dialog-header {
|
||||
align-items: center;
|
||||
background-color: var(--cookie-dialog-monster-color-secondary);
|
||||
display: flex;
|
||||
@ -97,28 +99,27 @@ report-dialog-header {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
report-dialog-header-title {
|
||||
.report-dialog-header-title {
|
||||
color: var(--cookie-dialog-monster-color-white);
|
||||
font-family: Inter, Arial, Helvetica, sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
report-dialog-radio {
|
||||
.report-dialog-radio {
|
||||
color: var(--cookie-dialog-monster-color-tertiary);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-family: Inter, Arial, Helvetica, sans-serif;
|
||||
outline: none !important;
|
||||
outline: none;
|
||||
padding-left: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
report-dialog-radio[aria-checked='true']:after {
|
||||
.report-dialog-radio[aria-checked='true']:after {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
report-dialog-radio:after {
|
||||
.report-dialog-radio:after {
|
||||
background-color: var(--cookie-dialog-monster-color-primary);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
@ -134,14 +135,14 @@ report-dialog-radio:after {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
report-dialog-radio:focus:not([aria-checked='true']):after,
|
||||
report-dialog-radio:hover:not([aria-checked='true']):after {
|
||||
.report-dialog-radio:focus:not([aria-checked='true']):after,
|
||||
.report-dialog-radio:hover:not([aria-checked='true']):after {
|
||||
background: var(--cookie-dialog-monster-color-tertiary);
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
report-dialog-radio:before {
|
||||
.report-dialog-radio:before {
|
||||
background: var(--cookie-dialog-monster-color-white);
|
||||
border: 1px solid var(--cookie-dialog-monster-color-tertiary);
|
||||
border-radius: 50%;
|
||||
@ -156,14 +157,14 @@ report-dialog-radio:before {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
report-dialog-radio-group {
|
||||
.report-dialog-radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
report-dialog-issue-button,
|
||||
report-dialog-submit-button {
|
||||
.report-dialog-issue-button,
|
||||
.report-dialog-submit-button {
|
||||
align-items: center;
|
||||
background-color: var(--cookie-dialog-monster-color-secondary);
|
||||
border: 1px solid var(--cookie-dialog-monster-color-secondary);
|
||||
@ -175,46 +176,52 @@ report-dialog-submit-button {
|
||||
font-size: 14px;
|
||||
height: 39px;
|
||||
justify-content: center;
|
||||
outline: none !important;
|
||||
outline: none;
|
||||
padding: 8px 16px;
|
||||
text-align: center;
|
||||
transition: 0.4s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
report-dialog-issue-button:focus,
|
||||
report-dialog-issue-button:hover,
|
||||
report-dialog-submit-button:focus,
|
||||
report-dialog-submit-button:hover {
|
||||
.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'] {
|
||||
.report-dialog-issue-button:focus-visible,
|
||||
.report-dialog-submit-button:focus-visible {
|
||||
box-shadow: initial;
|
||||
transition: initial;
|
||||
}
|
||||
|
||||
.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);
|
||||
color: var(--cookie-dialog-monster-color-white);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
report-dialog-submit-extra-text {
|
||||
font-family: inherit !important;
|
||||
.report-dialog-submit-extra-text {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin: 0px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
report-dialog-submit-text {
|
||||
font-family: inherit !important;
|
||||
.report-dialog-submit-text {
|
||||
font-family: inherit;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
report-dialog-submit-view {
|
||||
.report-dialog-submit-view {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -224,6 +231,6 @@ report-dialog-submit-view {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
report-dialog-submit-view[hidden] {
|
||||
.report-dialog-submit-view[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user