Bug 1317804 - Hide the checkbox toggle in about:privatebrowsing. r=johannh, a=jcristau
authorMike Conley <mconley@mozilla.com>
Sat, 19 Nov 2016 17:25:58 -0500
changeset 352682 fbb6f22204acbf6491847eb1448f7b934c1d351d
parent 352681 e023d3a95949000feaeec3156d3a4494096f72a5
child 352683 69b1f1cd3ae87ab25419813e20bbc0dead2a10e7
push id6795
push userjlund@mozilla.com
push dateMon, 23 Jan 2017 14:19:46 +0000
treeherdermozilla-esr52@76101b503191 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh, jcristau
bugs1317804, 1309316
milestone52.0a2
Bug 1317804 - Hide the checkbox toggle in about:privatebrowsing. r=johannh, a=jcristau This was originally taking advantage of the fact that we were hiding HTML checkboxes by default via common.inc.css. Since bug 1309316 landed, we don't hide those checkboxes by default anymore. So now we special-case about:privatebrowsing to hide the checkbox. MozReview-Commit-ID: CaImnCPu8cE
browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -130,16 +130,33 @@ a.button {
   padding: 5px 40px;
   background-color: #381e59;
   border: 1px solid #43256a;
   border-radius: 4px;
   text-decoration: none;
   display: inline-block;
 }
 
+/**
+ * We want to hide the checkbox in lieu of the toggle-btn
+ * "slider toggle". We need to make the toggle keyboard
+ * focusable, however, which is not possible if it's
+ * display:none. We work around this by making the toggle
+ * invisible but still present in the display list, allowing
+ * it to receive keyboard events. When it is focused by keyboard,
+ * we use the -moz-focusring selector on the invisible checkbox
+ * to show a focus ring around the slider toggle.
+ */
+.toggle-input {
+  opacity: 0;
+  width: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
 .toggle + .toggle-btn {
   box-sizing: border-box;
   cursor: pointer;
   min-width: 60px;
   height: 24px;
   border-radius: 12px;
   background-color: var(--color-grey);
   border: 1px var(--color-grey) solid;