Bug 1341045 - Use checked class instead of introducing active class. r=jryans draft
authorTim Nguyen <ntim.bugs@gmail.com>
Sat, 25 Feb 2017 15:42:26 +0000
changeset 493261 347c24ecabe902a225841c063327266340aa67ee
parent 493260 5d295a3a46f651659fdff14fcd317d33fc01b9b3
child 493262 a3deaeae5e9ec8305a6045ea1330e668538e7286
push id47707
push userbmo:jryans@gmail.com
push dateFri, 03 Mar 2017 18:11:38 +0000
reviewersjryans
bugs1341045
milestone54.0a1
Bug 1341045 - Use checked class instead of introducing active class. r=jryans MozReview-Commit-ID: 6fC7hVRSvjh
devtools/client/responsive.html/components/global-toolbar.js
devtools/client/responsive.html/index.css
devtools/client/responsive.html/test/browser/browser_touch_simulation.js
devtools/client/responsive.html/test/browser/head.js
--- a/devtools/client/responsive.html/components/global-toolbar.js
+++ b/devtools/client/responsive.html/components/global-toolbar.js
@@ -45,17 +45,17 @@ module.exports = createClass({
       onChangePixelRatio,
       onChangeTouchSimulation,
       onExit,
       onScreenshot,
     } = this.props;
 
     let touchButtonClass = "toolbar-button devtools-button";
     if (touchSimulation.enabled) {
-      touchButtonClass += " active";
+      touchButtonClass += " checked";
     }
 
     return dom.header(
       {
         id: "global-toolbar",
         className: "container",
       },
       dom.span(
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -78,18 +78,17 @@ body,
 }
 
 .toolbar-button:empty:hover:not(:disabled),
 .toolbar-button:empty:-moz-any(:hover:active, .checked):not(:disabled) {
   /* Reset background from .devtools-button */
   background: none;
 }
 
-.toolbar-button:active::before,
-.toolbar-button.active::before {
+.toolbar-button:active::before {
   filter: var(--checked-icon-filter);
 }
 
 select {
   -moz-appearance: none;
   background-color: var(--theme-toolbar-background);
   background-image: var(--viewport-selection-arrow);
   background-position: 100% 50%;
--- a/devtools/client/responsive.html/test/browser/browser_touch_simulation.js
+++ b/devtools/client/responsive.html/test/browser/browser_touch_simulation.js
@@ -166,27 +166,27 @@ function* testWithMetaViewportDisabled(u
       "300ms delay between touch events and mouse events should work");
   });
 }
 
 function testTouchButton(ui) {
   let { document } = ui.toolWindow;
   let touchButton = document.querySelector("#global-touch-simulation-button");
 
-  ok(touchButton.classList.contains("active"),
+  ok(touchButton.classList.contains("checked"),
     "Touch simulation is active at end of test.");
 
   touchButton.click();
 
-  ok(!touchButton.classList.contains("active"),
+  ok(!touchButton.classList.contains("checked"),
     "Touch simulation is stopped on click.");
 
   touchButton.click();
 
-  ok(touchButton.classList.contains("active"),
+  ok(touchButton.classList.contains("checked"),
     "Touch simulation is started on click.");
 }
 
 function* waitBootstrap(ui) {
   let { store } = ui.toolWindow;
 
   yield waitUntilState(store, state => state.viewports.length == 1);
   yield waitForFrameLoad(ui, TEST_URL);
--- a/devtools/client/responsive.html/test/browser/head.js
+++ b/devtools/client/responsive.html/test/browser/head.js
@@ -366,17 +366,17 @@ function waitForClientClose(ui) {
 
 function* testTouchEventsOverride(ui, expected) {
   let { document } = ui.toolWindow;
   let touchButton = document.querySelector("#global-touch-simulation-button");
 
   let flag = yield ui.emulationFront.getTouchEventsOverride();
   is(flag === Ci.nsIDocShell.TOUCHEVENTS_OVERRIDE_ENABLED, expected,
     `Touch events override should be ${expected ? "enabled" : "disabled"}`);
-  is(touchButton.classList.contains("active"), expected,
+  is(touchButton.classList.contains("checked"), expected,
     `Touch simulation button should be ${expected ? "" : "in"}active.`);
 }
 
 function testViewportDeviceSelectLabel(ui, expected) {
   info("Test viewport's device select label");
 
   let select = ui.toolWindow.document.querySelector(".viewport-device-selector");
   is(select.selectedOptions[0].textContent, expected,