Bug 1341045 - Use checked class instead of introducing active class. r=jryans
MozReview-Commit-ID: 6fC7hVRSvjh
--- 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,