From ce77c75351b2d997b684e053983366d929d17bf4 Mon Sep 17 00:00:00 2001 From: wanhose Date: Sat, 24 Aug 2024 08:53:33 +0200 Subject: [PATCH 1/4] fix(browser-extension): issue #832 --- .../browser-extension/src/scripts/dialog.js | 179 ++++++++++-------- .../browser-extension/src/styles/dialog.css | 97 +++++----- 2 files changed, 150 insertions(+), 126 deletions(-) diff --git a/packages/browser-extension/src/scripts/dialog.js b/packages/browser-extension/src/scripts/dialog.js index 3f21888..a48d851 100644 --- a/packages/browser-extension/src/scripts/dialog.js +++ b/packages/browser-extension/src/scripts/dialog.js @@ -25,102 +25,115 @@ const reportDialogId = 'report-dialog'; */ const reportDialogHtml = ` - - Cookie Dialog Monster - +
+
Cookie Dialog Monster
+
- - - - - +
+
+
+
+
${browser.i18n.getMessage('reportDialog_bodyText')} - - - - +
+
+
+ + + + + + +
+
${browser.i18n.getMessage('contextMenu_reportOption')?.replace('...', '')} - - - -
+
+
+ +
`; @@ -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' }); diff --git a/packages/browser-extension/src/styles/dialog.css b/packages/browser-extension/src/styles/dialog.css index e47f54a..b212a13 100644 --- a/packages/browser-extension/src/styles/dialog.css +++ b/packages/browser-extension/src/styles/dialog.css @@ -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; } From 5d33d4408453373b8c973ee16bf15e277c1d199c Mon Sep 17 00:00:00 2001 From: wanhose Date: Sat, 24 Aug 2024 09:01:37 +0200 Subject: [PATCH 2/4] fix(browser-extension): issue #783 --- .../browser-extension/src/scripts/content.js | 38 +++++++++---------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/packages/browser-extension/src/scripts/content.js b/packages/browser-extension/src/scripts/content.js index fd48417..b277a5f 100644 --- a/packages/browser-extension/src/scripts/content.js +++ b/packages/browser-extension/src/scripts/content.js @@ -260,29 +260,27 @@ function match(element, skipMatch) { const hasAttributes = !!element.getAttributeNames().filter((x) => x !== 'data-nosnippet').length; - if (hasAttributes) { - // 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 { + if (!hasAttributes && !tagName.includes('-')) { 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)) + ); } /** From 7a53f57012eeab2fe51c0f1fd991aef9f4fc041f Mon Sep 17 00:00:00 2001 From: wanhose Date: Sat, 24 Aug 2024 09:01:43 +0200 Subject: [PATCH 3/4] chore(browser-extension): upgrade manifest version --- packages/browser-extension/src/manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/browser-extension/src/manifest.json b/packages/browser-extension/src/manifest.json index c964baf..882b8d2 100644 --- a/packages/browser-extension/src/manifest.json +++ b/packages/browser-extension/src/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "Cookie Dialog Monster", - "version": "7.1.4", + "version": "7.1.5", "default_locale": "en", "description": "__MSG_appDesc__", "icons": { From ab8da9cb76afb7c7bb1b18b3cae1449fb808b778 Mon Sep 17 00:00:00 2001 From: wanhose Date: Sat, 24 Aug 2024 10:34:09 +0200 Subject: [PATCH 4/4] fix(browser-extension): report dialog letter spacing in some sites --- packages/browser-extension/src/styles/dialog.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/browser-extension/src/styles/dialog.css b/packages/browser-extension/src/styles/dialog.css index b212a13..262b55b 100644 --- a/packages/browser-extension/src/styles/dialog.css +++ b/packages/browser-extension/src/styles/dialog.css @@ -13,6 +13,7 @@ box-sizing: border-box; color: var(--cookie-dialog-monster-color-secondary); font-size: 100%; + letter-spacing: normal; margin: auto; padding: 0px; text-align: left;