mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-09 19:35:51 +00:00
Bug 1305777 - Remove old RDM. r=ochameau
MozReview-Commit-ID: gOvvF9bcDT --HG-- extra : rebase_source : 1a0773629ad429e6c485df4c2bf0348504a2c9c5
This commit is contained in:
J. Ryan Stinnett
parent
7bdffe1656
commit
49c743f7f5
@ -96,7 +96,6 @@ devtools/client/memory/test/chrome/*.html
|
||||
devtools/client/performance/components/test/test_jit_optimizations_01.html
|
||||
devtools/client/projecteditor/**
|
||||
devtools/client/responsive.html/test/browser/touch.html
|
||||
devtools/client/responsivedesign/**
|
||||
devtools/client/scratchpad/**
|
||||
devtools/client/shadereditor/**
|
||||
devtools/client/shared/*.jsm
|
||||
|
||||
@ -1094,29 +1094,6 @@ html|*#gcli-output-frame,
|
||||
-moz-box-pack: center;
|
||||
}
|
||||
|
||||
/* Responsive Mode */
|
||||
|
||||
.browserContainer[responsivemode] {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) {
|
||||
-moz-box-pack: end;
|
||||
}
|
||||
|
||||
.browserStack[responsivemode] {
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
.browserStack[responsivemode] {
|
||||
transition-property: min-width, max-width, min-height, max-height;
|
||||
}
|
||||
|
||||
.browserStack[responsivemode][notransition] {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* Translation */
|
||||
notification[value="translation"] {
|
||||
-moz-binding: url("chrome://browser/content/translation-infobar.xml#translationbar");
|
||||
|
||||
@ -187,19 +187,6 @@ devtools.jar:
|
||||
skin/images/debugger-toggleBreakpoints.svg (themes/images/debugger-toggleBreakpoints.svg)
|
||||
skin/images/tracer-icon.png (themes/images/tracer-icon.png)
|
||||
skin/images/tracer-icon@2x.png (themes/images/tracer-icon@2x.png)
|
||||
skin/images/responsivemode/responsive-se-resizer.png (themes/images/responsivemode/responsive-se-resizer.png)
|
||||
skin/images/responsivemode/responsive-se-resizer@2x.png (themes/images/responsivemode/responsive-se-resizer@2x.png)
|
||||
skin/images/responsivemode/responsive-vertical-resizer.png (themes/images/responsivemode/responsive-vertical-resizer.png)
|
||||
skin/images/responsivemode/responsive-vertical-resizer@2x.png (themes/images/responsivemode/responsive-vertical-resizer@2x.png)
|
||||
skin/images/responsivemode/responsive-horizontal-resizer.png (themes/images/responsivemode/responsive-horizontal-resizer.png)
|
||||
skin/images/responsivemode/responsive-horizontal-resizer@2x.png (themes/images/responsivemode/responsive-horizontal-resizer@2x.png)
|
||||
skin/images/responsivemode/responsiveui-rotate.png (themes/images/responsivemode/responsiveui-rotate.png)
|
||||
skin/images/responsivemode/responsiveui-rotate@2x.png (themes/images/responsivemode/responsiveui-rotate@2x.png)
|
||||
skin/images/responsivemode/responsiveui-touch.png (themes/images/responsivemode/responsiveui-touch.png)
|
||||
skin/images/responsivemode/responsiveui-touch@2x.png (themes/images/responsivemode/responsiveui-touch@2x.png)
|
||||
skin/images/responsivemode/responsiveui-screenshot.png (themes/images/responsivemode/responsiveui-screenshot.png)
|
||||
skin/images/responsivemode/responsiveui-screenshot@2x.png (themes/images/responsivemode/responsiveui-screenshot@2x.png)
|
||||
skin/images/responsivemode/responsiveui-home.png (themes/images/responsivemode/responsiveui-home.png)
|
||||
skin/images/toggle-tools.png (themes/images/toggle-tools.png)
|
||||
skin/images/toggle-tools@2x.png (themes/images/toggle-tools@2x.png)
|
||||
skin/images/dock-bottom.svg (themes/images/dock-bottom.svg)
|
||||
|
||||
@ -1,78 +0,0 @@
|
||||
# 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/.
|
||||
|
||||
# LOCALIZATION NOTE These strings are used inside the Responsive Mode
|
||||
# which is available from the Web Developer sub-menu -> 'Responsive Mode'.
|
||||
#
|
||||
# The correct localization of this file might be to keep it in
|
||||
# English, or another language commonly spoken among web developers.
|
||||
# You want to make that choice consistent across the developer tools.
|
||||
# A good criteria is the language in which you'd find the best
|
||||
# documentation on web development on the web.
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.rotate2): tooltip of the rotate button.
|
||||
responsiveUI.rotate2=Rotate
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.screenshot): tooltip of the screenshot button.
|
||||
responsiveUI.screenshot=Screenshot
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.userAgentPlaceholder): placeholder for the user agent input.
|
||||
responsiveUI.userAgentPlaceholder=Custom User Agent
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.screenshotGeneratedFilename): The auto generated filename.
|
||||
# The first argument (%1$S) is the date string in yyyy-mm-dd format and the second
|
||||
# argument (%2$S) is the time string in HH.MM.SS format.
|
||||
responsiveUI.screenshotGeneratedFilename=Screen Shot %1$S at %2$S
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.touch): tooltip of the touch button.
|
||||
responsiveUI.touch=Simulate touch events (page reload might be needed)
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.addPreset): label of the add preset button.
|
||||
responsiveUI.addPreset=Add Preset
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.removePreset): label of the remove preset button.
|
||||
responsiveUI.removePreset=Remove Preset
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.customResolution): label of the first item
|
||||
# in the menulist at the beginning of the toolbar. For %S is replace with the
|
||||
# current size of the page. For example: "400x600".
|
||||
responsiveUI.customResolution=%S (custom)
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.namedResolution): label of custom items with a name
|
||||
# in the menulist of the toolbar.
|
||||
# For example: "320x480 (phone)".
|
||||
responsiveUI.namedResolution=%S (%S)
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.customNamePromptTitle1): prompt title when asking
|
||||
# the user to specify a name for a new custom preset.
|
||||
responsiveUI.customNamePromptTitle1=Responsive Design Mode
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.close1): tooltip text of the close button.
|
||||
responsiveUI.close1=Leave Responsive Design Mode
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.customNamePromptMsg): prompt message when asking
|
||||
# the user to specify a name for a new custom preset.
|
||||
responsiveUI.customNamePromptMsg=Give a name to the %Sx%S preset
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.resizer): tooltip showed when
|
||||
# overring the resizers.
|
||||
responsiveUI.resizerTooltip=Use the Control key for more precision. Use Shift key for rounded sizes.
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.needReload): notification that appears
|
||||
# when touch events are enabled
|
||||
responsiveUI.needReload=If touch event listeners have been added earlier, the page needs to be reloaded.
|
||||
responsiveUI.notificationReload=Reload
|
||||
responsiveUI.notificationReload_accesskey=R
|
||||
responsiveUI.dontShowReloadNotification=Never show again
|
||||
responsiveUI.dontShowReloadNotification_accesskey=N
|
||||
|
||||
# LOCALIZATION NOTE (responsiveUI.newVersionUserDisabled): notification that appears
|
||||
# when old RDM is displayed because the user has disabled new RDM.
|
||||
responsiveUI.newVersionUserDisabled=A new version of Responsive Design Mode is available, but it appears to be disabled. Please enable it and provide feedback, as this version will be removed.
|
||||
# LOCALIZATION NOTE (responsiveUI.newVersionE10sDisabled): notification that appears
|
||||
# when old RDM is displayed because e10s is disabled.
|
||||
responsiveUI.newVersionE10sDisabled=A new version of Responsive Design Mode is available, but it requires multi-process mode, which is currently disabled. Please enable it and provide feedback, as this version will be removed.
|
||||
# LOCALIZATION NOTE (responsiveUI.newVersionEnableAndRestart): button text in notification
|
||||
# to enable new RDM itself or e10s as a prerequisite for new RDM.
|
||||
responsiveUI.newVersionEnableAndRestart=Enable and Restart
|
||||
@ -22,7 +22,6 @@ DIRS += [
|
||||
'performance',
|
||||
'preferences',
|
||||
'responsive.html',
|
||||
'responsivedesign',
|
||||
'scratchpad',
|
||||
'shadereditor',
|
||||
'shared',
|
||||
|
||||
@ -100,9 +100,6 @@ pref("devtools.markup.collapseAttributeLength", 120);
|
||||
// DevTools default color unit
|
||||
pref("devtools.defaultColorUnit", "authored");
|
||||
|
||||
// Enable the Responsive UI tool
|
||||
pref("devtools.responsiveUI.no-reload-notification", false);
|
||||
|
||||
// Enable the Memory tools
|
||||
pref("devtools.memory.enabled", true);
|
||||
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
# 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/.
|
||||
|
||||
BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
|
||||
|
||||
DevToolsModules(
|
||||
'responsivedesign-old.js',
|
||||
)
|
||||
|
||||
with Files('**'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools: Responsive Design Mode')
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,10 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
module.exports = {
|
||||
// Extend from the shared list of defined globals for mochitests.
|
||||
"extends": "../../../.eslintrc.mochitests.js",
|
||||
"globals": {
|
||||
"ResponsiveUI": true,
|
||||
"helpers": true
|
||||
}
|
||||
};
|
||||
@ -1,22 +0,0 @@
|
||||
[DEFAULT]
|
||||
tags = devtools
|
||||
subsuite = devtools
|
||||
support-files =
|
||||
head.js
|
||||
touch.html
|
||||
!/devtools/client/commandline/test/helpers.js
|
||||
!/devtools/client/framework/test/shared-head.js
|
||||
|
||||
[browser_responsive_cmd.js]
|
||||
[browser_responsivecomputedview.js]
|
||||
skip-if = e10s && debug # Bug 1252201 - Docshell leak on debug e10s
|
||||
[browser_responsiveruleview.js]
|
||||
skip-if = e10s && debug # Bug 1252201 - Docshell leak on debug e10s
|
||||
[browser_responsiveui.js]
|
||||
[browser_responsiveui_touch.js]
|
||||
skip-if = true # Bug 1358261 - Intermittent failures, mostly on Windows
|
||||
[browser_responsiveuiaddcustompreset.js]
|
||||
[browser_responsive_devicewidth.js]
|
||||
[browser_responsiveui_customuseragent.js]
|
||||
[browser_responsiveui_window_close.js]
|
||||
skip-if = (os == 'linux') && e10s && debug # Bug 1277274
|
||||
@ -1,137 +0,0 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
* http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
function test() {
|
||||
let manager = ResponsiveUIManager;
|
||||
let done;
|
||||
|
||||
function isOpen() {
|
||||
return gBrowser.getBrowserContainer(gBrowser.selectedBrowser)
|
||||
.hasAttribute("responsivemode");
|
||||
}
|
||||
|
||||
helpers.addTabWithToolbar("data:text/html;charset=utf-8,hi", (options) => {
|
||||
return helpers.audit(options, [
|
||||
{
|
||||
setup() {
|
||||
done = once(manager, "on");
|
||||
return helpers.setInput(options, "resize toggle");
|
||||
},
|
||||
check: {
|
||||
input: "resize toggle",
|
||||
hints: "",
|
||||
markup: "VVVVVVVVVVVVV",
|
||||
status: "VALID"
|
||||
},
|
||||
exec: {
|
||||
output: ""
|
||||
},
|
||||
post: Task.async(function* () {
|
||||
yield done;
|
||||
ok(isOpen(), "responsive mode is open");
|
||||
}),
|
||||
},
|
||||
{
|
||||
setup() {
|
||||
done = once(manager, "off");
|
||||
return helpers.setInput(options, "resize toggle");
|
||||
},
|
||||
check: {
|
||||
input: "resize toggle",
|
||||
hints: "",
|
||||
markup: "VVVVVVVVVVVVV",
|
||||
status: "VALID"
|
||||
},
|
||||
exec: {
|
||||
output: ""
|
||||
},
|
||||
post: Task.async(function* () {
|
||||
yield done;
|
||||
ok(!isOpen(), "responsive mode is closed");
|
||||
}),
|
||||
},
|
||||
{
|
||||
setup() {
|
||||
done = once(manager, "on");
|
||||
return helpers.setInput(options, "resize on");
|
||||
},
|
||||
check: {
|
||||
input: "resize on",
|
||||
hints: "",
|
||||
markup: "VVVVVVVVV",
|
||||
status: "VALID"
|
||||
},
|
||||
exec: {
|
||||
output: ""
|
||||
},
|
||||
post: Task.async(function* () {
|
||||
yield done;
|
||||
ok(isOpen(), "responsive mode is open");
|
||||
}),
|
||||
},
|
||||
{
|
||||
setup() {
|
||||
done = once(manager, "off");
|
||||
return helpers.setInput(options, "resize off");
|
||||
},
|
||||
check: {
|
||||
input: "resize off",
|
||||
hints: "",
|
||||
markup: "VVVVVVVVVV",
|
||||
status: "VALID"
|
||||
},
|
||||
exec: {
|
||||
output: ""
|
||||
},
|
||||
post: Task.async(function* () {
|
||||
yield done;
|
||||
ok(!isOpen(), "responsive mode is closed");
|
||||
}),
|
||||
},
|
||||
{
|
||||
setup() {
|
||||
done = once(manager, "on");
|
||||
return helpers.setInput(options, "resize to 400 400");
|
||||
},
|
||||
check: {
|
||||
input: "resize to 400 400",
|
||||
hints: "",
|
||||
markup: "VVVVVVVVVVVVVVVVV",
|
||||
status: "VALID",
|
||||
args: {
|
||||
width: { value: 400 },
|
||||
height: { value: 400 },
|
||||
}
|
||||
},
|
||||
exec: {
|
||||
output: ""
|
||||
},
|
||||
post: Task.async(function* () {
|
||||
yield done;
|
||||
ok(isOpen(), "responsive mode is open");
|
||||
}),
|
||||
},
|
||||
{
|
||||
setup() {
|
||||
done = once(manager, "off");
|
||||
return helpers.setInput(options, "resize off");
|
||||
},
|
||||
check: {
|
||||
input: "resize off",
|
||||
hints: "",
|
||||
markup: "VVVVVVVVVV",
|
||||
status: "VALID"
|
||||
},
|
||||
exec: {
|
||||
output: ""
|
||||
},
|
||||
post: Task.async(function* () {
|
||||
yield done;
|
||||
ok(!isOpen(), "responsive mode is closed");
|
||||
}),
|
||||
},
|
||||
]);
|
||||
}).then(finish);
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
add_task(function* () {
|
||||
let tab = yield addTab("about:logo");
|
||||
let { rdm, manager } = yield openRDM(tab);
|
||||
ok(rdm, "An instance of the RDM should be attached to the tab.");
|
||||
yield setSize(rdm, manager, 110, 500);
|
||||
|
||||
info("Checking initial width/height properties.");
|
||||
yield doInitialChecks();
|
||||
|
||||
info("Changing the RDM size");
|
||||
yield setSize(rdm, manager, 90, 500);
|
||||
|
||||
info("Checking for screen props");
|
||||
yield checkScreenProps();
|
||||
|
||||
info("Setting docShell.deviceSizeIsPageSize to false");
|
||||
yield ContentTask.spawn(gBrowser.selectedBrowser, {}, function* () {
|
||||
let docShell = content.QueryInterface(Ci.nsIInterfaceRequestor)
|
||||
.getInterface(Ci.nsIWebNavigation)
|
||||
.QueryInterface(Ci.nsIDocShell);
|
||||
docShell.deviceSizeIsPageSize = false;
|
||||
});
|
||||
|
||||
info("Checking for screen props once again.");
|
||||
yield checkScreenProps2();
|
||||
|
||||
yield closeRDM(rdm);
|
||||
});
|
||||
|
||||
function* doInitialChecks() {
|
||||
let {innerWidth, matchesMedia} = yield grabContentInfo();
|
||||
is(innerWidth, 110, "initial width should be 110px");
|
||||
ok(!matchesMedia, "media query shouldn't match.");
|
||||
}
|
||||
|
||||
function* checkScreenProps() {
|
||||
let {matchesMedia, screen} = yield grabContentInfo();
|
||||
ok(matchesMedia, "media query should match");
|
||||
isnot(window.screen.width, screen.width,
|
||||
"screen.width should not be the size of the screen.");
|
||||
is(screen.width, 90, "screen.width should be the page width");
|
||||
is(screen.height, 500, "screen.height should be the page height");
|
||||
}
|
||||
|
||||
function* checkScreenProps2() {
|
||||
let {matchesMedia, screen} = yield grabContentInfo();
|
||||
ok(!matchesMedia, "media query should be re-evaluated.");
|
||||
is(window.screen.width, screen.width,
|
||||
"screen.width should be the size of the screen.");
|
||||
}
|
||||
|
||||
function grabContentInfo() {
|
||||
return ContentTask.spawn(gBrowser.selectedBrowser, {}, function* () {
|
||||
return {
|
||||
screen: {
|
||||
width: content.screen.width,
|
||||
height: content.screen.height
|
||||
},
|
||||
innerWidth: content.innerWidth,
|
||||
matchesMedia: content.matchMedia("(max-device-width:100px)").matches
|
||||
};
|
||||
});
|
||||
}
|
||||
@ -1,67 +0,0 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Check that when the viewport is resized, the computed-view refreshes.
|
||||
|
||||
const TEST_URI = "data:text/html;charset=utf-8,<html><style>" +
|
||||
"div {" +
|
||||
" width: 500px;" +
|
||||
" height: 10px;" +
|
||||
" background: purple;" +
|
||||
"} " +
|
||||
"@media screen and (max-width: 200px) {" +
|
||||
" div { " +
|
||||
" width: 100px;" +
|
||||
" }" +
|
||||
"};" +
|
||||
"</style><div></div></html>";
|
||||
|
||||
add_task(function* () {
|
||||
yield addTab(TEST_URI);
|
||||
|
||||
info("Open the responsive design mode and set its size to 500x500 to start");
|
||||
let { rdm, manager } = yield openRDM();
|
||||
yield setSize(rdm, manager, 500, 500);
|
||||
|
||||
info("Open the inspector, computed-view and select the test node");
|
||||
let {inspector, view} = yield openComputedView();
|
||||
yield selectNode("div", inspector);
|
||||
|
||||
info("Try shrinking the viewport and checking the applied styles");
|
||||
yield testShrink(view, inspector, rdm, manager);
|
||||
|
||||
info("Try growing the viewport and checking the applied styles");
|
||||
yield testGrow(view, inspector, rdm, manager);
|
||||
|
||||
yield closeRDM(rdm);
|
||||
yield closeToolbox();
|
||||
});
|
||||
|
||||
function* testShrink(computedView, inspector, rdm, manager) {
|
||||
is(computedWidth(computedView), "500px", "Should show 500px initially.");
|
||||
|
||||
let onRefresh = inspector.once("computed-view-refreshed");
|
||||
yield setSize(rdm, manager, 100, 100);
|
||||
yield onRefresh;
|
||||
|
||||
is(computedWidth(computedView), "100px", "Should be 100px after shrinking.");
|
||||
}
|
||||
|
||||
function* testGrow(computedView, inspector, rdm, manager) {
|
||||
let onRefresh = inspector.once("computed-view-refreshed");
|
||||
yield setSize(rdm, manager, 500, 500);
|
||||
yield onRefresh;
|
||||
|
||||
is(computedWidth(computedView), "500px", "Should be 500px after growing.");
|
||||
}
|
||||
|
||||
function computedWidth(computedView) {
|
||||
for (let prop of computedView.propertyViews) {
|
||||
if (prop.name === "width") {
|
||||
return prop.valueNode.textContent;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@ -1,95 +0,0 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Check that when the viewport is resized, the rule-view refreshes.
|
||||
// Also test that ESC does open the split-console, and that the RDM menu item
|
||||
// gets updated correctly when needed.
|
||||
// TODO: split this test.
|
||||
|
||||
const TEST_URI = "data:text/html;charset=utf-8,<html><style>" +
|
||||
"div {" +
|
||||
" width: 500px;" +
|
||||
" height: 10px;" +
|
||||
" background: purple;" +
|
||||
"} " +
|
||||
"@media screen and (max-width: 200px) {" +
|
||||
" div { " +
|
||||
" width: 100px;" +
|
||||
" }" +
|
||||
"};" +
|
||||
"</style><div></div></html>";
|
||||
|
||||
add_task(function* () {
|
||||
yield addTab(TEST_URI);
|
||||
|
||||
info("Open the responsive design mode and set its size to 500x500 to start");
|
||||
let { rdm, manager } = yield openRDM();
|
||||
yield setSize(rdm, manager, 500, 500);
|
||||
|
||||
info("Open the inspector, rule-view and select the test node");
|
||||
let {inspector, view} = yield openRuleView();
|
||||
yield selectNode("div", inspector);
|
||||
|
||||
info("Try shrinking the viewport and checking the applied styles");
|
||||
yield testShrink(view, rdm, manager);
|
||||
|
||||
info("Try growing the viewport and checking the applied styles");
|
||||
yield testGrow(view, rdm, manager);
|
||||
|
||||
info("Check that ESC still opens the split console");
|
||||
yield testEscapeOpensSplitConsole(inspector);
|
||||
|
||||
yield closeToolbox();
|
||||
|
||||
info("Test the state of the RDM menu item");
|
||||
yield testMenuItem(rdm);
|
||||
|
||||
Services.prefs.clearUserPref("devtools.toolbox.splitconsoleEnabled");
|
||||
});
|
||||
|
||||
function* testShrink(ruleView, rdm, manager) {
|
||||
is(numberOfRules(ruleView), 2, "Should have two rules initially.");
|
||||
|
||||
info("Resize to 100x100 and wait for the rule-view to update");
|
||||
let onRefresh = ruleView.once("ruleview-refreshed");
|
||||
yield setSize(rdm, manager, 100, 100);
|
||||
yield onRefresh;
|
||||
|
||||
is(numberOfRules(ruleView), 3, "Should have three rules after shrinking.");
|
||||
}
|
||||
|
||||
function* testGrow(ruleView, rdm, manager) {
|
||||
info("Resize to 500x500 and wait for the rule-view to update");
|
||||
let onRefresh = ruleView.once("ruleview-refreshed");
|
||||
yield setSize(rdm, manager, 500, 500);
|
||||
yield onRefresh;
|
||||
|
||||
is(numberOfRules(ruleView), 2, "Should have two rules after growing.");
|
||||
}
|
||||
|
||||
function* testEscapeOpensSplitConsole(inspector) {
|
||||
ok(!inspector._toolbox._splitConsole, "Console is not split.");
|
||||
|
||||
info("Press escape");
|
||||
let onSplit = inspector._toolbox.once("split-console");
|
||||
EventUtils.synthesizeKey("VK_ESCAPE", {});
|
||||
yield onSplit;
|
||||
|
||||
ok(inspector._toolbox._splitConsole, "Console is split after pressing ESC.");
|
||||
}
|
||||
|
||||
function* testMenuItem(rdm) {
|
||||
is(document.getElementById("menu_responsiveUI").getAttribute("checked"),
|
||||
"true", "The menu item is checked");
|
||||
|
||||
yield closeRDM(rdm);
|
||||
|
||||
is(document.getElementById("menu_responsiveUI").getAttribute("checked"),
|
||||
"false", "The menu item is unchecked");
|
||||
}
|
||||
|
||||
function numberOfRules(ruleView) {
|
||||
return ruleView.element.querySelectorAll(".ruleview-code").length;
|
||||
}
|
||||
@ -1,250 +0,0 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
add_task(function* () {
|
||||
let tab = yield addTab("data:text/html,mop");
|
||||
|
||||
let {rdm, manager} = yield openRDM(tab, "menu");
|
||||
let container = gBrowser.getBrowserContainer();
|
||||
is(container.getAttribute("responsivemode"), "true",
|
||||
"Should be in responsive mode.");
|
||||
is(document.getElementById("menu_responsiveUI").getAttribute("checked"),
|
||||
"true", "Menu item should be checked");
|
||||
|
||||
ok(rdm, "An instance of the RDM should be attached to the tab.");
|
||||
|
||||
let originalWidth = (yield getSizing()).width;
|
||||
|
||||
let documentLoaded = waitForDocLoadComplete();
|
||||
gBrowser.loadURI("data:text/html;charset=utf-8,mop" +
|
||||
"<div style%3D'height%3A5000px'><%2Fdiv>");
|
||||
yield documentLoaded;
|
||||
|
||||
let newWidth = (yield getSizing()).width;
|
||||
is(originalWidth, newWidth, "Floating scrollbars shouldn't change the width");
|
||||
|
||||
yield testPresets(rdm, manager);
|
||||
|
||||
info("Testing mouse resizing");
|
||||
yield testManualMouseResize(rdm, manager);
|
||||
|
||||
info("Testing mouse resizing with shift key");
|
||||
yield testManualMouseResize(rdm, manager, "shift");
|
||||
|
||||
info("Testing mouse resizing with ctrl key");
|
||||
yield testManualMouseResize(rdm, manager, "ctrl");
|
||||
|
||||
info("Testing resizing with user custom keyboard input");
|
||||
yield testResizeUsingCustomInput(rdm, manager);
|
||||
|
||||
info("Testing invalid keyboard input");
|
||||
yield testInvalidUserInput(rdm);
|
||||
|
||||
info("Testing rotation");
|
||||
yield testRotate(rdm, manager);
|
||||
|
||||
let {width: widthBeforeClose, height: heightBeforeClose} = yield getSizing();
|
||||
|
||||
info("Restarting responsive mode");
|
||||
yield closeRDM(rdm);
|
||||
|
||||
let resized = waitForResizeTo(manager, widthBeforeClose, heightBeforeClose);
|
||||
({rdm} = yield openRDM(tab, "keyboard"));
|
||||
yield resized;
|
||||
|
||||
let currentSize = yield getSizing();
|
||||
is(currentSize.width, widthBeforeClose, "width should be restored");
|
||||
is(currentSize.height, heightBeforeClose, "height should be restored");
|
||||
|
||||
container = gBrowser.getBrowserContainer();
|
||||
is(container.getAttribute("responsivemode"), "true", "In responsive mode.");
|
||||
is(document.getElementById("menu_responsiveUI").getAttribute("checked"),
|
||||
"true", "menu item should be checked");
|
||||
|
||||
let isWinXP = navigator.userAgent.indexOf("Windows NT 5.1") != -1;
|
||||
if (!isWinXP) {
|
||||
yield testScreenshot(rdm);
|
||||
}
|
||||
|
||||
yield closeRDM(rdm);
|
||||
is(document.getElementById("menu_responsiveUI").getAttribute("checked"),
|
||||
"false", "menu item should be unchecked");
|
||||
});
|
||||
|
||||
function* testPresets(rdm, manager) {
|
||||
// Starting from length - 4 because last 3 items are not presets :
|
||||
// the separator, the add button and the remove button
|
||||
for (let c = rdm.menulist.firstChild.childNodes.length - 4; c >= 0; c--) {
|
||||
let item = rdm.menulist.firstChild.childNodes[c];
|
||||
let [width, height] = extractSizeFromString(item.getAttribute("label"));
|
||||
yield setPresetIndex(rdm, manager, c);
|
||||
|
||||
let {width: contentWidth, height: contentHeight} = yield getSizing();
|
||||
is(contentWidth, width, "preset" + c + ": the width should be changed");
|
||||
is(contentHeight, height, "preset" + c + ": the height should be changed");
|
||||
}
|
||||
}
|
||||
|
||||
function* testManualMouseResize(rdm, manager, pressedKey) {
|
||||
yield setSize(rdm, manager, 100, 100);
|
||||
|
||||
let {width: initialWidth, height: initialHeight} = yield getSizing();
|
||||
is(initialWidth, 100, "Width should be reset to 100");
|
||||
is(initialHeight, 100, "Height should be reset to 100");
|
||||
|
||||
let x = 2, y = 2;
|
||||
EventUtils.synthesizeMouse(rdm.resizer, x, y, {type: "mousedown"}, window);
|
||||
|
||||
let mouseMoveParams = {type: "mousemove"};
|
||||
if (pressedKey == "shift") {
|
||||
x += 23; y += 10;
|
||||
mouseMoveParams.shiftKey = true;
|
||||
} else if (pressedKey == "ctrl") {
|
||||
x += 120; y += 60;
|
||||
mouseMoveParams.ctrlKey = true;
|
||||
} else {
|
||||
x += 20; y += 10;
|
||||
}
|
||||
|
||||
EventUtils.synthesizeMouse(rdm.resizer, x, y, mouseMoveParams, window);
|
||||
EventUtils.synthesizeMouse(rdm.resizer, x, y, {type: "mouseup"}, window);
|
||||
|
||||
yield once(manager, "content-resize");
|
||||
|
||||
let expectedWidth = initialWidth + 20;
|
||||
let expectedHeight = initialHeight + 10;
|
||||
info("initial width: " + initialWidth);
|
||||
info("initial height: " + initialHeight);
|
||||
|
||||
yield verifyResize(rdm, expectedWidth, expectedHeight);
|
||||
}
|
||||
|
||||
function* testResizeUsingCustomInput(rdm, manager) {
|
||||
let {width: initialWidth, height: initialHeight} = yield getSizing();
|
||||
let expectedWidth = initialWidth - 20, expectedHeight = initialHeight - 10;
|
||||
|
||||
let userInput = expectedWidth + " x " + expectedHeight;
|
||||
rdm.menulist.inputField.value = "";
|
||||
rdm.menulist.focus();
|
||||
processStringAsKey(userInput);
|
||||
|
||||
// While typing, the size should not change
|
||||
let currentSize = yield getSizing();
|
||||
is(currentSize.width, initialWidth, "Typing shouldn't change the width");
|
||||
is(currentSize.height, initialHeight, "Typing shouldn't change the height");
|
||||
|
||||
// Only the `change` event must change the size
|
||||
EventUtils.synthesizeKey("VK_RETURN", {});
|
||||
|
||||
yield once(manager, "content-resize");
|
||||
|
||||
yield verifyResize(rdm, expectedWidth, expectedHeight);
|
||||
}
|
||||
|
||||
function* testInvalidUserInput(rdm) {
|
||||
let {width: initialWidth, height: initialHeight} = yield getSizing();
|
||||
let index = rdm.menulist.selectedIndex;
|
||||
let expectedValue = initialWidth + "\u00D7" + initialHeight;
|
||||
let expectedLabel = rdm.menulist.firstChild.firstChild.getAttribute("label");
|
||||
|
||||
let userInput = "I'm wrong";
|
||||
|
||||
rdm.menulist.inputField.value = "";
|
||||
rdm.menulist.focus();
|
||||
processStringAsKey(userInput);
|
||||
EventUtils.synthesizeKey("VK_RETURN", {});
|
||||
|
||||
let currentSize = yield getSizing();
|
||||
is(currentSize.width, initialWidth, "Width should not change");
|
||||
is(currentSize.height, initialHeight, "Height should not change");
|
||||
is(rdm.menulist.selectedIndex, index, "Selected item should not change.");
|
||||
is(rdm.menulist.value, expectedValue, "Value should be reset");
|
||||
|
||||
let label = rdm.menulist.firstChild.firstChild.getAttribute("label");
|
||||
is(label, expectedLabel, "Custom menuitem's label should not change");
|
||||
}
|
||||
|
||||
function* testRotate(rdm, manager) {
|
||||
yield setSize(rdm, manager, 100, 200);
|
||||
|
||||
let {width: initialWidth, height: initialHeight} = yield getSizing();
|
||||
rdm.rotate();
|
||||
|
||||
yield once(manager, "content-resize");
|
||||
|
||||
let newSize = yield getSizing();
|
||||
is(newSize.width, initialHeight, "The width should now be the height.");
|
||||
is(newSize.height, initialWidth, "The height should now be the width.");
|
||||
|
||||
let label = rdm.menulist.firstChild.firstChild.getAttribute("label");
|
||||
let [width, height] = extractSizeFromString(label);
|
||||
is(width, initialHeight, "Width in label should be updated");
|
||||
is(height, initialWidth, "Height in label should be updated");
|
||||
}
|
||||
|
||||
function* verifyResize(rdm, expectedWidth, expectedHeight) {
|
||||
let currentSize = yield getSizing();
|
||||
is(currentSize.width, expectedWidth, "Width should now change");
|
||||
is(currentSize.height, expectedHeight, "Height should now change");
|
||||
|
||||
is(rdm.menulist.selectedIndex, -1, "Custom menuitem cannot be selected");
|
||||
|
||||
let label = rdm.menulist.firstChild.firstChild.getAttribute("label");
|
||||
let value = rdm.menulist.value;
|
||||
isnot(label, value,
|
||||
"The menulist item label should be different than the menulist value");
|
||||
|
||||
let [width, height] = extractSizeFromString(label);
|
||||
is(width, expectedWidth, "Width in label should be updated");
|
||||
is(height, expectedHeight, "Height in label should be updated");
|
||||
|
||||
[width, height] = extractSizeFromString(value);
|
||||
is(width, expectedWidth, "Value should be updated with new width");
|
||||
is(height, expectedHeight, "Value should be updated with new height");
|
||||
}
|
||||
|
||||
function* testScreenshot(rdm) {
|
||||
info("Testing screenshot");
|
||||
rdm.screenshot("responsiveui");
|
||||
let {FileUtils} = Cu.import("resource://gre/modules/FileUtils.jsm", {});
|
||||
|
||||
while (true) {
|
||||
// while(true) until we find the file.
|
||||
// no need for a timeout, the test will get killed anyway.
|
||||
let file = FileUtils.getFile("DfltDwnld", [ "responsiveui.png" ]);
|
||||
if (file.exists()) {
|
||||
ok(true, "Screenshot file exists");
|
||||
file.remove(false);
|
||||
break;
|
||||
}
|
||||
info("checking if file exists in 200ms");
|
||||
yield wait(200);
|
||||
}
|
||||
}
|
||||
|
||||
function* getSizing() {
|
||||
let browser = gBrowser.selectedBrowser;
|
||||
let sizing = yield ContentTask.spawn(browser, {}, function* () {
|
||||
return {
|
||||
width: content.innerWidth,
|
||||
height: content.innerHeight
|
||||
};
|
||||
});
|
||||
return sizing;
|
||||
}
|
||||
|
||||
function extractSizeFromString(str) {
|
||||
let numbers = str.match(/(\d+)[^\d]*(\d+)/);
|
||||
if (numbers) {
|
||||
return [numbers[1], numbers[2]];
|
||||
}
|
||||
return [null, null];
|
||||
}
|
||||
|
||||
function processStringAsKey(str) {
|
||||
for (let i = 0, l = str.length; i < l; i++) {
|
||||
EventUtils.synthesizeKey(str.charAt(i), {});
|
||||
}
|
||||
}
|
||||
@ -1,56 +0,0 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
const TEST_URI = "data:text/html, Custom User Agent test";
|
||||
const DEFAULT_UA = Cc["@mozilla.org/network/protocol;1?name=http"]
|
||||
.getService(Ci.nsIHttpProtocolHandler)
|
||||
.userAgent;
|
||||
const CHROME_UA = "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36" +
|
||||
" (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36";
|
||||
add_task(function* () {
|
||||
yield addTab(TEST_URI);
|
||||
|
||||
let {rdm, manager} = yield openRDM();
|
||||
yield testUserAgent(DEFAULT_UA);
|
||||
|
||||
info("Setting UA to " + CHROME_UA);
|
||||
yield setUserAgent(CHROME_UA, rdm, manager);
|
||||
yield testUserAgent(CHROME_UA);
|
||||
|
||||
info("Resetting UA");
|
||||
yield setUserAgent("", rdm, manager);
|
||||
yield testUserAgent(DEFAULT_UA);
|
||||
|
||||
info("Setting UA to " + CHROME_UA);
|
||||
yield setUserAgent(CHROME_UA, rdm, manager);
|
||||
yield testUserAgent(CHROME_UA);
|
||||
|
||||
info("Closing responsive mode");
|
||||
|
||||
yield closeRDM(rdm);
|
||||
yield testUserAgent(DEFAULT_UA);
|
||||
});
|
||||
|
||||
function* setUserAgent(ua, rdm, manager) {
|
||||
let input = rdm.userAgentInput;
|
||||
input.focus();
|
||||
input.value = ua;
|
||||
let onUAChanged = once(manager, "userAgentChanged");
|
||||
input.blur();
|
||||
yield onUAChanged;
|
||||
|
||||
if (ua !== "") {
|
||||
ok(input.hasAttribute("attention"), "UA input should be highlighted");
|
||||
} else {
|
||||
ok(!input.hasAttribute("attention"), "UA input shouldn't be highlighted");
|
||||
}
|
||||
}
|
||||
|
||||
function* testUserAgent(value) {
|
||||
let ua = yield ContentTask.spawn(gBrowser.selectedBrowser, {}, function* () {
|
||||
return content.navigator.userAgent;
|
||||
});
|
||||
is(ua, value, `UA should be set to ${value}`);
|
||||
}
|
||||
@ -1,148 +0,0 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
const TEST_URI = "http://mochi.test:8888/browser/devtools/client/" +
|
||||
"responsivedesign/test/touch.html";
|
||||
const layoutReflowSynthMouseMove = "layout.reflow.synthMouseMove";
|
||||
const domViewportEnabled = "dom.meta-viewport.enabled";
|
||||
|
||||
add_task(function* () {
|
||||
let tab = yield addTab(TEST_URI);
|
||||
let {rdm} = yield openRDM(tab);
|
||||
yield pushPrefs([layoutReflowSynthMouseMove, false]);
|
||||
yield testWithNoTouch();
|
||||
yield rdm.enableTouch();
|
||||
yield testWithTouch();
|
||||
yield rdm.disableTouch();
|
||||
yield testWithNoTouch();
|
||||
yield closeRDM(rdm);
|
||||
});
|
||||
|
||||
function* testWithNoTouch() {
|
||||
let div = content.document.querySelector("div");
|
||||
let x = 0, y = 0;
|
||||
|
||||
info("testWithNoTouch: Initial test parameter and mouse mouse outside div element");
|
||||
x = -1, y = -1;
|
||||
yield BrowserTestUtils.synthesizeMouse("div", x, y,
|
||||
{ type: "mousemove", isSynthesized: false }, gBrowser.selectedBrowser);
|
||||
div.style.transform = "none";
|
||||
div.style.backgroundColor = "";
|
||||
|
||||
info("testWithNoTouch: Move mouse into the div element");
|
||||
yield BrowserTestUtils.synthesizeMouseAtCenter("div", { type: "mousemove", isSynthesized: false },
|
||||
gBrowser.selectedBrowser);
|
||||
is(div.style.backgroundColor, "red", "mouseenter or mouseover should work");
|
||||
|
||||
info("testWithNoTouch: Drag the div element");
|
||||
yield BrowserTestUtils.synthesizeMouseAtCenter("div", { type: "mousedown", isSynthesized: false },
|
||||
gBrowser.selectedBrowser);
|
||||
x = 100; y = 100;
|
||||
yield BrowserTestUtils.synthesizeMouse("div", x, y,
|
||||
{ type: "mousemove", isSynthesized: false }, gBrowser.selectedBrowser);
|
||||
is(div.style.transform, "none", "touchmove shouldn't work");
|
||||
yield BrowserTestUtils.synthesizeMouse("div", x, y,
|
||||
{ type: "mouseup", isSynthesized: false }, gBrowser.selectedBrowser);
|
||||
|
||||
info("testWithNoTouch: Move mouse out of the div element");
|
||||
x = -1; y = -1;
|
||||
yield BrowserTestUtils.synthesizeMouse("div", x, y,
|
||||
{ type: "mousemove", isSynthesized: false }, gBrowser.selectedBrowser);
|
||||
is(div.style.backgroundColor, "blue", "mouseout or mouseleave should work");
|
||||
|
||||
info("testWithNoTouch: Click the div element");
|
||||
yield synthesizeClick(div);
|
||||
is(div.dataset.isDelay, "false", "300ms delay between touch events and mouse events should not work");
|
||||
}
|
||||
|
||||
function* testWithTouch() {
|
||||
let div = content.document.querySelector("div");
|
||||
let x = 0, y = 0;
|
||||
|
||||
info("testWithTouch: Initial test parameter and mouse mouse outside div element");
|
||||
x = -1, y = -1;
|
||||
yield BrowserTestUtils.synthesizeMouse("div", x, y,
|
||||
{ type: "mousemove", isSynthesized: false }, gBrowser.selectedBrowser);
|
||||
div.style.transform = "none";
|
||||
div.style.backgroundColor = "";
|
||||
|
||||
info("testWithTouch: Move mouse into the div element");
|
||||
yield BrowserTestUtils.synthesizeMouseAtCenter("div", { type: "mousemove", isSynthesized: false },
|
||||
gBrowser.selectedBrowser);
|
||||
isnot(div.style.backgroundColor, "red", "mouseenter or mouseover should not work");
|
||||
|
||||
info("testWithTouch: Drag the div element");
|
||||
yield BrowserTestUtils.synthesizeMouseAtCenter("div", { type: "mousedown", isSynthesized: false },
|
||||
gBrowser.selectedBrowser);
|
||||
x = 100; y = 100;
|
||||
yield BrowserTestUtils.synthesizeMouse("div", x, y,
|
||||
{ type: "mousemove", isSynthesized: false }, gBrowser.selectedBrowser);
|
||||
isnot(div.style.transform, "none", "touchmove should work");
|
||||
yield BrowserTestUtils.synthesizeMouse("div", x, y,
|
||||
{ type: "mouseup", isSynthesized: false }, gBrowser.selectedBrowser);
|
||||
|
||||
info("testWithTouch: Move mouse out of the div element");
|
||||
x = -1; y = -1;
|
||||
yield BrowserTestUtils.synthesizeMouse("div", x, y,
|
||||
{ type: "mousemove", isSynthesized: false }, gBrowser.selectedBrowser);
|
||||
isnot(div.style.backgroundColor, "blue", "mouseout or mouseleave should not work");
|
||||
|
||||
yield testWithMetaViewportEnabled();
|
||||
yield testWithMetaViewportDisabled();
|
||||
}
|
||||
|
||||
function* testWithMetaViewportEnabled() {
|
||||
yield pushPrefs([domViewportEnabled, true]);
|
||||
let meta = content.document.querySelector("meta[name=viewport]");
|
||||
let div = content.document.querySelector("div");
|
||||
div.dataset.isDelay = "false";
|
||||
|
||||
info("testWithMetaViewportEnabled: click the div element with <meta name='viewport'>");
|
||||
meta.content = "";
|
||||
yield synthesizeClick(div);
|
||||
is(div.dataset.isDelay, "true", "300ms delay between touch events and mouse events should work");
|
||||
|
||||
info("testWithMetaViewportEnabled: click the div element with <meta name='viewport' content='user-scalable=no'>");
|
||||
meta.content = "user-scalable=no";
|
||||
yield synthesizeClick(div);
|
||||
is(div.dataset.isDelay, "false", "300ms delay between touch events and mouse events should not work");
|
||||
|
||||
info("testWithMetaViewportEnabled: click the div element with <meta name='viewport' content='minimum-scale=maximum-scale'>");
|
||||
meta.content = "minimum-scale=maximum-scale";
|
||||
yield synthesizeClick(div);
|
||||
is(div.dataset.isDelay, "false", "300ms delay between touch events and mouse events should not work");
|
||||
|
||||
info("testWithMetaViewportEnabled: click the div element with <meta name='viewport' content='width=device-width'>");
|
||||
meta.content = "width=device-width";
|
||||
yield synthesizeClick(div);
|
||||
is(div.dataset.isDelay, "false", "300ms delay between touch events and mouse events should not work");
|
||||
}
|
||||
|
||||
function* testWithMetaViewportDisabled() {
|
||||
yield pushPrefs([domViewportEnabled, false]);
|
||||
let meta = content.document.querySelector("meta[name=viewport]");
|
||||
let div = content.document.querySelector("div");
|
||||
div.dataset.isDelay = "false";
|
||||
|
||||
info("testWithMetaViewportDisabled: click the div element with <meta name='viewport'>");
|
||||
meta.content = "";
|
||||
yield synthesizeClick(div);
|
||||
is(div.dataset.isDelay, "true", "300ms delay between touch events and mouse events should work");
|
||||
}
|
||||
|
||||
function synthesizeClick(element) {
|
||||
let waitForClickEvent = BrowserTestUtils.waitForEvent(element, "click");
|
||||
BrowserTestUtils.synthesizeMouseAtCenter(element, { type: "mousedown", isSynthesized: false },
|
||||
gBrowser.selectedBrowser);
|
||||
BrowserTestUtils.synthesizeMouseAtCenter(element, { type: "mouseup", isSynthesized: false },
|
||||
gBrowser.selectedBrowser);
|
||||
return waitForClickEvent;
|
||||
}
|
||||
|
||||
function pushPrefs(...aPrefs) {
|
||||
return new Promise(resolve => {
|
||||
SpecialPowers.pushPrefEnv({"set": aPrefs}, resolve);
|
||||
});
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
add_task(function* () {
|
||||
let newWindowPromise = BrowserTestUtils.waitForNewWindow();
|
||||
window.open("about:blank", "_blank");
|
||||
let newWindow = yield newWindowPromise;
|
||||
|
||||
newWindow.focus();
|
||||
yield once(newWindow.gBrowser, "load", true);
|
||||
|
||||
let tab = newWindow.gBrowser.selectedTab;
|
||||
yield ResponsiveUIManager.openIfNeeded(newWindow, tab);
|
||||
|
||||
// Close the window on a tab with an active responsive design UI and
|
||||
// wait for the UI to gracefully shutdown. This has leaked the window
|
||||
// in the past.
|
||||
ok(ResponsiveUIManager.isActiveForTab(tab),
|
||||
"ResponsiveUI should be active for tab when the window is closed");
|
||||
let offPromise = once(ResponsiveUIManager, "off");
|
||||
yield BrowserTestUtils.closeWindow(newWindow);
|
||||
yield offPromise;
|
||||
});
|
||||
@ -1,121 +0,0 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
add_task(function* () {
|
||||
let tab = yield addTab("data:text/html;charset=utf8,Test RDM custom presets");
|
||||
|
||||
let { rdm, manager } = yield openRDM(tab);
|
||||
|
||||
let oldPrompt = Services.prompt;
|
||||
Services.prompt = {
|
||||
value: "",
|
||||
returnBool: true,
|
||||
prompt: function (parent, dialogTitle, text, value, checkMsg, checkState) {
|
||||
value.value = this.value;
|
||||
return this.returnBool;
|
||||
}
|
||||
};
|
||||
|
||||
registerCleanupFunction(() => {
|
||||
Services.prompt = oldPrompt;
|
||||
});
|
||||
|
||||
// Is it open?
|
||||
let container = gBrowser.getBrowserContainer();
|
||||
is(container.getAttribute("responsivemode"), "true",
|
||||
"Should be in responsive mode.");
|
||||
|
||||
ok(rdm, "RDM instance should be attached to the tab.");
|
||||
|
||||
// Tries to add a custom preset and cancel the prompt
|
||||
let idx = rdm.menulist.selectedIndex;
|
||||
let presetCount = rdm.presets.length;
|
||||
|
||||
Services.prompt.value = "";
|
||||
Services.prompt.returnBool = false;
|
||||
rdm.addbutton.doCommand();
|
||||
|
||||
is(idx, rdm.menulist.selectedIndex,
|
||||
"selected item shouldn't change after add preset and cancel");
|
||||
is(presetCount, rdm.presets.length,
|
||||
"number of presets shouldn't change after add preset and cancel");
|
||||
|
||||
// Adds the custom preset with "Testing preset"
|
||||
Services.prompt.value = "Testing preset";
|
||||
Services.prompt.returnBool = true;
|
||||
|
||||
let resized = once(manager, "content-resize");
|
||||
let customHeight = 123, customWidth = 456;
|
||||
rdm.startResizing({});
|
||||
rdm.setViewportSize({
|
||||
width: customWidth,
|
||||
height: customHeight,
|
||||
});
|
||||
rdm.stopResizing({});
|
||||
|
||||
rdm.addbutton.doCommand();
|
||||
yield resized;
|
||||
|
||||
yield closeRDM(rdm);
|
||||
|
||||
({rdm} = yield openRDM(tab));
|
||||
is(container.getAttribute("responsivemode"), "true",
|
||||
"Should be in responsive mode.");
|
||||
|
||||
let presetLabel = "456" + "\u00D7" + "123 (Testing preset)";
|
||||
let customPresetIndex = yield getPresetIndex(rdm, manager, presetLabel);
|
||||
ok(customPresetIndex >= 0, "(idx = " + customPresetIndex + ") should be the" +
|
||||
" previously added preset in the list of items");
|
||||
|
||||
yield setPresetIndex(rdm, manager, customPresetIndex);
|
||||
|
||||
let browser = gBrowser.selectedBrowser;
|
||||
yield ContentTask.spawn(browser, null, function* () {
|
||||
let {innerWidth, innerHeight} = content;
|
||||
Assert.equal(innerWidth, 456, "Selecting preset should change the width");
|
||||
Assert.equal(innerHeight, 123, "Selecting preset should change the height");
|
||||
});
|
||||
|
||||
info(`menulist count: ${rdm.menulist.itemCount}`);
|
||||
|
||||
rdm.removebutton.doCommand();
|
||||
|
||||
yield setPresetIndex(rdm, manager, 2);
|
||||
let deletedPresetA = rdm.menulist.selectedItem.getAttribute("label");
|
||||
rdm.removebutton.doCommand();
|
||||
|
||||
yield setPresetIndex(rdm, manager, 2);
|
||||
let deletedPresetB = rdm.menulist.selectedItem.getAttribute("label");
|
||||
rdm.removebutton.doCommand();
|
||||
|
||||
yield closeRDM(rdm);
|
||||
({rdm} = yield openRDM(tab));
|
||||
|
||||
customPresetIndex = yield getPresetIndex(rdm, manager, deletedPresetA);
|
||||
is(customPresetIndex, -1,
|
||||
"Deleted preset " + deletedPresetA + " should not be in the list anymore");
|
||||
|
||||
customPresetIndex = yield getPresetIndex(rdm, manager, deletedPresetB);
|
||||
is(customPresetIndex, -1,
|
||||
"Deleted preset " + deletedPresetB + " should not be in the list anymore");
|
||||
|
||||
yield closeRDM(rdm);
|
||||
});
|
||||
|
||||
var getPresetIndex = Task.async(function* (rdm, manager, presetLabel) {
|
||||
var testOnePreset = Task.async(function* (c) {
|
||||
if (c == 0) {
|
||||
return -1;
|
||||
}
|
||||
yield setPresetIndex(rdm, manager, c);
|
||||
|
||||
let item = rdm.menulist.firstChild.childNodes[c];
|
||||
if (item.getAttribute("label") === presetLabel) {
|
||||
return c;
|
||||
}
|
||||
return testOnePreset(c - 1);
|
||||
});
|
||||
return testOnePreset(rdm.menulist.firstChild.childNodes.length - 4);
|
||||
});
|
||||
@ -1,302 +0,0 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
|
||||
// shared-head.js handles imports, constants, and utility functions
|
||||
let sharedHeadURI = testDir + "../../../framework/test/shared-head.js";
|
||||
Services.scriptloader.loadSubScript(sharedHeadURI, this);
|
||||
|
||||
// Import the GCLI test helper
|
||||
let gcliHelpersURI = testDir + "../../../commandline/test/helpers.js";
|
||||
Services.scriptloader.loadSubScript(gcliHelpersURI, this);
|
||||
|
||||
flags.testing = true;
|
||||
Services.prefs.setBoolPref("devtools.responsive.html.enabled", false);
|
||||
|
||||
registerCleanupFunction(() => {
|
||||
flags.testing = false;
|
||||
Services.prefs.clearUserPref("devtools.responsive.html.enabled");
|
||||
Services.prefs.clearUserPref("devtools.responsiveUI.currentPreset");
|
||||
Services.prefs.clearUserPref("devtools.responsiveUI.customHeight");
|
||||
Services.prefs.clearUserPref("devtools.responsiveUI.customWidth");
|
||||
Services.prefs.clearUserPref("devtools.responsiveUI.presets");
|
||||
Services.prefs.clearUserPref("devtools.responsiveUI.rotate");
|
||||
});
|
||||
|
||||
SimpleTest.requestCompleteLog();
|
||||
|
||||
loader.lazyRequireGetter(this, "ResponsiveUIManager", "devtools/client/responsive.html/manager");
|
||||
|
||||
/**
|
||||
* Open the Responsive Design Mode
|
||||
* @param {Tab} The browser tab to open it into (defaults to the selected tab).
|
||||
* @param {method} The method to use to open the RDM (values: menu, keyboard)
|
||||
* @return {rdm, manager} Returns the RUI instance and the manager
|
||||
*/
|
||||
var openRDM = Task.async(function* (tab = gBrowser.selectedTab,
|
||||
method = "menu") {
|
||||
let manager = ResponsiveUIManager;
|
||||
|
||||
let opened = once(manager, "on");
|
||||
let resized = once(manager, "content-resize");
|
||||
if (method == "menu") {
|
||||
document.getElementById("menu_responsiveUI").doCommand();
|
||||
} else {
|
||||
synthesizeKeyFromKeyTag(document.getElementById("key_responsiveDesignMode"));
|
||||
}
|
||||
yield opened;
|
||||
|
||||
let rdm = manager.getResponsiveUIForTab(tab);
|
||||
rdm.transitionsEnabled = false;
|
||||
registerCleanupFunction(() => {
|
||||
rdm.transitionsEnabled = true;
|
||||
});
|
||||
|
||||
// Wait for content to resize. This is triggered async by the preset menu
|
||||
// auto-selecting its default entry once it's in the document.
|
||||
yield resized;
|
||||
|
||||
return {rdm, manager};
|
||||
});
|
||||
|
||||
/**
|
||||
* Close a responsive mode instance
|
||||
* @param {rdm} ResponsiveUI instance for the tab
|
||||
*/
|
||||
var closeRDM = Task.async(function* (rdm) {
|
||||
let manager = ResponsiveUIManager;
|
||||
if (!rdm) {
|
||||
rdm = manager.getResponsiveUIForTab(gBrowser.selectedTab);
|
||||
}
|
||||
let closed = once(manager, "off");
|
||||
let resized = once(manager, "content-resize");
|
||||
rdm.close();
|
||||
yield resized;
|
||||
yield closed;
|
||||
});
|
||||
|
||||
/**
|
||||
* Open the toolbox, with the inspector tool visible.
|
||||
* @return a promise that resolves when the inspector is ready
|
||||
*/
|
||||
var openInspector = Task.async(function* () {
|
||||
info("Opening the inspector");
|
||||
let target = TargetFactory.forTab(gBrowser.selectedTab);
|
||||
|
||||
let inspector, toolbox;
|
||||
|
||||
// Checking if the toolbox and the inspector are already loaded
|
||||
// The inspector-updated event should only be waited for if the inspector
|
||||
// isn't loaded yet
|
||||
toolbox = gDevTools.getToolbox(target);
|
||||
if (toolbox) {
|
||||
inspector = toolbox.getPanel("inspector");
|
||||
if (inspector) {
|
||||
info("Toolbox and inspector already open");
|
||||
return {
|
||||
toolbox: toolbox,
|
||||
inspector: inspector
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
info("Opening the toolbox");
|
||||
toolbox = yield gDevTools.showToolbox(target, "inspector");
|
||||
yield waitForToolboxFrameFocus(toolbox);
|
||||
inspector = toolbox.getPanel("inspector");
|
||||
|
||||
info("Waiting for the inspector to update");
|
||||
if (inspector._updateProgress) {
|
||||
yield inspector.once("inspector-updated");
|
||||
}
|
||||
|
||||
return {
|
||||
toolbox: toolbox,
|
||||
inspector: inspector
|
||||
};
|
||||
});
|
||||
|
||||
var closeToolbox = Task.async(function* () {
|
||||
let target = TargetFactory.forTab(gBrowser.selectedTab);
|
||||
yield gDevTools.closeToolbox(target);
|
||||
});
|
||||
|
||||
/**
|
||||
* Wait for the toolbox frame to receive focus after it loads
|
||||
* @param {Toolbox} toolbox
|
||||
* @return a promise that resolves when focus has been received
|
||||
*/
|
||||
function waitForToolboxFrameFocus(toolbox) {
|
||||
info("Making sure that the toolbox's frame is focused");
|
||||
return new Promise(resolve => {
|
||||
waitForFocus(resolve, toolbox.win);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the toolbox, with the inspector tool visible, and the sidebar that
|
||||
* corresponds to the given id selected
|
||||
* @return a promise that resolves when the inspector is ready and the sidebar
|
||||
* view is visible and ready
|
||||
*/
|
||||
var openInspectorSideBar = Task.async(function* (id) {
|
||||
let {toolbox, inspector} = yield openInspector();
|
||||
|
||||
info("Selecting the " + id + " sidebar");
|
||||
inspector.sidebar.select(id);
|
||||
|
||||
return {
|
||||
toolbox: toolbox,
|
||||
inspector: inspector,
|
||||
view: inspector.getPanel(id).view || inspector.getPanel(id).computedView
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* Checks whether the inspector's sidebar corresponding to the given id already
|
||||
* exists
|
||||
* @param {InspectorPanel}
|
||||
* @param {String}
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function hasSideBarTab(inspector, id) {
|
||||
return !!inspector.sidebar.getWindowForTab(id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the toolbox, with the inspector tool visible, and the computed-view
|
||||
* sidebar tab selected.
|
||||
* @return a promise that resolves when the inspector is ready and the computed
|
||||
* view is visible and ready
|
||||
*/
|
||||
function openComputedView() {
|
||||
return openInspectorSideBar("computedview");
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the toolbox, with the inspector tool visible, and the rule-view
|
||||
* sidebar tab selected.
|
||||
* @return a promise that resolves when the inspector is ready and the rule
|
||||
* view is visible and ready
|
||||
*/
|
||||
function openRuleView() {
|
||||
return openInspectorSideBar("ruleview");
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a new test tab in the browser and load the given url.
|
||||
* @param {String} url The url to be loaded in the new tab
|
||||
* @return a promise that resolves to the tab object when the url is loaded
|
||||
*/
|
||||
var addTab = Task.async(function* (url) {
|
||||
info("Adding a new tab with URL: '" + url + "'");
|
||||
|
||||
window.focus();
|
||||
|
||||
let tab = gBrowser.selectedTab = BrowserTestUtils.addTab(gBrowser, url);
|
||||
let browser = tab.linkedBrowser;
|
||||
|
||||
yield BrowserTestUtils.browserLoaded(browser);
|
||||
info("URL '" + url + "' loading complete");
|
||||
|
||||
return tab;
|
||||
});
|
||||
|
||||
/**
|
||||
* Waits for the next load to complete in the current browser.
|
||||
*
|
||||
* @return promise
|
||||
*/
|
||||
function waitForDocLoadComplete(aBrowser = gBrowser) {
|
||||
return new Promise(resolve => {
|
||||
let progressListener = {
|
||||
onStateChange: function (webProgress, req, flags, status) {
|
||||
let docStop = Ci.nsIWebProgressListener.STATE_IS_NETWORK |
|
||||
Ci.nsIWebProgressListener.STATE_STOP;
|
||||
info(`Saw state ${flags.toString(16)} and status ${status.toString(16)}`);
|
||||
|
||||
// When a load needs to be retargetted to a new process it is cancelled
|
||||
// with NS_BINDING_ABORTED so ignore that case
|
||||
if ((flags & docStop) == docStop && status != Cr.NS_BINDING_ABORTED) {
|
||||
aBrowser.removeProgressListener(progressListener);
|
||||
info("Browser loaded");
|
||||
resolve();
|
||||
}
|
||||
},
|
||||
QueryInterface: XPCOMUtils.generateQI([Ci.nsIWebProgressListener,
|
||||
Ci.nsISupportsWeakReference])
|
||||
};
|
||||
aBrowser.addProgressListener(progressListener);
|
||||
info("Waiting for browser load");
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the NodeFront for a node that matches a given css selector, via the
|
||||
* protocol.
|
||||
* @param {String|NodeFront} selector
|
||||
* @param {InspectorPanel} inspector The instance of InspectorPanel currently
|
||||
* loaded in the toolbox
|
||||
* @return {Promise} Resolves to the NodeFront instance
|
||||
*/
|
||||
function getNodeFront(selector, {walker}) {
|
||||
if (selector._form) {
|
||||
return selector;
|
||||
}
|
||||
return walker.querySelector(walker.rootNode, selector);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the inspector's current selection to the first match of the given css
|
||||
* selector
|
||||
* @param {String|NodeFront} selector
|
||||
* @param {InspectorPanel} inspector The instance of InspectorPanel currently
|
||||
* loaded in the toolbox
|
||||
* @param {String} reason Defaults to "test" which instructs the inspector not
|
||||
* to highlight the node upon selection
|
||||
* @return {Promise} Resolves when the inspector is updated with the new node
|
||||
*/
|
||||
var selectNode = Task.async(function* (selector, inspector, reason = "test") {
|
||||
info("Selecting the node for '" + selector + "'");
|
||||
let nodeFront = yield getNodeFront(selector, inspector);
|
||||
let updated = inspector.once("inspector-updated");
|
||||
inspector.selection.setNodeFront(nodeFront, reason);
|
||||
yield updated;
|
||||
});
|
||||
|
||||
function waitForResizeTo(manager, width, height) {
|
||||
return new Promise(resolve => {
|
||||
let onResize = (_, data) => {
|
||||
if (data.width != width || data.height != height) {
|
||||
return;
|
||||
}
|
||||
manager.off("content-resize", onResize);
|
||||
info(`Got content-resize to ${width} x ${height}`);
|
||||
resolve();
|
||||
};
|
||||
info(`Waiting for content-resize to ${width} x ${height}`);
|
||||
manager.on("content-resize", onResize);
|
||||
});
|
||||
}
|
||||
|
||||
var setPresetIndex = Task.async(function* (rdm, manager, index) {
|
||||
info(`Current preset: ${rdm.menulist.selectedIndex}, change to: ${index}`);
|
||||
if (rdm.menulist.selectedIndex != index) {
|
||||
let resized = once(manager, "content-resize");
|
||||
rdm.menulist.selectedIndex = index;
|
||||
yield resized;
|
||||
}
|
||||
});
|
||||
|
||||
var setSize = Task.async(function* (rdm, manager, width, height) {
|
||||
let size = rdm.getSize();
|
||||
info(`Current size: ${size.width} x ${size.height}, ` +
|
||||
`set to: ${width} x ${height}`);
|
||||
if (size.width != width || size.height != height) {
|
||||
let resized = waitForResizeTo(manager, width, height);
|
||||
rdm.setViewportSize({ width, height });
|
||||
yield resized;
|
||||
}
|
||||
});
|
||||
@ -1,88 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" />
|
||||
<title>test</title>
|
||||
|
||||
|
||||
<style>
|
||||
div {
|
||||
border:1px solid red;
|
||||
width: 100px; height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div data-is-delay="false"></div>
|
||||
|
||||
<script>
|
||||
var div = document.querySelector("div");
|
||||
var initX, initY;
|
||||
var previousEvent = "", touchendTime = 0;
|
||||
var updatePreviousEvent = function(e){
|
||||
previousEvent = e.type;
|
||||
};
|
||||
|
||||
div.style.transform = "none";
|
||||
div.style.backgroundColor = "";
|
||||
|
||||
div.addEventListener("touchstart", function(evt) {
|
||||
var touch = evt.changedTouches[0];
|
||||
initX = touch.pageX;
|
||||
initY = touch.pageY;
|
||||
updatePreviousEvent(evt);
|
||||
}, true);
|
||||
|
||||
div.addEventListener("touchmove", function(evt) {
|
||||
var touch = evt.changedTouches[0];
|
||||
var deltaX = touch.pageX - initX;
|
||||
var deltaY = touch.pageY - initY;
|
||||
div.style.transform = "translate(" + deltaX + "px, " + deltaY + "px)";
|
||||
updatePreviousEvent(evt);
|
||||
}, true);
|
||||
|
||||
div.addEventListener("touchend", function(evt) {
|
||||
if (!evt.touches.length) {
|
||||
div.style.transform = "none";
|
||||
}
|
||||
touchendTime = performance.now();
|
||||
updatePreviousEvent(evt);
|
||||
}, true);
|
||||
|
||||
div.addEventListener("mouseenter", function(evt) {
|
||||
div.style.backgroundColor = "red";
|
||||
updatePreviousEvent(evt);
|
||||
}, true);
|
||||
div.addEventListener("mouseover", function(evt) {
|
||||
div.style.backgroundColor = "red";
|
||||
updatePreviousEvent(evt);
|
||||
}, true);
|
||||
|
||||
div.addEventListener("mouseout", function(evt) {
|
||||
div.style.backgroundColor = "blue";
|
||||
updatePreviousEvent(evt);
|
||||
}, true);
|
||||
|
||||
div.addEventListener("mouseleave", function(evt) {
|
||||
div.style.backgroundColor = "blue";
|
||||
updatePreviousEvent(evt);
|
||||
}, true);
|
||||
|
||||
div.addEventListener("mousedown", function(evt){
|
||||
if (previousEvent === "touchend" && touchendTime !== 0) {
|
||||
let now = performance.now();
|
||||
// Do to time spent processing events our measurement might
|
||||
// be fractionally short of the actual delay. Round up any
|
||||
// microsecond changes in case we get something like 299.9.
|
||||
div.dataset.isDelay = ((now - touchendTime) >= 299.5) ? true : false;
|
||||
} else {
|
||||
div.dataset.isDelay = false;
|
||||
}
|
||||
updatePreviousEvent(evt);
|
||||
}, true);
|
||||
|
||||
div.addEventListener("mousemove", updatePreviousEvent, true);
|
||||
|
||||
div.addEventListener("mouseup", updatePreviousEvent, true);
|
||||
|
||||
div.addEventListener("click", updatePreviousEvent, true);
|
||||
</script>
|
||||
@ -4,7 +4,6 @@
|
||||
|
||||
@import url("resource://devtools/client/themes/splitters.css");
|
||||
@import url("resource://devtools/client/themes/commandline-browser.css");
|
||||
@import url("resource://devtools/client/themes/responsivedesign.css");
|
||||
|
||||
/* Bottom-docked toolbox minimize transition */
|
||||
.devtools-toolbox-bottom-iframe {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 102 B |
Binary file not shown.
|
Before Width: | Height: | Size: 129 B |
Binary file not shown.
|
Before Width: | Height: | Size: 129 B |
Binary file not shown.
|
Before Width: | Height: | Size: 205 B |
Binary file not shown.
|
Before Width: | Height: | Size: 105 B |
Binary file not shown.
|
Before Width: | Height: | Size: 141 B |
Binary file not shown.
|
Before Width: | Height: | Size: 276 B |
Binary file not shown.
|
Before Width: | Height: | Size: 245 B |
Binary file not shown.
|
Before Width: | Height: | Size: 438 B |
Binary file not shown.
|
Before Width: | Height: | Size: 303 B |
Binary file not shown.
|
Before Width: | Height: | Size: 531 B |
Binary file not shown.
|
Before Width: | Height: | Size: 470 B |
Binary file not shown.
|
Before Width: | Height: | Size: 927 B |
@ -11,7 +11,6 @@ DIRS += [
|
||||
DevToolsModules(
|
||||
'commandline-browser.css',
|
||||
'common.css',
|
||||
'responsivedesign.css',
|
||||
'splitters.css',
|
||||
'toolbars.css',
|
||||
'variables.css',
|
||||
|
||||
@ -1,355 +0,0 @@
|
||||
/* 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/. */
|
||||
|
||||
/* Responsive Mode */
|
||||
|
||||
@namespace html url("http://www.w3.org/1999/xhtml");
|
||||
|
||||
.browserContainer[responsivemode] {
|
||||
background-color: #222;
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.browserStack[responsivemode] {
|
||||
box-shadow: 0 0 7px black;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbar {
|
||||
-moz-appearance: none;
|
||||
background: transparent;
|
||||
/* text color is textColor from dark theme, since no theme is applied to
|
||||
* the responsive toolbar.
|
||||
*/
|
||||
color: hsl(210,30%,85%);
|
||||
margin: 10px 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-textinput {
|
||||
-moz-appearance: none;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #111;
|
||||
border-radius: 2px;
|
||||
padding: 0 5px;
|
||||
width: 200px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-textinput[attention] {
|
||||
border-color: #38ace6;
|
||||
background: rgba(56,172,230,0.4);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-menulist,
|
||||
.devtools-responsiveui-toolbarbutton {
|
||||
-moz-appearance: none;
|
||||
-moz-box-align: center;
|
||||
min-width: 32px;
|
||||
min-height: 22px;
|
||||
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
|
||||
border: 1px solid hsla(210,8%,5%,.45);
|
||||
border-radius: 0;
|
||||
background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
|
||||
box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
|
||||
margin: 0 3px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-menulist .menulist-editable-box {
|
||||
-moz-appearance: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-menulist html|*.menulist-editable-input {
|
||||
-moz-appearance: none;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
|
||||
background: hsla(212,7%,57%,.35);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
|
||||
-moz-box-orient: horizontal;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-menulist:-moz-focusring,
|
||||
.devtools-responsiveui-toolbarbutton:-moz-focusring {
|
||||
outline: 1px dotted hsla(210,30%,85%,0.7);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
|
||||
border-color: hsla(210,8%,5%,.6);
|
||||
background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
|
||||
box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-menulist[open=true],
|
||||
.devtools-responsiveui-toolbarbutton[open=true],
|
||||
.devtools-responsiveui-toolbarbutton[checked=true] {
|
||||
border-color: hsla(210,8%,5%,.6) !important;
|
||||
background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
|
||||
box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbarbutton[checked=true] {
|
||||
color: hsl(208,100%,60%);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbarbutton[checked=true]:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
|
||||
background-color: hsla(210,8%,5%,.2) !important;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-menulist > .menulist-label-box {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-menulist > .menulist-dropmarker {
|
||||
-moz-appearance: none;
|
||||
display: -moz-box;
|
||||
background-color: transparent;
|
||||
list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
|
||||
-moz-box-align: center;
|
||||
border-width: 0;
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
|
||||
-moz-appearance: none;
|
||||
color: inherit;
|
||||
border-width: 0;
|
||||
border-inline-end: 1px solid hsla(210,8%,5%,.45);
|
||||
box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
|
||||
box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbarbutton[type=menu-button] {
|
||||
padding: 0 1px;
|
||||
-moz-box-align: stretch;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
|
||||
.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
|
||||
-moz-appearance: none !important;
|
||||
list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
|
||||
-moz-box-align: center;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
|
||||
.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-close {
|
||||
list-style-image: url("chrome://devtools/skin/images/close.svg");
|
||||
}
|
||||
|
||||
.devtools-responsiveui-close > image {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-rotate {
|
||||
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png");
|
||||
}
|
||||
|
||||
@media (min-resolution: 1.1dppx) {
|
||||
.devtools-responsiveui-rotate {
|
||||
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png");
|
||||
}
|
||||
}
|
||||
|
||||
.devtools-responsiveui-touch {
|
||||
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch.png");
|
||||
-moz-image-region: rect(0px,16px,16px,0px);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-touch[checked] {
|
||||
-moz-image-region: rect(0px,32px,16px,16px);
|
||||
}
|
||||
|
||||
@media (min-resolution: 1.1dppx) {
|
||||
.devtools-responsiveui-touch {
|
||||
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch@2x.png");
|
||||
-moz-image-region: rect(0px,32px,32px,0px);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-touch[checked] {
|
||||
-moz-image-region: rect(0px,64px,32px,32px);
|
||||
}
|
||||
}
|
||||
|
||||
.devtools-responsiveui-screenshot {
|
||||
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot.png");
|
||||
}
|
||||
|
||||
@media (min-resolution: 1.1dppx) {
|
||||
.devtools-responsiveui-screenshot {
|
||||
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot@2x.png");
|
||||
}
|
||||
}
|
||||
|
||||
.devtools-responsiveui-resizebarV {
|
||||
width: 7px;
|
||||
height: 24px;
|
||||
cursor: ew-resize;
|
||||
transform: translate(12px, -12px);
|
||||
background-size: cover;
|
||||
background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer.png");
|
||||
}
|
||||
|
||||
.devtools-responsiveui-resizebarH {
|
||||
width: 24px;
|
||||
height: 7px;
|
||||
cursor: ns-resize;
|
||||
transform: translate(-12px, 12px);
|
||||
background-size: cover;
|
||||
background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer.png");
|
||||
}
|
||||
|
||||
.devtools-responsiveui-resizehandle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: se-resize;
|
||||
transform: translate(12px, 12px);
|
||||
background-size: cover;
|
||||
background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer.png");
|
||||
}
|
||||
|
||||
/* FxOS custom mode with additional buttons and phone look'n feel */
|
||||
|
||||
/* Hide devtools manual resizer */
|
||||
.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
|
||||
.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
|
||||
.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Gives responsive mode a phone look'n feel */
|
||||
.browserStack[responsivemode].fxos-mode {
|
||||
padding: 60px 15px 0;
|
||||
|
||||
border-radius: 25px / 20px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border: 1px solid #FFFFFF;
|
||||
border-bottom-width: 0;
|
||||
|
||||
background-color: #353535;
|
||||
|
||||
box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
|
||||
|
||||
background-image: linear-gradient(to right, #111 11%, #333 56%);
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-hardware-buttons {
|
||||
-moz-appearance: none;
|
||||
padding: 20px;
|
||||
|
||||
border: 1px solid #FFFFFF;
|
||||
border-bottom-left-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
border-top-width: 0;
|
||||
|
||||
box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
|
||||
|
||||
background-image: linear-gradient(to right, #111 11%, #333 56%);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-home-button {
|
||||
-moz-user-focus: ignore;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-home.png");
|
||||
}
|
||||
|
||||
.devtools-responsiveui-sleep-button {
|
||||
-moz-user-focus: ignore;
|
||||
-moz-appearance: none;
|
||||
/* compensate browserStack top padding */
|
||||
margin-top: -67px;
|
||||
margin-right: 10px;
|
||||
|
||||
min-width: 10px;
|
||||
width: 50px;
|
||||
height: 5px;
|
||||
|
||||
border: 1px solid #444;
|
||||
border-top-right-radius: 12px;
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-color: transparent;
|
||||
|
||||
background-image: linear-gradient(to top, #111 11%, #333 56%);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-sleep-button:hover:active {
|
||||
background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-volume-buttons {
|
||||
margin-left: -29px;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-volume-up-button,
|
||||
.devtools-responsiveui-volume-down-button {
|
||||
-moz-user-focus: ignore;
|
||||
-moz-appearance: none;
|
||||
border: 1px solid red;
|
||||
min-width: 8px;
|
||||
height: 40px;
|
||||
|
||||
border: 1px solid #444;
|
||||
border-right-color: transparent;
|
||||
|
||||
background-image: linear-gradient(to right, #111 11%, #333 56%);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-volume-up-button:hover:active,
|
||||
.devtools-responsiveui-volume-down-button:hover:active {
|
||||
background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
|
||||
}
|
||||
|
||||
.devtools-responsiveui-volume-up-button {
|
||||
border-top-left-radius: 12px;
|
||||
}
|
||||
|
||||
.devtools-responsiveui-volume-down-button {
|
||||
border-bottom-left-radius: 12px;
|
||||
}
|
||||
|
||||
@media (min-resolution: 1.1dppx) {
|
||||
.devtools-responsiveui-resizebarV {
|
||||
background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer@2x.png");
|
||||
}
|
||||
|
||||
.devtools-responsiveui-resizebarH {
|
||||
background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer@2x.png");
|
||||
}
|
||||
|
||||
.devtools-responsiveui-resizehandle {
|
||||
background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer@2x.png");
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user