wanhose/cookie-dialog-monster
wanhose/cookie-dialog-monster
2
5
Fork 0
Code Issues 304 Pull Requests Releases 18 Wiki Activity

Merge pull request #838 from wanhose/v7.1.5

Browse Source 
7.1.5
This commit is contained in:
wanhose 2024-08-24 11:05:05 +02:00 committed by GitHub
commit 1d768178b9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 170 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/browser-extension/src/manifest.json
View File

@ -1,7 +1,7 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "Cookie Dialog Monster", "name": "Cookie Dialog Monster",
"version": "7.1.4", "version": "7.1.5",
"default_locale": "en", "default_locale": "en",
"description": "__MSG_appDesc__", "description": "__MSG_appDesc__",
"icons": { "icons": {

38
packages/browser-extension/src/scripts/content.js
View File

@ -260,29 +260,27 @@ function match(element, skipMatch) {
const hasAttributes = !!element.getAttributeNames().filter((x) => x !== 'data-nosnippet').length; const hasAttributes = !!element.getAttributeNames().filter((x) => x !== 'data-nosnippet').length;
if (hasAttributes) { if (!hasAttributes && !tagName.includes('-')) {
// 2023-06-10: fix #113 temporarily
if (element.classList.contains('chat-line__message')) {
return false;
}
// 2024-08-03: fix #701 temporarily
if (element.classList.contains('sellos')) {
return false;
}
const isDialog = tagName === 'DIALOG' && element.getAttribute('open') === 'true';
const isFakeDialog = tagName === 'DIV' && element.className.includes('cmp');
return (
(isDialog || isFakeDialog || isInViewport(element)) &&
(skipMatch || element.matches(tokens.selectors))
);
} else {
forceClean(element); forceClean(element);
} }
return false; // 2023-06-10: fix #113 temporarily
if (element.classList.contains('chat-line__message')) {
return false;
}
// 2024-08-03: fix #701 temporarily
if (element.classList.contains('sellos')) {
return false;
}
const isDialog = tagName === 'DIALOG' && element.getAttribute('open') === 'true';
const isFakeDialog = tagName === 'DIV' && element.className.includes('cmp');
return (
(isDialog || isFakeDialog || isInViewport(element)) &&
(skipMatch || element.matches(tokens.selectors))
);
} }
/** /**

179
packages/browser-extension/src/scripts/dialog.js
View File

@ -25,102 +25,115 @@ const reportDialogId = 'report-dialog';
*/ */
const reportDialogHtml = ` const reportDialogHtml = `
<dialog id="${reportDialogId}" tabindex="0"> <dialog id="${reportDialogId}" tabindex="0">
<report-dialog-header> <div class="report-dialog-header">
<report-dialog-header-title>Cookie Dialog Monster</report-dialog-header-title> <div class="report-dialog-header-title">Cookie Dialog Monster</div>
<report-dialog-close-button role="button" tabindex="0"> <div class="report-dialog-close-button" role="button" tabindex="0">
<svg <svg
viewBox="0 0 24 24"
width="20"
height="20"
stroke-width="2"
fill="none" fill="none"
height="20"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="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="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" />
</svg> </svg>
</report-dialog-close-button> </div>
</report-dialog-header> </div>
<report-dialog-body> <div class="report-dialog-body">
<report-dialog-form-view> <div class="report-dialog-form-view">
<report-dialog-body-text> <div class="report-dialog-body-text">
${browser.i18n.getMessage('reportDialog_bodyText')} ${browser.i18n.getMessage('reportDialog_bodyText')}
</report-dialog-body-text> </div>
<report-dialog-form> <div class="report-dialog-form">
<report-dialog-radio-group> <div class="report-dialog-radio-group">
<report-dialog-radio <div
aria-checked="false" aria-checked="false"
data-value="0" role="radio" class="report-dialog-radio"
tabindex="0"> data-value="0"
role="radio"
tabindex="0"
>
${browser.i18n.getMessage('reportDialog_cannotClickOption')} ${browser.i18n.getMessage('reportDialog_cannotClickOption')}
</report-dialog-radio> </div>
<report-dialog-radio <div
aria-checked="false" aria-checked="false"
data-value="1" class="report-dialog-radio"
role="radio" data-value="1"
tabindex="0"> role="radio"
tabindex="0"
>
${browser.i18n.getMessage('reportDialog_pageVisualGlitchOption')} ${browser.i18n.getMessage('reportDialog_pageVisualGlitchOption')}
</report-dialog-radio> </div>
<report-dialog-radio <div
aria-checked="false" aria-checked="false"
data-value="2" class="report-dialog-radio"
role="radio" data-value="2"
tabindex="0"> role="radio"
tabindex="0"
>
${browser.i18n.getMessage('reportDialog_blankPageOption')} ${browser.i18n.getMessage('reportDialog_blankPageOption')}
</report-dialog-radio> </div>
<report-dialog-radio <div
aria-checked="false" aria-checked="false"
data-value="3" class="report-dialog-radio"
role="radio" data-value="3"
tabindex="0"> role="radio"
tabindex="0"
>
${browser.i18n.getMessage('reportDialog_laggyPageOption')} ${browser.i18n.getMessage('reportDialog_laggyPageOption')}
</report-dialog-radio> </div>
<report-dialog-radio <div
aria-checked="false" aria-checked="false"
data-value="4" class="report-dialog-radio"
role="radio" data-value="4"
tabindex="0"> role="radio"
tabindex="0"
>
${browser.i18n.getMessage('reportDialog_pageNotRespondingOption')} ${browser.i18n.getMessage('reportDialog_pageNotRespondingOption')}
</report-dialog-radio> </div>
<report-dialog-radio <div
aria-checked="false" aria-checked="false"
data-value="5" class="report-dialog-radio"
role="radio" data-value="5"
tabindex="0"> role="radio"
tabindex="0"
>
${browser.i18n.getMessage('reportDialog_popupShowUpOption')} ${browser.i18n.getMessage('reportDialog_popupShowUpOption')}
</report-dialog-radio> </div>
</report-dialog-radio-group> </div>
<report-dialog-submit-button aria-disabled="true" role="button" tabindex="0"> <div aria-disabled="true" class="report-dialog-submit-button" role="button" tabindex="0">
${browser.i18n.getMessage('contextMenu_reportOption')?.replace('...', '')} ${browser.i18n.getMessage('contextMenu_reportOption')?.replace('...', '')}
</report-dialog-submit-button> </div>
</report-dialog-form> </div>
</report-dialog-form-view> </div>
<report-dialog-submit-view hidden> <div class="report-dialog-submit-view" hidden>
<svg <svg
viewBox="0 0 24 24"
width="48"
height="48"
stroke="var(--cookie-dialog-monster-color-success)"
stroke-width="2"
fill="none" fill="none"
height="48"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="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" /> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
<polyline points="22 4 12 14.01 9 11.01" /> <polyline points="22 4 12 14.01 9 11.01" />
</svg> </svg>
<report-dialog-submit-text> <div class="report-dialog-submit-text">
${browser.i18n.getMessage('reportDialog_submitText')} ${browser.i18n.getMessage('reportDialog_submitText')}
</report-dialog-submit-text> </div>
<report-dialog-submit-extra-text> <div class="report-dialog-submit-extra-text">
${browser.i18n.getMessage('reportDialog_submitExtraText')} ${browser.i18n.getMessage('reportDialog_submitExtraText')}
</report-dialog-submit-extra-text> </div>
<report-dialog-issue-button role="button" tabindex="0"> <div class="report-dialog-issue-button" role="button" tabindex="0">
${browser.i18n.getMessage('contextMenu_issueOption')} ${browser.i18n.getMessage('contextMenu_issueOption')}
</report-dialog-issue-button> </div>
</report-dialog-submit-view> </div>
</report-dialog-body> </div>
</dialog> </dialog>
`; `;
@ -148,8 +161,8 @@ function hideReportDialog() {
*/ */
function radioClickHandler(event) { function radioClickHandler(event) {
const dialog = document.getElementById(reportDialogId); const dialog = document.getElementById(reportDialogId);
const radios = dialog.getElementsByTagName('report-dialog-radio'); const radios = dialog.getElementsByClassName('report-dialog-radio');
const submitButton = dialog?.getElementsByTagName('report-dialog-submit-button')[0]; const submitButton = dialog?.getElementsByClassName('report-dialog-submit-button')[0];
for (const radio of radios) { for (const radio of radios) {
radio.setAttribute('aria-checked', 'false'); radio.setAttribute('aria-checked', 'false');
@ -165,12 +178,19 @@ function radioClickHandler(event) {
* @description Show report dialog * @description Show report dialog
*/ */
function showReportDialog() { function showReportDialog() {
const existingDialog = document.getElementById(reportDialogId);
if (existingDialog) {
existingDialog.showModal();
return;
}
const parser = new DOMParser(); const parser = new DOMParser();
const result = parser.parseFromString(reportDialogHtml, 'text/html'); const result = parser.parseFromString(reportDialogHtml, 'text/html');
const dialog = result.body.firstElementChild; 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 link = document.createElement('link');
const radios = dialog.getElementsByTagName('report-dialog-radio'); const radios = dialog.getElementsByClassName('report-dialog-radio');
closeButton.addEventListener('click', closeButtonClickHandler); closeButton.addEventListener('click', closeButtonClickHandler);
link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Inter'); link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Inter');
@ -183,11 +203,8 @@ function showReportDialog() {
dispatch({ type: 'INSERT_DIALOG_CSS' }); dispatch({ type: 'INSERT_DIALOG_CSS' });
document.body.appendChild(dialog); document.body.appendChild(dialog);
document.head.appendChild(link);
dialog.showModal(); 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'); target.setAttribute('aria-disabled', 'true');
const dialog = document.getElementById(reportDialogId); const dialog = document.getElementById(reportDialogId);
const formView = dialog?.getElementsByTagName('report-dialog-form-view')[0]; const formView = dialog?.getElementsByClassName('report-dialog-form-view')[0];
const issueButton = dialog?.getElementsByTagName('report-dialog-issue-button')[0]; const issueButton = dialog?.getElementsByClassName('report-dialog-issue-button')[0];
const option = dialog?.querySelector('report-dialog-radio[aria-checked="true"]'); const option = dialog?.querySelector('report-dialog-radio[aria-checked="true"]');
const reasonIndex = option?.dataset.value; const reasonIndex = option?.dataset.value;
const reason = Number.isNaN(reasonIndex) ? 'Unknown' : reasons[reasonIndex]; 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 userAgent = window.navigator.userAgent;
const issueUrl = await dispatch({ userAgent, reason, type: 'REPORT' }); const issueUrl = await dispatch({ userAgent, reason, type: 'REPORT' });

98
packages/browser-extension/src/styles/dialog.css
View File

@ -13,9 +13,10 @@
box-sizing: border-box; box-sizing: border-box;
color: var(--cookie-dialog-monster-color-secondary); color: var(--cookie-dialog-monster-color-secondary);
font-size: 100%; font-size: 100%;
margin: auto !important; letter-spacing: normal;
padding: 0px !important; margin: auto;
text-align: left !important; padding: 0px;
text-align: left;
width: 320px; width: 320px;
} }
@ -25,24 +26,23 @@
#report-dialog * { #report-dialog * {
box-sizing: border-box; box-sizing: border-box;
visibility: visible !important; visibility: visible;
} }
.report-dialog-body {
report-dialog-body {
display: block; display: block;
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
padding: 16px; padding: 16px;
} }
report-dialog-body-text { .report-dialog-body-text {
display: block; display: block;
font-family: Inter, Arial, Helvetica, sans-serif; font-family: Inter, Arial, Helvetica, sans-serif;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
report-dialog-close-button { .report-dialog-close-button {
align-items: center; align-items: center;
background-color: transparent; background-color: transparent;
border: none; border: none;
@ -51,42 +51,45 @@ report-dialog-close-button {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
margin: 0px; margin: 0px;
outline: none !important; outline: none;
padding: 0px; padding: 0px;
transition: 0.4s; transition: 0.4s;
} }
report-dialog-close-button { .report-dialog-close-button {
stroke: var(--cookie-dialog-monster-color-white); stroke: var(--cookie-dialog-monster-color-white);
} }
report-dialog-close-button:focus, .report-dialog-close-button:focus,
report-dialog-close-button:hover > svg { .report-dialog-close-button:hover > svg {
stroke: var(--cookie-dialog-monster-color-secondary); stroke: var(--cookie-dialog-monster-color-secondary);
} }
report-dialog-close-button:focus, .report-dialog-close-button:focus-visible {
report-dialog-close-button:hover { box-shadow: initial;
transition: initial;
}
.report-dialog-close-button:focus,
.report-dialog-close-button:hover {
background-color: var(--cookie-dialog-monster-color-white); background-color: var(--cookie-dialog-monster-color-white);
} }
.report-dialog-form {
report-dialog-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
} }
report-dialog-form-view { .report-dialog-form-view {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
} }
report-dialog-form-view[hidden] { .report-dialog-form-view[hidden] {
display: none; display: none;
} }
.report-dialog-header {
report-dialog-header {
align-items: center; align-items: center;
background-color: var(--cookie-dialog-monster-color-secondary); background-color: var(--cookie-dialog-monster-color-secondary);
display: flex; display: flex;
@ -97,28 +100,27 @@ report-dialog-header {
padding: 16px; padding: 16px;
} }
report-dialog-header-title { .report-dialog-header-title {
color: var(--cookie-dialog-monster-color-white); color: var(--cookie-dialog-monster-color-white);
font-family: Inter, Arial, Helvetica, sans-serif; font-family: Inter, Arial, Helvetica, sans-serif;
font-weight: 500; font-weight: 500;
} }
.report-dialog-radio {
report-dialog-radio {
color: var(--cookie-dialog-monster-color-tertiary); color: var(--cookie-dialog-monster-color-tertiary);
cursor: pointer; cursor: pointer;
display: block; display: block;
font-family: Inter, Arial, Helvetica, sans-serif; font-family: Inter, Arial, Helvetica, sans-serif;
outline: none !important; outline: none;
padding-left: 24px; padding-left: 24px;
position: relative; position: relative;
} }
report-dialog-radio[aria-checked='true']:after { .report-dialog-radio[aria-checked='true']:after {
opacity: 1; opacity: 1;
transform: scale(1, 1); transform: scale(1, 1);
} }
report-dialog-radio:after { .report-dialog-radio:after {
background-color: var(--cookie-dialog-monster-color-primary); background-color: var(--cookie-dialog-monster-color-primary);
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
@ -134,14 +136,14 @@ report-dialog-radio:after {
width: 8px; width: 8px;
} }
report-dialog-radio:focus:not([aria-checked='true']):after, .report-dialog-radio:focus:not([aria-checked='true']):after,
report-dialog-radio:hover:not([aria-checked='true']):after { .report-dialog-radio:hover:not([aria-checked='true']):after {
background: var(--cookie-dialog-monster-color-tertiary); background: var(--cookie-dialog-monster-color-tertiary);
opacity: 1; opacity: 1;
transform: scale(1, 1); transform: scale(1, 1);
} }
report-dialog-radio:before { .report-dialog-radio:before {
background: var(--cookie-dialog-monster-color-white); background: var(--cookie-dialog-monster-color-white);
border: 1px solid var(--cookie-dialog-monster-color-tertiary); border: 1px solid var(--cookie-dialog-monster-color-tertiary);
border-radius: 50%; border-radius: 50%;
@ -156,14 +158,14 @@ report-dialog-radio:before {
width: 14px; width: 14px;
} }
report-dialog-radio-group { .report-dialog-radio-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 18px; gap: 18px;
} }
report-dialog-issue-button, .report-dialog-issue-button,
report-dialog-submit-button { .report-dialog-submit-button {
align-items: center; align-items: center;
background-color: var(--cookie-dialog-monster-color-secondary); background-color: var(--cookie-dialog-monster-color-secondary);
border: 1px solid var(--cookie-dialog-monster-color-secondary); border: 1px solid var(--cookie-dialog-monster-color-secondary);
@ -175,46 +177,52 @@ report-dialog-submit-button {
font-size: 14px; font-size: 14px;
height: 39px; height: 39px;
justify-content: center; justify-content: center;
outline: none !important; outline: none;
padding: 8px 16px; padding: 8px 16px;
text-align: center; text-align: center;
transition: 0.4s; transition: 0.4s;
width: 100%; width: 100%;
} }
report-dialog-issue-button:focus, .report-dialog-issue-button:focus,
report-dialog-issue-button:hover, .report-dialog-issue-button:hover,
report-dialog-submit-button:focus, .report-dialog-submit-button:focus,
report-dialog-submit-button:hover { .report-dialog-submit-button:hover {
background-color: var(--cookie-dialog-monster-color-white); background-color: var(--cookie-dialog-monster-color-white);
color: var(--cookie-dialog-monster-color-secondary); color: var(--cookie-dialog-monster-color-secondary);
} }
report-dialog-issue-button[aria-disabled='true'], .report-dialog-issue-button:focus-visible,
report-dialog-submit-button[aria-disabled='true'] { .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); background-color: var(--cookie-dialog-monster-color-tertiary);
border: 1px solid var(--cookie-dialog-monster-color-tertiary); border: 1px solid var(--cookie-dialog-monster-color-tertiary);
color: var(--cookie-dialog-monster-color-white); color: var(--cookie-dialog-monster-color-white);
cursor: not-allowed; cursor: not-allowed;
} }
report-dialog-submit-extra-text { .report-dialog-submit-extra-text {
font-family: inherit !important; font-family: inherit;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
margin: 0px; margin: 0px;
text-align: justify; text-align: justify;
} }
report-dialog-submit-text { .report-dialog-submit-text {
font-family: inherit !important; font-family: inherit;
font-size: 18px; font-size: 18px;
line-height: 20px; line-height: 20px;
margin: 0px; margin: 0px;
text-align: center; text-align: center;
} }
report-dialog-submit-view { .report-dialog-submit-view {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -224,6 +232,6 @@ report-dialog-submit-view {
margin-top: 16px; margin-top: 16px;
} }
report-dialog-submit-view[hidden] { .report-dialog-submit-view[hidden] {
display: none; display: none;
} }