diff --git a/browser/base/content/browser-siteProtections.js b/browser/base/content/browser-siteProtections.js index bffef8a86ca9..113f0710ce6d 100644 --- a/browser/base/content/browser-siteProtections.js +++ b/browser/base/content/browser-siteProtections.js @@ -1494,55 +1494,35 @@ var gProtectionsHandler = { }); }, - async showTrackersSubview(event) { - if (event.target.classList.contains("notFound")) { - return; - } - + async showTrackersSubview() { await TrackingProtection.updateSubView(); this._protectionsPopupMultiView.showSubView( "protections-popup-trackersView" ); }, - async showSocialblockerSubview(event) { - if (event.target.classList.contains("notFound")) { - return; - } - + async showSocialblockerSubview() { await SocialTracking.updateSubView(); this._protectionsPopupMultiView.showSubView( "protections-popup-socialblockView" ); }, - async showCookiesSubview(event) { - if (event.target.classList.contains("notFound")) { - return; - } - + async showCookiesSubview() { await ThirdPartyCookies.updateSubView(); this._protectionsPopupMultiView.showSubView( "protections-popup-cookiesView" ); }, - async showFingerprintersSubview(event) { - if (event.target.classList.contains("notFound")) { - return; - } - + async showFingerprintersSubview() { await Fingerprinting.updateSubView(); this._protectionsPopupMultiView.showSubView( "protections-popup-fingerprintersView" ); }, - async showCryptominersSubview(event) { - if (event.target.classList.contains("notFound")) { - return; - } - + async showCryptominersSubview() { await Cryptomining.updateSubView(); this._protectionsPopupMultiView.showSubView( "protections-popup-cryptominersView" @@ -1713,7 +1693,7 @@ var gProtectionsHandler = { // runs on tab switch, so we can avoid associating the data with the document directly. blocker.activated = blocker.isBlocking(event); let detected = blocker.isDetected(event); - blocker.categoryItem.classList.toggle("notFound", !detected); + blocker.categoryItem.hidden = !detected; anyDetected = anyDetected || detected; anyBlocking = anyBlocking || blocker.activated; } diff --git a/browser/base/content/test/trackingUI/browser_trackingUI_categories.js b/browser/base/content/test/trackingUI/browser_trackingUI_categories.js index 86d701e2a977..198e34f80fb2 100644 --- a/browser/base/content/test/trackingUI/browser_trackingUI_categories.js +++ b/browser/base/content/test/trackingUI/browser_trackingUI_categories.js @@ -4,7 +4,6 @@ const TP_PB_PREF = "privacy.trackingprotection.pbmode.enabled"; const TPC_PREF = "network.cookie.cookieBehavior"; const CM_PREF = "privacy.trackingprotection.cryptomining.enabled"; const FP_PREF = "privacy.trackingprotection.fingerprinting.enabled"; -const ST_PREF = "privacy.socialtracking.block_cookies.enabled"; ChromeUtils.import( "resource://testing-common/CustomizableUITestUtils.jsm", @@ -18,12 +17,29 @@ registerCleanupFunction(function() { Services.prefs.clearUserPref(CAT_PREF); Services.prefs.clearUserPref(CM_PREF); Services.prefs.clearUserPref(FP_PREF); - Services.prefs.clearUserPref(ST_PREF); }); -add_task(async function testCookieCategoryLabels() { +add_task(async function testSubcategoryLabels() { await BrowserTestUtils.withNewTab("http://www.example.com", async function() { let categoryItem = document.getElementById( + "protections-popup-category-tracking-protection" + ); + + Services.prefs.setBoolPref(TP_PREF, true); + await TestUtils.waitForCondition( + () => categoryItem.classList.contains("blocked"), + "The category item has updated correctly" + ); + ok(categoryItem.classList.contains("blocked")); + + Services.prefs.setBoolPref(TP_PREF, false); + await TestUtils.waitForCondition( + () => !categoryItem.classList.contains("blocked"), + "The category item has updated correctly" + ); + ok(!categoryItem.classList.contains("blocked")); + + categoryItem = document.getElementById( "protections-popup-category-cookies" ); let categoryLabelDisabled = document.getElementById( @@ -151,79 +167,41 @@ add_task(async function testCookieCategoryLabels() { !categoryLabelDisabled.hidden && categoryLabelEnabled.hidden ); - }); -}); - -let categoryItems = [ - "protections-popup-category-tracking-protection", - "protections-popup-category-socialblock", - "protections-popup-category-cookies", - "protections-popup-category-cryptominers", - "protections-popup-category-fingerprinters", -].map(id => document.getElementById(id)); - -let categoryEnabledPrefs = [TP_PREF, ST_PREF, TPC_PREF, CM_PREF, FP_PREF]; - -let detectedStateFlags = [ - Ci.nsIWebProgressListener.STATE_BLOCKED_TRACKING_CONTENT, - Ci.nsIWebProgressListener.STATE_BLOCKED_SOCIALTRACKING_CONTENT, - Ci.nsIWebProgressListener.STATE_COOKIES_LOADED, - Ci.nsIWebProgressListener.STATE_BLOCKED_CRYPTOMINING_CONTENT, - Ci.nsIWebProgressListener.STATE_BLOCKED_FINGERPRINTING_CONTENT, -]; - -async function waitForClass(item, className, shouldBePresent = true) { - await TestUtils.waitForCondition(() => { - return item.classList.contains(className) == shouldBePresent; - }, `Target class ${className} should be ${shouldBePresent ? "present" : "not present"} on item ${item.id}`); - - ok( - item.classList.contains(className) == shouldBePresent, - `item.classList.contains(${className}) is ${shouldBePresent} for ${item.id}` - ); -} - -add_task(async function testCategorySections() { - for (let pref of categoryEnabledPrefs) { - if (pref == TPC_PREF) { - Services.prefs.setIntPref(TPC_PREF, Ci.nsICookieService.BEHAVIOR_ACCEPT); - } else { - Services.prefs.setBoolPref(pref, false); - } - } - - await BrowserTestUtils.withNewTab("http://www.example.com", async function() { - for (let item of categoryItems) { - await waitForClass(item, "notFound"); - await waitForClass(item, "blocked", false); - } - - // For every item, we enable the category and spoof a content blocking event, - // and check that .notFound goes away and .blocked is set. Then we disable the - // category and checks that .blocked goes away, and .notFound is still unset. - let contentBlockingState = 0; - for (let i = 0; i < categoryItems.length; i++) { - let itemToTest = categoryItems[i]; - let enabledPref = categoryEnabledPrefs[i]; - contentBlockingState |= detectedStateFlags[i]; - if (enabledPref == TPC_PREF) { - Services.prefs.setIntPref( - TPC_PREF, - Ci.nsICookieService.BEHAVIOR_REJECT - ); - } else { - Services.prefs.setBoolPref(enabledPref, true); - } - gProtectionsHandler.onContentBlockingEvent(contentBlockingState); - await waitForClass(itemToTest, "notFound", false); - await waitForClass(itemToTest, "blocked", true); - if (enabledPref == TPC_PREF) { - Services.prefs.setIntPref(TPC_PREF, Ci.nsICookieService.BEHAVIOR_ALLOW); - } else { - Services.prefs.setBoolPref(enabledPref, false); - } - await waitForClass(itemToTest, "notFound", false); - await waitForClass(itemToTest, "blocked", false); - } + + categoryItem = document.getElementById( + "protections-popup-category-fingerprinters" + ); + + Services.prefs.setBoolPref(FP_PREF, true); + await TestUtils.waitForCondition( + () => categoryItem.classList.contains("blocked"), + "The category item has updated correctly" + ); + ok(categoryItem.classList.contains("blocked")); + + Services.prefs.setBoolPref(FP_PREF, false); + await TestUtils.waitForCondition( + () => !categoryItem.classList.contains("blocked"), + "The category item has updated correctly" + ); + ok(!categoryItem.classList.contains("blocked")); + + categoryItem = document.getElementById( + "protections-popup-category-cryptominers" + ); + + Services.prefs.setBoolPref(CM_PREF, true); + await TestUtils.waitForCondition( + () => categoryItem.classList.contains("blocked"), + "The category item has updated correctly" + ); + ok(categoryItem.classList.contains("blocked")); + + Services.prefs.setBoolPref(CM_PREF, false); + await TestUtils.waitForCondition( + () => !categoryItem.classList.contains("blocked"), + "The category item has updated correctly" + ); + ok(!categoryItem.classList.contains("blocked")); }); }); diff --git a/browser/components/controlcenter/content/protectionsPanel.inc.xul b/browser/components/controlcenter/content/protectionsPanel.inc.xul index dce8a7ddeae1..8a36a4678087 100644 --- a/browser/components/controlcenter/content/protectionsPanel.inc.xul +++ b/browser/components/controlcenter/content/protectionsPanel.inc.xul @@ -63,21 +63,21 @@ @@ -88,32 +88,30 @@ hidden="true"> - - &protections.notBlocking2.label; + aria-level="2">&protections.blocking.label; + - &protections.notFound.label; diff --git a/browser/locales/en-US/chrome/browser/browser.dtd b/browser/locales/en-US/chrome/browser/browser.dtd index 44408beb4374..1fd606ab5881 100644 --- a/browser/locales/en-US/chrome/browser/browser.dtd +++ b/browser/locales/en-US/chrome/browser/browser.dtd @@ -749,12 +749,11 @@ you can use these alternative items. Otherwise, their values should be empty. - - - + + - diff --git a/browser/themes/shared/controlcenter/panel.inc.css b/browser/themes/shared/controlcenter/panel.inc.css index d7b08a2b6a24..5257fd357307 100644 --- a/browser/themes/shared/controlcenter/panel.inc.css +++ b/browser/themes/shared/controlcenter/panel.inc.css @@ -637,8 +637,7 @@ description#identity-popup-content-verifier, } #protections-popup-blocking-section-header, -#protections-popup-not-blocking-section-header, -#protections-popup-not-found-section-header { +#protections-popup-not-blocking-section-header { margin: 0; padding: var(--vertical-section-padding) var(--horizontal-padding); color: #737373; @@ -669,43 +668,32 @@ description#identity-popup-content-verifier, margin: 0; } -#protections-popup-no-trackers-found-description:not([hidden]) ~ #protections-popup-content { - display: none; -} - -#protections-popup-blocking-section-header, -#protections-popup-not-blocking-section-header, -#protections-popup-not-found-section-header { - display: none; -} - #protections-popup-blocking-section-header { grid-row: 1; } #protections-popup:not([hasException]) .protections-popup-category.blocked:not([hidden]) ~ #protections-popup-blocking-section-header, -.protections-popup-category.notFound ~ #protections-popup-not-found-section-header, -.protections-popup-category:not(.blocked):not(.notFound) ~ #protections-popup-not-blocking-section-header { +.protections-popup-category:not(.blocked):not([hidden]) ~ #protections-popup-not-blocking-section-header { display: flex; } -#protections-popup:not([hasException]) #protections-popup-category-socialblock.blocked { +#protections-popup:not([hasException]) #protections-popup-category-tracking-protection.blocked { grid-row: 2; } -#protections-popup:not([hasException]) #protections-popup-category-cookies.blocked { +#protections-popup:not([hasException]) #protections-popup-category-socialblock.blocked { grid-row: 3; } -#protections-popup:not([hasException]) #protections-popup-category-tracking-protection.blocked { +#protections-popup:not([hasException]) #protections-popup-category-cookies.blocked { grid-row: 4; } -#protections-popup:not([hasException]) #protections-popup-category-fingerprinters.blocked { +#protections-popup:not([hasException]) #protections-popup-category-cryptominers.blocked { grid-row: 5; } -#protections-popup:not([hasException]) #protections-popup-category-cryptominers.blocked { +#protections-popup:not([hasException]) #protections-popup-category-fingerprinters.blocked { grid-row: 6; } @@ -728,64 +716,31 @@ description#identity-popup-content-verifier, text-decoration: none; } -#protections-popup-category-socialblock { - grid-row: 8; -} - -#protections-popup-category-cookies { - grid-row: 9; +#protections-popup:not([hasException]) #protections-popup-blocking-section-header:not([hidden]) + #protections-popup-not-blocking-section-header { + border-top: 1px solid var(--panel-separator-color); + margin-top: 10px; } #protections-popup-category-tracking-protection { + grid-row: 8; +} + +#protections-popup-category-socialblock { + grid-row: 9; +} + +#protections-popup-category-cookies { grid-row: 10; } -#protections-popup-category-fingerprinters { +#protections-popup-category-cryptominers { grid-row: 11; } -#protections-popup-category-cryptominers { +#protections-popup-category-fingerprinters { grid-row: 12; } -#protections-popup-not-found-section-header { - grid-row: 13; -} - -.protections-popup-category.notFound { - color: var(--panel-disabled-color); - fill: var(--panel-disabled-color); -} - -.protections-popup-category.notFound:hover { - background: none; -} - -/* Hide the arrow for not found items */ -.protections-popup-category.notFound::after { - display: none; -} - -#protections-popup-category-socialblock.notFound { - grid-row: 14 !important; -} - -#protections-popup-category-cookies.notFound { - grid-row: 15 !important; -} - -#protections-popup-category-tracking-protection.notFound { - grid-row: 16 !important; -} - -#protections-popup-category-fingerprinters.notFound { - grid-row: 17 !important; -} - -#protections-popup-category-cryptominers.notFound { - grid-row: 18 !important; -} - .tracking-protection-icon { list-style-image: url(chrome://browser/skin/controlcenter/tracker-image.svg); }