Bug 1175689 - Group the existing site identity URL bar icon with the tracking protection shield when TP is enabled. r=ttaubert

2024-09-13 09:24:08 -07:00 · 2015-07-13 18:38:13 +01:00 · 2015-07-13 18:38:13 +01:00 · 32fc0db924
commit 32fc0db924
parent a2075a866b
10 changed files with 103 additions and 32 deletions
--- a/browser/base/content/browser-trackingprotection.js
+++ b/browser/base/content/browser-trackingprotection.js
@ -12,6 +12,7 @@ let TrackingProtection = {
    let $ = selector => document.querySelector(selector);
    this.container = $("#tracking-protection-container");
    this.content = $("#tracking-protection-content");
+    this.icon = $("#tracking-protection-icon");

    this.updateEnabled();
    Services.prefs.addObserver(this.PREF_ENABLED_GLOBALLY, this, false);
@ -60,15 +61,14 @@ let TrackingProtection = {
      STATE_BLOCKED_TRACKING_CONTENT, STATE_LOADED_TRACKING_CONTENT
    } = Ci.nsIWebProgressListener;

-    if (state & STATE_BLOCKED_TRACKING_CONTENT) {
-      this.content.setAttribute("block-active", true);
-      this.content.removeAttribute("block-disabled");
-    } else if (state & STATE_LOADED_TRACKING_CONTENT) {
-      this.content.setAttribute("block-disabled", true);
-      this.content.removeAttribute("block-active");
-    } else {
-      this.content.removeAttribute("block-disabled");
-      this.content.removeAttribute("block-active");
+    for (let element of [this.icon, this.content]) {
+      if (state & STATE_BLOCKED_TRACKING_CONTENT) {
+        element.setAttribute("state", "blocked-tracking-content");
+      } else if (state & STATE_LOADED_TRACKING_CONTENT) {
+        element.setAttribute("state", "loaded-tracking-content");
+      } else {
+        element.removeAttribute("state");
+      }
    }

    // Telemetry for state change.
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@ -762,6 +762,7 @@
                   onclick="gIdentityHandler.handleIdentityButtonEvent(event);"
                   onkeypress="gIdentityHandler.handleIdentityButtonEvent(event);"
                   ondragstart="gIdentityHandler.onDragStart(event);">
+                <image id="tracking-protection-icon"/>
                <image id="page-proxy-favicon"
                       consumeanchor="identity-box"
                       onclick="PageProxyClickHandler(event);"
--- a/browser/base/content/test/general/browser_trackingUI_1.js
+++ b/browser/base/content/test/general/browser_trackingUI_1.js
@ -45,9 +45,10 @@ function clickButton(sel) {
 function testBenignPage() {
  info("Non-tracking content must not be blocked");
  ok (!TrackingProtection.container.hidden, "The container is visible");
-  ok (!TrackingProtection.content.hasAttribute("block-disabled"), "blocking not disabled");
-  ok (!TrackingProtection.content.hasAttribute("block-active"), "blocking is not active");
+  ok (!TrackingProtection.content.hasAttribute("state"), "content: no state");
+  ok (!TrackingProtection.icon.hasAttribute("state"), "icon: no state");

+  ok (hidden("#tracking-protection-icon"), "icon is hidden");
  ok (hidden("#tracking-action-block"), "blockButton is hidden");
  ok (hidden("#tracking-action-unblock"), "unblockButton is hidden");

@ -60,9 +61,12 @@ function testBenignPage() {
 function testTrackingPage() {
  info("Tracking content must be blocked");
  ok (!TrackingProtection.container.hidden, "The container is visible");
-  ok (!TrackingProtection.content.hasAttribute("block-disabled"), "blocking not disabled");
-  ok (TrackingProtection.content.hasAttribute("block-active"), "blocking is active");
+  is (TrackingProtection.content.getAttribute("state"), "blocked-tracking-content",
+      'content: state="blocked-tracking-content"');
+  is (TrackingProtection.icon.getAttribute("state"), "blocked-tracking-content",
+      'icon: state="blocked-tracking-content"');

+  ok (!hidden("#tracking-protection-icon"), "icon is visible");
  ok (hidden("#tracking-action-block"), "blockButton is hidden");
  ok (!hidden("#tracking-action-unblock"), "unblockButton is visible");

@ -72,12 +76,15 @@ function testTrackingPage() {
  ok (!hidden("#tracking-blocked"), "labelTrackingBlocked is visible");
 }

-function testTrackingPageWhitelisted() {
+function testTrackingPageUnblocked() {
  info("Tracking content must be white-listed and not blocked");
  ok (!TrackingProtection.container.hidden, "The container is visible");
-  ok (TrackingProtection.content.hasAttribute("block-disabled"), "blocking is disabled");
-  ok (!TrackingProtection.content.hasAttribute("block-active"), "blocking is not active");
+  is (TrackingProtection.content.getAttribute("state"), "loaded-tracking-content",
+      'content: state="loaded-tracking-content"');
+  is (TrackingProtection.icon.getAttribute("state"), "loaded-tracking-content",
+      'icon: state="loaded-tracking-content"');

+  ok (!hidden("#tracking-protection-icon"), "icon is visible");
  ok (!hidden("#tracking-action-block"), "blockButton is visible");
  ok (hidden("#tracking-action-unblock"), "unblockButton is hidden");

@ -97,17 +104,15 @@ function* testTrackingProtectionForTab(tab) {
  testTrackingPage();

  info("Disable TP for the page (which reloads the page)");
+  let tabReloadPromise = promiseTabLoadEvent(tab);
  clickButton("#tracking-action-unblock");
-
-  info("Wait for tab to reload following TP white-listing");
-  yield promiseTabLoadEvent(tab);
-  testTrackingPageWhitelisted();
+  yield tabReloadPromise;
+  testTrackingPageUnblocked();

  info("Re-enable TP for the page (which reloads the page)");
+  tabReloadPromise = promiseTabLoadEvent(tab);
  clickButton("#tracking-action-block");
-
-  info("Wait for tab to reload following TP black-listing");
-  yield promiseTabLoadEvent(tab);
+  yield tabReloadPromise;
  testTrackingPage();
 }

--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@ -51,6 +51,8 @@ browser.jar:
  skin/classic/browser/identity-mixed-active-blocked.svg    (../shared/identity-block/identity-mixed-active-blocked.svg)
  skin/classic/browser/identity-mixed-passive-loaded.svg    (../shared/identity-block/identity-mixed-passive-loaded.svg)
  skin/classic/browser/identity-mixed-active-loaded.svg     (../shared/identity-block/identity-mixed-active-loaded.svg)
+  skin/classic/browser/tracking-protection-16.svg           (../shared/identity-block/tracking-protection-16.svg)
+  skin/classic/browser/tracking-protection-disabled-16.svg  (../shared/identity-block/tracking-protection-disabled-16.svg)
  skin/classic/browser/Info.png
  skin/classic/browser/magnifier.png                        (../shared/magnifier.png)
  skin/classic/browser/magnifier@2x.png                     (../shared/magnifier@2x.png)
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@ -55,6 +55,8 @@ browser.jar:
  skin/classic/browser/identity-mixed-active-blocked.svg    (../shared/identity-block/identity-mixed-active-blocked.svg)
  skin/classic/browser/identity-mixed-passive-loaded.svg    (../shared/identity-block/identity-mixed-passive-loaded.svg)
  skin/classic/browser/identity-mixed-active-loaded.svg     (../shared/identity-block/identity-mixed-active-loaded.svg)
+  skin/classic/browser/tracking-protection-16.svg           (../shared/identity-block/tracking-protection-16.svg)
+  skin/classic/browser/tracking-protection-disabled-16.svg  (../shared/identity-block/tracking-protection-disabled-16.svg)
  skin/classic/browser/Info.png
  skin/classic/browser/keyhole-circle.png
  skin/classic/browser/keyhole-circle@2x.png
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@ -243,7 +243,7 @@
  background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
 }

-#tracking-protection-content[block-disabled]  {
+#tracking-protection-content[state="loaded-tracking-content"]  {
  background-image: url("chrome://browser/skin/controlcenter/tracking-protection-disabled.svg");
 }

@ -252,13 +252,12 @@
  margin: 1em 0 0;
 }

-#tracking-protection-content[block-active] > #tracking-not-detected,
-#tracking-protection-content[block-disabled] > #tracking-not-detected,
-#tracking-protection-content:not([block-active]) > #tracking-blocked,
-#tracking-protection-content:not([block-active]) #tracking-action-unblock,
-#tracking-protection-content:not([block-disabled]) > #tracking-loaded,
-#tracking-protection-content:not([block-disabled]) #tracking-action-block,
-#tracking-protection-content:not([block-active]):not([block-disabled]) > #tracking-actions {
+#tracking-protection-content[state] > #tracking-not-detected,
+#tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked,
+#tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock,
+#tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded,
+#tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block,
+#tracking-protection-content:not([state]) > #tracking-actions {
  display: none;
 }

--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@ -63,7 +63,23 @@
  background-image: var(--identity-box-chrome-background-image);
 }

-/* page proxy icon */
+/* TRACKING PROTECTION ICON */
+
+#tracking-protection-icon {
+  width: 16px;
+  height: 16px;
+  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
+}
+
+#tracking-protection-icon[state="loaded-tracking-content"] {
+  list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
+}
+
+#tracking-protection-icon:not([state]) {
+  display: none;
+}
+
+/* MAIN IDENTITY ICON */

 #page-proxy-favicon {
  width: 16px;
