Bug 1175239 - Replace tracking protection drop-down control with a button;r=ttaubert
authorBrian Grinstead <bgrinstead@mozilla.com>
Wed, 01 Jul 2015 11:50:57 -0700
changeset 251095 90f85a1e2ac45f398ea3e120196ca9aeb93e6579
parent 251094 00ff94876faeee59e5a004f5c045e9d9cbcd3c35
child 251096 138bfb083317b9834a4776e28a71c710c6d73181
push id61766
push usercbook@mozilla.com
push dateThu, 02 Jul 2015 13:47:40 +0000
treeherdermozilla-inbound@8ee689f2899a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersttaubert
bugs1175239
milestone42.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1175239 - Replace tracking protection drop-down control with a button;r=ttaubert
browser/base/content/test/general/browser_trackingUI_1.js
browser/components/controlcenter/content/panel.inc.xul
browser/themes/shared/controlcenter/panel.inc.css
--- a/browser/base/content/test/general/browser_trackingUI_1.js
+++ b/browser/base/content/test/general/browser_trackingUI_1.js
@@ -22,40 +22,55 @@ registerCleanupFunction(function() {
 
 function hidden(sel) {
   let win = gBrowser.ownerGlobal;
   let el = win.document.querySelector(sel);
   let display = win.getComputedStyle(el).getPropertyValue("display", null);
   return display === "none";
 }
 
+function clickButton(sel) {
+  let win = gBrowser.ownerGlobal;
+  let el = win.document.querySelector(sel);
+  el.doCommand();
+}
+
 function testBenignPage() {
   ok (!TrackingProtection.content.hasAttribute("block-disabled"), "blocking not disabled");
   ok (!TrackingProtection.content.hasAttribute("block-active"), "blocking is not active");
 
+  ok (hidden("#tracking-action-block"), "blockButton is hidden");
+  ok (hidden("#tracking-action-unblock"), "unblockButton is hidden");
+
   // Make sure that the no tracking elements message appears
   ok (!hidden("#tracking-not-detected"), "labelNoTracking is visible");
   ok (hidden("#tracking-loaded"), "labelTrackingLoaded is hidden");
   ok (hidden("#tracking-blocked"), "labelTrackingBlocked is hidden");
 }
 
 function testTrackingPage() {
   ok (!TrackingProtection.content.hasAttribute("block-disabled"), "blocking not disabled");
   ok (TrackingProtection.content.hasAttribute("block-active"), "blocking is active");
 
+  ok (hidden("#tracking-action-block"), "blockButton is hidden");
+  ok (!hidden("#tracking-action-unblock"), "unblockButton is visible");
+
   // Make sure that the blocked tracking elements message appears
   ok (hidden("#tracking-not-detected"), "labelNoTracking is hidden");
   ok (hidden("#tracking-loaded"), "labelTrackingLoaded is hidden");
   ok (!hidden("#tracking-blocked"), "labelTrackingBlocked is visible");
 }
 
 function testTrackingPageWhitelisted() {
   ok (TrackingProtection.content.hasAttribute("block-disabled"), "blocking is disabled");
   ok (!TrackingProtection.content.hasAttribute("block-active"), "blocking is not active");
 
+  ok (!hidden("#tracking-action-block"), "blockButton is visible");
+  ok (hidden("#tracking-action-unblock"), "unblockButton is hidden");
+
   // Make sure that the blocked tracking elements message appears
   ok (hidden("#tracking-not-detected"), "labelNoTracking is hidden");
   ok (!hidden("#tracking-loaded"), "labelTrackingLoaded is visible");
   ok (hidden("#tracking-blocked"), "labelTrackingBlocked is hidden");
 }
 
 add_task(function* () {
   yield updateTrackingProtectionDatabase();
@@ -77,25 +92,25 @@ add_task(function* () {
 
   info("Point tab to a test page containing tracking elements");
   yield promiseTabLoadEvent(tab, TRACKING_PAGE);
 
   info("Tracking content must be blocked");
   testTrackingPage();
 
   info("Disable Tracking Content Protection for the page (which reloads the page)");
-  TrackingProtection.disableForCurrentPage();
+  clickButton("#tracking-action-unblock");
 
   info("Wait for tab to reload following tracking-protection page white-listing");
   yield promiseTabLoadEvent(tab);
 
   info("Tracking content must be white-listed (NOT blocked)");
   testTrackingPageWhitelisted();
 
   info("Re-enable Tracking Content Protection for the page (which reloads the page)");
-  TrackingProtection.enableForCurrentPage();
+  clickButton("#tracking-action-block");
 
   info("Wait for tab to reload following tracking-protection page white-listing");
   yield promiseTabLoadEvent(tab);
 
   info("Tracking content must be blocked");
   testTrackingPage();
 });
--- a/browser/components/controlcenter/content/panel.inc.xul
+++ b/browser/components/controlcenter/content/panel.inc.xul
@@ -48,32 +48,26 @@
                  crop="end">&trackingProtection.detectedBlocked;</label>
           <label id="tracking-loaded"
                  class="identity-popup-text"
                  crop="end">&trackingProtection.detectedNotBlocked;</label>
           <label id="tracking-not-detected"
                  class="identity-popup-text"
                  crop="end">&trackingProtection.notDetected;</label>
 
-          <button id="tracking-actions"
-            type="menu" label="&trackingContentBlocked.options;"
-            sizetopopup="none">
-            <menupopup>
-              <menuitem
-                id="tracking-action-unblock"
-                label="&trackingProtection.unblock.label;"
-                accesskey="&trackingProtection.unblock.accesskey;"
-                oncommand="TrackingProtection.disableForCurrentPage();"/>
-              <menuitem
-                id="tracking-action-block"
-                label="&trackingProtection.block.label;"
-                accesskey="&trackingProtection.block.accesskey;"
-                oncommand="TrackingProtection.enableForCurrentPage();"/>
-            </menupopup>
-          </button>
+          <button id="tracking-action-unblock"
+                  label="&trackingProtection.unblock.label;"
+                  class="identity-popup-button"
+                  accesskey="&trackingProtection.unblock.accesskey;"
+                  oncommand="TrackingProtection.disableForCurrentPage();" />
+          <button id="tracking-action-block"
+                  label="&trackingProtection.block.label;"
+                  class="identity-popup-button"
+                  accesskey="&trackingProtection.block.accesskey;"
+                  oncommand="TrackingProtection.enableForCurrentPage();" />
         </vbox>
       </hbox>
 
       <!-- Permissions Section -->
       <hbox id="identity-popup-permissions" class="identity-popup-section">
         <vbox id="identity-popup-permissions-content" flex="1">
           <label class="identity-popup-text identity-popup-headline"
                  value="&identity.permissions;"/>
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -67,16 +67,42 @@
 
 #identity-popup-securityView:-moz-locale-dir(rtl),
 #identity-popup-security-content:-moz-locale-dir(rtl),
 #identity-popup-permissions-content:-moz-locale-dir(rtl),
 #tracking-protection-content:-moz-locale-dir(rtl) {
   background-position: calc(100% - 1em) 1em;
 }
 
+/* IN-CONTENT-PREF STYLE BUTTONS */
+
+.identity-popup-button {
+  -moz-appearance: none;
+  margin: 5px 0;
+  height: 30px;
+  color: #333;
+  line-height: 20px;
+  border: 1px solid #c1c1c1;
+  border-radius: 2px;
+  background-color: #fbfbfb;
+}
+
+.identity-popup-button:not([disabled="true"]):hover {
+  background-color: #ebebeb;
+}
+
+.identity-popup-button:not([disabled="true"]):hover:active {
+  background-color: #dadada;
+}
+
+.identity-popup-button[disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 /* EXPAND BUTTON */
 
 .identity-popup-expander {
   margin: 0;
   padding: 4px 0;
   min-width: auto;
   width: 38px;
   border: 0 none;
@@ -206,17 +232,18 @@
 #tracking-protection-content {
   background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
 }
 
 #tracking-protection-content[block-disabled]  {
   background-image: url("chrome://browser/skin/controlcenter/tracking-protection-disabled.svg");
 }
 
-#tracking-actions {
+#tracking-action-block,
+#tracking-action-unblock {
   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,