--- a/browser/themes/shared/identity-block/tracking-protection-16.svg
+++ b/browser/themes/shared/identity-block/tracking-protection-16.svg
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="16" height="16" viewBox="0 0 16 16">
+  <defs>
+    <path id="shape-shield-outer" d="M8,1L2.8,1.9C2.4,1.9,2,2.4,2,2.8C2,4,2,6.1,2.1,7.1c0.3,2.7,0.8,4,1.9,5.6C5.6,14.7,8,15,8,15s2.4-0.3,4-2.4 c1.2-1.5,1.7-2.9,1.9-5.6C14,6.1,14,4,14,2.8c0-0.5-0.4-0.9-0.8-1L8,1L8,1z"/>
+    <path id="shape-shield-inner" d="M8,2l5,0.8c0,2,0,3.5-0.1,4.1c-0.3,2.7-0.8,3.8-1.7,5.1c-1.1,1.5-2.7,1.9-3.2,2c-0.4-0.1-2.1-0.5-3.2-2 c-1-1.3-1.5-2.4-1.7-5.1C3,6.3,3,4.8,3,2.8L8,2"/>
+    <path id="shape-shield-detail" d="M8,13c-0.5-0.1-1.6-0.5-2.4-1.5c-0.9-1.2-1.3-2.1-1.5-4.6C4,6.3,4,5.2,4,3.7L8,3 V13z"/>
+
+    <mask id="mask-shield-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-shield-outer" fill="#fff" />
+      <use xlink:href="#shape-shield-inner" fill="#000" />
+      <use xlink:href="#shape-shield-detail" fill="#fff" />
+    </mask>
+  </defs>
+
+  <use xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)" fill="#808080" />
+</svg>
--- a/browser/themes/shared/identity-block/tracking-protection-disabled-16.svg
+++ b/browser/themes/shared/identity-block/tracking-protection-disabled-16.svg
@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="16" height="16" viewBox="0 0 16 16">
+  <defs>
+    <path id="shape-shield-outer" d="M8,1L2.8,1.9C2.4,1.9,2,2.4,2,2.8C2,4,2,6.1,2.1,7.1c0.3,2.7,0.8,4,1.9,5.6C5.6,14.7,8,15,8,15s2.4-0.3,4-2.4 c1.2-1.5,1.7-2.9,1.9-5.6C14,6.1,14,4,14,2.8c0-0.5-0.4-0.9-0.8-1L8,1L8,1z"/>
+    <path id="shape-shield-inner" d="M8,2l5,0.8c0,2,0,3.5-0.1,4.1c-0.3,2.7-0.8,3.8-1.7,5.1c-1.1,1.5-2.7,1.9-3.2,2c-0.4-0.1-2.1-0.5-3.2-2 c-1-1.3-1.5-2.4-1.7-5.1C3,6.3,3,4.8,3,2.8L8,2"/>
+    <path id="shape-shield-detail" d="M8,13c-0.5-0.1-1.6-0.5-2.4-1.5c-0.9-1.2-1.3-2.1-1.5-4.6C4,6.3,4,5.2,4,3.7L8,3 V13z"/>
+
+    <mask id="mask-shield-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-shield-outer" fill="#fff" />
+      <use xlink:href="#shape-shield-inner" fill="#000" />
+      <use xlink:href="#shape-shield-detail" fill="#fff" />
+      <line x1="3" y1="15" x2="15" y2="3" stroke="#000" stroke-width="2" />
+    </mask>
+  </defs>
+
+  <use xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)" fill="#808080" />
+  <line x1="3" y1="14" x2="15" y2="2" stroke="#d92d21" stroke-width="2" />
+</svg>
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@ -52,6 +52,8 @@ browser.jar:
        skin/classic/browser/identity-mixed-active-blocked.svg       (../shared/identity-block/identity-mixed-active-blocked.svg)
        skin/classic/browser/identity-mixed-passive-loaded.svg       (../shared/identity-block/identity-mixed-passive-loaded.svg)
        skin/classic/browser/identity-mixed-active-loaded.svg        (../shared/identity-block/identity-mixed-active-loaded.svg)
+        skin/classic/browser/tracking-protection-16.svg              (../shared/identity-block/tracking-protection-16.svg)
+        skin/classic/browser/tracking-protection-disabled-16.svg     (../shared/identity-block/tracking-protection-disabled-16.svg)
        skin/classic/browser/keyhole-forward-mask.svg
        skin/classic/browser/KUI-background.png
        skin/classic/browser/livemark-folder.png