forked from mirrors/gecko-dev
Bug 1349009 - Fix ESLint errors in responsivedesign.jsm. r=tromey
MozReview-Commit-ID: Jg1MleQYV9W --HG-- extra : rebase_source : ca8c329ccd6d9989ccb1ed414cef95309cc54767
This commit is contained in:
J. Ryan Stinnett
parent
c26a6274cc
commit
f71ff2641e
2 changed files with 299 additions and 248 deletions
|
|
@ -95,6 +95,7 @@ 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/responsivedesign/responsivedesign.jsm
|
||||
devtools/client/scratchpad/**
|
||||
devtools/client/shadereditor/**
|
||||
devtools/client/shared/*.jsm
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
|
||||
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
|
||||
/* 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/. */
|
||||
|
||||
const Ci = Components.interfaces;
|
||||
"use strict";
|
||||
|
||||
const Cu = Components.utils;
|
||||
|
||||
var {loader, require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
|
||||
var Telemetry = require("devtools/client/shared/telemetry");
|
||||
var {showDoorhanger} = require("devtools/client/shared/doorhanger");
|
||||
var {TouchEventSimulator} = require("devtools/shared/touch/simulator");
|
||||
var {Task} = require("devtools/shared/task");
|
||||
var promise = require("promise");
|
||||
var DevToolsUtils = require("devtools/shared/DevToolsUtils");
|
||||
var flags = require("devtools/shared/flags");
|
||||
var Services = require("Services");
|
||||
var EventEmitter = require("devtools/shared/event-emitter");
|
||||
var {ViewHelpers} = require("devtools/client/shared/widgets/view-helpers");
|
||||
var { LocalizationHelper } = require("devtools/shared/l10n");
|
||||
var { EmulationFront } = require("devtools/shared/fronts/emulation");
|
||||
const { loader, require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
|
||||
const { LocalizationHelper } = require("devtools/shared/l10n");
|
||||
const { Task } = require("devtools/shared/task");
|
||||
const Services = require("Services");
|
||||
const EventEmitter = require("devtools/shared/event-emitter");
|
||||
|
||||
loader.lazyImporter(this, "SystemAppProxy",
|
||||
"resource://gre/modules/SystemAppProxy.jsm");
|
||||
loader.lazyRequireGetter(this, "Telemetry", "devtools/client/shared/telemetry");
|
||||
loader.lazyRequireGetter(this, "showDoorhanger",
|
||||
"devtools/client/shared/doorhanger", true);
|
||||
loader.lazyRequireGetter(this, "TouchEventSimulator",
|
||||
"devtools/shared/touch/simulator", true);
|
||||
loader.lazyRequireGetter(this, "flags",
|
||||
"devtools/shared/flags");
|
||||
loader.lazyRequireGetter(this, "EmulationFront",
|
||||
"devtools/shared/fronts/emulation", true);
|
||||
loader.lazyRequireGetter(this, "DebuggerClient",
|
||||
"devtools/shared/client/main", true);
|
||||
loader.lazyRequireGetter(this, "DebuggerServer",
|
||||
|
|
@ -55,31 +55,31 @@ var Manager = {
|
|||
* Leave the responsive mode if active,
|
||||
* active the responsive mode if not active.
|
||||
*
|
||||
* @param aWindow the main window.
|
||||
* @param aTab the tab targeted.
|
||||
* @param window the main window.
|
||||
* @param tab the tab targeted.
|
||||
*/
|
||||
toggle: function (aWindow, aTab) {
|
||||
if (this.isActiveForTab(aTab)) {
|
||||
ActiveTabs.get(aTab).close();
|
||||
toggle: function (window, tab) {
|
||||
if (this.isActiveForTab(tab)) {
|
||||
ActiveTabs.get(tab).close();
|
||||
} else {
|
||||
this.openIfNeeded(aWindow, aTab);
|
||||
this.openIfNeeded(window, tab);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Launches the responsive mode.
|
||||
*
|
||||
* @param aWindow the main window.
|
||||
* @param aTab the tab targeted.
|
||||
* @param window the main window.
|
||||
* @param tab the tab targeted.
|
||||
* @returns {ResponsiveUI} the instance of ResponsiveUI for the current tab.
|
||||
*/
|
||||
openIfNeeded: Task.async(function* (aWindow, aTab) {
|
||||
openIfNeeded: Task.async(function* (window, tab) {
|
||||
let ui;
|
||||
if (!this.isActiveForTab(aTab)) {
|
||||
ui = new ResponsiveUI(aWindow, aTab);
|
||||
if (!this.isActiveForTab(tab)) {
|
||||
ui = new ResponsiveUI(window, tab);
|
||||
yield ui.inited;
|
||||
} else {
|
||||
ui = this.getResponsiveUIForTab(aTab);
|
||||
ui = this.getResponsiveUIForTab(tab);
|
||||
}
|
||||
return ui;
|
||||
}),
|
||||
|
|
@ -87,43 +87,44 @@ var Manager = {
|
|||
/**
|
||||
* Returns true if responsive view is active for the provided tab.
|
||||
*
|
||||
* @param aTab the tab targeted.
|
||||
* @param tab the tab targeted.
|
||||
*/
|
||||
isActiveForTab: function (aTab) {
|
||||
return ActiveTabs.has(aTab);
|
||||
isActiveForTab: function (tab) {
|
||||
return ActiveTabs.has(tab);
|
||||
},
|
||||
|
||||
/**
|
||||
* Return the responsive UI controller for a tab.
|
||||
*/
|
||||
getResponsiveUIForTab: function (aTab) {
|
||||
return ActiveTabs.get(aTab);
|
||||
getResponsiveUIForTab: function (tab) {
|
||||
return ActiveTabs.get(tab);
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle gcli commands.
|
||||
*
|
||||
* @param aWindow the browser window.
|
||||
* @param aTab the tab targeted.
|
||||
* @param aCommand the command name.
|
||||
* @param aArgs command arguments.
|
||||
* @param window the browser window.
|
||||
* @param tab the tab targeted.
|
||||
* @param command the command name.
|
||||
* @param args command arguments.
|
||||
*/
|
||||
handleGcliCommand: Task.async(function* (aWindow, aTab, aCommand, aArgs) {
|
||||
switch (aCommand) {
|
||||
handleGcliCommand: Task.async(function* (window, tab, command, args) {
|
||||
switch (command) {
|
||||
case "resize to":
|
||||
let ui = yield this.openIfNeeded(aWindow, aTab);
|
||||
ui.setViewportSize(aArgs);
|
||||
let ui = yield this.openIfNeeded(window, tab);
|
||||
ui.setViewportSize(args);
|
||||
break;
|
||||
case "resize on":
|
||||
this.openIfNeeded(aWindow, aTab);
|
||||
this.openIfNeeded(window, tab);
|
||||
break;
|
||||
case "resize off":
|
||||
if (this.isActiveForTab(aTab)) {
|
||||
yield ActiveTabs.get(aTab).close();
|
||||
if (this.isActiveForTab(tab)) {
|
||||
yield ActiveTabs.get(tab).close();
|
||||
}
|
||||
break;
|
||||
case "resize toggle":
|
||||
this.toggle(aWindow, aTab);
|
||||
this.toggle(window, tab);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
})
|
||||
|
|
@ -161,35 +162,34 @@ var defaultPresets = [
|
|||
{key: "1920x900", width: 1920, height: 900},
|
||||
];
|
||||
|
||||
function ResponsiveUI(aWindow, aTab)
|
||||
{
|
||||
this.mainWindow = aWindow;
|
||||
this.tab = aTab;
|
||||
function ResponsiveUI(window, tab) {
|
||||
this.mainWindow = window;
|
||||
this.tab = tab;
|
||||
this.mm = this.tab.linkedBrowser.messageManager;
|
||||
this.tabContainer = aWindow.gBrowser.tabContainer;
|
||||
this.browser = aTab.linkedBrowser;
|
||||
this.chromeDoc = aWindow.document;
|
||||
this.container = aWindow.gBrowser.getBrowserContainer(this.browser);
|
||||
this.tabContainer = window.gBrowser.tabContainer;
|
||||
this.browser = tab.linkedBrowser;
|
||||
this.chromeDoc = window.document;
|
||||
this.container = window.gBrowser.getBrowserContainer(this.browser);
|
||||
this.stack = this.container.querySelector(".browserStack");
|
||||
this._telemetry = new Telemetry();
|
||||
|
||||
// Let's bind some callbacks.
|
||||
this.bound_presetSelected = this.presetSelected.bind(this);
|
||||
this.bound_handleManualInput = this.handleManualInput.bind(this);
|
||||
this.bound_addPreset = this.addPreset.bind(this);
|
||||
this.bound_removePreset = this.removePreset.bind(this);
|
||||
this.bound_rotate = this.rotate.bind(this);
|
||||
this.bound_screenshot = () => this.screenshot();
|
||||
this.bound_touch = this.toggleTouch.bind(this);
|
||||
this.bound_close = this.close.bind(this);
|
||||
this.bound_startResizing = this.startResizing.bind(this);
|
||||
this.bound_stopResizing = this.stopResizing.bind(this);
|
||||
this.bound_onDrag = this.onDrag.bind(this);
|
||||
this.bound_changeUA = this.changeUA.bind(this);
|
||||
this.bound_onContentResize = this.onContentResize.bind(this);
|
||||
this.boundPresetSelected = this.presetSelected.bind(this);
|
||||
this.boundHandleManualInput = this.handleManualInput.bind(this);
|
||||
this.boundAddPreset = this.addPreset.bind(this);
|
||||
this.boundRemovePreset = this.removePreset.bind(this);
|
||||
this.boundRotate = this.rotate.bind(this);
|
||||
this.boundScreenshot = () => this.screenshot();
|
||||
this.boundTouch = this.toggleTouch.bind(this);
|
||||
this.boundClose = this.close.bind(this);
|
||||
this.boundStartResizing = this.startResizing.bind(this);
|
||||
this.boundStopResizing = this.stopResizing.bind(this);
|
||||
this.boundOnDrag = this.onDrag.bind(this);
|
||||
this.boundChangeUA = this.changeUA.bind(this);
|
||||
this.boundOnContentResize = this.onContentResize.bind(this);
|
||||
|
||||
this.mm.addMessageListener("ResponsiveMode:OnContentResize",
|
||||
this.bound_onContentResize);
|
||||
this.boundOnContentResize);
|
||||
|
||||
// We must be ready to handle window or tab close now that we have saved
|
||||
// ourselves in ActiveTabs. Otherwise we risk leaking the window.
|
||||
|
|
@ -207,11 +207,11 @@ ResponsiveUI.prototype = {
|
|||
get transitionsEnabled() {
|
||||
return this._transitionsEnabled;
|
||||
},
|
||||
set transitionsEnabled(aValue) {
|
||||
this._transitionsEnabled = aValue;
|
||||
if (aValue && !this._resizing && this.stack.hasAttribute("responsivemode")) {
|
||||
set transitionsEnabled(value) {
|
||||
this._transitionsEnabled = value;
|
||||
if (value && !this._resizing && this.stack.hasAttribute("responsivemode")) {
|
||||
this.stack.removeAttribute("notransition");
|
||||
} else if (!aValue) {
|
||||
} else if (!value) {
|
||||
this.stack.setAttribute("notransition", "true");
|
||||
}
|
||||
},
|
||||
|
|
@ -247,7 +247,9 @@ ResponsiveUI.prototype = {
|
|||
if (Services.prefs.getBoolPref("devtools.responsiveUI.rotate")) {
|
||||
this.rotate();
|
||||
}
|
||||
} catch (e) {}
|
||||
} catch (e) {
|
||||
// There is no default value defined, so errors are expected.
|
||||
}
|
||||
|
||||
// Touch events support
|
||||
this.touchEnableBefore = false;
|
||||
|
|
@ -308,7 +310,8 @@ ResponsiveUI.prototype = {
|
|||
this.customPreset.width = Math.min(MAX_WIDTH, width);
|
||||
this.customPreset.height = Math.min(MAX_HEIGHT, height);
|
||||
|
||||
this.currentPresetKey = Services.prefs.getCharPref("devtools.responsiveUI.currentPreset");
|
||||
this.currentPresetKey =
|
||||
Services.prefs.getCharPref("devtools.responsiveUI.currentPreset");
|
||||
} catch (e) {
|
||||
// Default size. The first preset (custom) is the one that will be used.
|
||||
let bbox = this.stack.getBoundingClientRect();
|
||||
|
|
@ -352,22 +355,23 @@ ResponsiveUI.prototype = {
|
|||
yield this.waitForMessage("ResponsiveMode:OnContentResize");
|
||||
}
|
||||
|
||||
if (this.isResizing)
|
||||
if (this.isResizing) {
|
||||
this.stopResizing();
|
||||
}
|
||||
|
||||
// Remove listeners.
|
||||
this.menulist.removeEventListener("select", this.bound_presetSelected, true);
|
||||
this.menulist.removeEventListener("change", this.bound_handleManualInput, true);
|
||||
this.menulist.removeEventListener("select", this.boundPresetSelected, true);
|
||||
this.menulist.removeEventListener("change", this.boundHandleManualInput, true);
|
||||
this.mainWindow.removeEventListener("unload", this);
|
||||
this.tab.removeEventListener("TabClose", this);
|
||||
this.tabContainer.removeEventListener("TabSelect", this);
|
||||
this.rotatebutton.removeEventListener("command", this.bound_rotate, true);
|
||||
this.screenshotbutton.removeEventListener("command", this.bound_screenshot, true);
|
||||
this.closebutton.removeEventListener("command", this.bound_close, true);
|
||||
this.addbutton.removeEventListener("command", this.bound_addPreset, true);
|
||||
this.removebutton.removeEventListener("command", this.bound_removePreset, true);
|
||||
this.touchbutton.removeEventListener("command", this.bound_touch, true);
|
||||
this.userAgentInput.removeEventListener("blur", this.bound_changeUA, true);
|
||||
this.rotatebutton.removeEventListener("command", this.boundRotate, true);
|
||||
this.screenshotbutton.removeEventListener("command", this.boundScreenshot, true);
|
||||
this.closebutton.removeEventListener("command", this.boundClose, true);
|
||||
this.addbutton.removeEventListener("command", this.boundAddPreset, true);
|
||||
this.removebutton.removeEventListener("command", this.boundRemovePreset, true);
|
||||
this.touchbutton.removeEventListener("command", this.boundTouch, true);
|
||||
this.userAgentInput.removeEventListener("blur", this.boundChangeUA, true);
|
||||
|
||||
// Removed elements.
|
||||
this.container.removeChild(this.toolbar);
|
||||
|
|
@ -429,8 +433,8 @@ ResponsiveUI.prototype = {
|
|||
/**
|
||||
* Handle events
|
||||
*/
|
||||
handleEvent: function (aEvent) {
|
||||
switch (aEvent.type) {
|
||||
handleEvent: function (event) {
|
||||
switch (event.type) {
|
||||
case "TabClose":
|
||||
case "unload":
|
||||
this.close();
|
||||
|
|
@ -452,14 +456,14 @@ ResponsiveUI.prototype = {
|
|||
/**
|
||||
* Check the menu items.
|
||||
*/
|
||||
checkMenus: function RUI_checkMenus() {
|
||||
checkMenus: function () {
|
||||
this.chromeDoc.getElementById("menu_responsiveUI").setAttribute("checked", "true");
|
||||
},
|
||||
|
||||
/**
|
||||
* Uncheck the menu items.
|
||||
*/
|
||||
unCheckMenus: function RUI_unCheckMenus() {
|
||||
unCheckMenus: function () {
|
||||
let el = this.chromeDoc.getElementById("menu_responsiveUI");
|
||||
if (el) {
|
||||
el.setAttribute("checked", "false");
|
||||
|
|
@ -472,9 +476,12 @@ ResponsiveUI.prototype = {
|
|||
* <vbox class="browserContainer"> From tabbrowser.xml
|
||||
* <toolbar class="devtools-responsiveui-toolbar">
|
||||
* <menulist class="devtools-responsiveui-menulist"/> // presets
|
||||
* <toolbarbutton tabindex="0" class="devtools-responsiveui-toolbarbutton" tooltiptext="rotate"/> // rotate
|
||||
* <toolbarbutton tabindex="0" class="devtools-responsiveui-toolbarbutton" tooltiptext="screenshot"/> // screenshot
|
||||
* <toolbarbutton tabindex="0" class="devtools-responsiveui-toolbarbutton" tooltiptext="Leave Responsive Design Mode"/> // close
|
||||
* <toolbarbutton tabindex="0" class="devtools-responsiveui-toolbarbutton"
|
||||
* tooltiptext="rotate"/> // rotate
|
||||
* <toolbarbutton tabindex="0" class="devtools-responsiveui-toolbarbutton"
|
||||
* tooltiptext="screenshot"/> // screenshot
|
||||
* <toolbarbutton tabindex="0" class="devtools-responsiveui-toolbarbutton"
|
||||
* tooltiptext="Leave Responsive Design Mode"/> // close
|
||||
* </toolbar>
|
||||
* <stack class="browserStack"> From tabbrowser.xml
|
||||
* <browser/>
|
||||
|
|
@ -493,7 +500,7 @@ ResponsiveUI.prototype = {
|
|||
* </toolbar>
|
||||
* </vbox>
|
||||
*/
|
||||
buildUI: function RUI_buildUI() {
|
||||
buildUI: function () {
|
||||
// Toolbar
|
||||
this.toolbar = this.chromeDoc.createElement("toolbar");
|
||||
this.toolbar.className = "devtools-responsiveui-toolbar";
|
||||
|
|
@ -503,8 +510,8 @@ ResponsiveUI.prototype = {
|
|||
this.menulist.className = "devtools-responsiveui-menulist";
|
||||
this.menulist.setAttribute("editable", "true");
|
||||
|
||||
this.menulist.addEventListener("select", this.bound_presetSelected, true);
|
||||
this.menulist.addEventListener("change", this.bound_handleManualInput, true);
|
||||
this.menulist.addEventListener("select", this.boundPresetSelected, true);
|
||||
this.menulist.addEventListener("change", this.boundHandleManualInput, true);
|
||||
|
||||
this.menuitems = new Map();
|
||||
|
||||
|
|
@ -513,12 +520,18 @@ ResponsiveUI.prototype = {
|
|||
this.menulist.appendChild(menupopup);
|
||||
|
||||
this.addbutton = this.chromeDoc.createElement("menuitem");
|
||||
this.addbutton.setAttribute("label", this.strings.GetStringFromName("responsiveUI.addPreset"));
|
||||
this.addbutton.addEventListener("command", this.bound_addPreset, true);
|
||||
this.addbutton.setAttribute(
|
||||
"label",
|
||||
this.strings.GetStringFromName("responsiveUI.addPreset")
|
||||
);
|
||||
this.addbutton.addEventListener("command", this.boundAddPreset, true);
|
||||
|
||||
this.removebutton = this.chromeDoc.createElement("menuitem");
|
||||
this.removebutton.setAttribute("label", this.strings.GetStringFromName("responsiveUI.removePreset"));
|
||||
this.removebutton.addEventListener("command", this.bound_removePreset, true);
|
||||
this.removebutton.setAttribute(
|
||||
"label",
|
||||
this.strings.GetStringFromName("responsiveUI.removePreset")
|
||||
);
|
||||
this.removebutton.addEventListener("command", this.boundRemovePreset, true);
|
||||
|
||||
menupopup.appendChild(this.chromeDoc.createElement("menuseparator"));
|
||||
menupopup.appendChild(this.addbutton);
|
||||
|
|
@ -526,21 +539,33 @@ ResponsiveUI.prototype = {
|
|||
|
||||
this.rotatebutton = this.chromeDoc.createElement("toolbarbutton");
|
||||
this.rotatebutton.setAttribute("tabindex", "0");
|
||||
this.rotatebutton.setAttribute("tooltiptext", this.strings.GetStringFromName("responsiveUI.rotate2"));
|
||||
this.rotatebutton.className = "devtools-responsiveui-toolbarbutton devtools-responsiveui-rotate";
|
||||
this.rotatebutton.addEventListener("command", this.bound_rotate, true);
|
||||
this.rotatebutton.setAttribute(
|
||||
"tooltiptext",
|
||||
this.strings.GetStringFromName("responsiveUI.rotate2")
|
||||
);
|
||||
this.rotatebutton.className =
|
||||
"devtools-responsiveui-toolbarbutton devtools-responsiveui-rotate";
|
||||
this.rotatebutton.addEventListener("command", this.boundRotate, true);
|
||||
|
||||
this.screenshotbutton = this.chromeDoc.createElement("toolbarbutton");
|
||||
this.screenshotbutton.setAttribute("tabindex", "0");
|
||||
this.screenshotbutton.setAttribute("tooltiptext", this.strings.GetStringFromName("responsiveUI.screenshot"));
|
||||
this.screenshotbutton.className = "devtools-responsiveui-toolbarbutton devtools-responsiveui-screenshot";
|
||||
this.screenshotbutton.addEventListener("command", this.bound_screenshot, true);
|
||||
this.screenshotbutton.setAttribute(
|
||||
"tooltiptext",
|
||||
this.strings.GetStringFromName("responsiveUI.screenshot")
|
||||
);
|
||||
this.screenshotbutton.className =
|
||||
"devtools-responsiveui-toolbarbutton devtools-responsiveui-screenshot";
|
||||
this.screenshotbutton.addEventListener("command", this.boundScreenshot, true);
|
||||
|
||||
this.closebutton = this.chromeDoc.createElement("toolbarbutton");
|
||||
this.closebutton.setAttribute("tabindex", "0");
|
||||
this.closebutton.className = "devtools-responsiveui-toolbarbutton devtools-responsiveui-close";
|
||||
this.closebutton.setAttribute("tooltiptext", this.strings.GetStringFromName("responsiveUI.close1"));
|
||||
this.closebutton.addEventListener("command", this.bound_close, true);
|
||||
this.closebutton.className =
|
||||
"devtools-responsiveui-toolbarbutton devtools-responsiveui-close";
|
||||
this.closebutton.setAttribute(
|
||||
"tooltiptext",
|
||||
this.strings.GetStringFromName("responsiveUI.close1")
|
||||
);
|
||||
this.closebutton.addEventListener("command", this.boundClose, true);
|
||||
|
||||
this.toolbar.appendChild(this.closebutton);
|
||||
this.toolbar.appendChild(this.menulist);
|
||||
|
|
@ -548,9 +573,13 @@ ResponsiveUI.prototype = {
|
|||
|
||||
this.touchbutton = this.chromeDoc.createElement("toolbarbutton");
|
||||
this.touchbutton.setAttribute("tabindex", "0");
|
||||
this.touchbutton.setAttribute("tooltiptext", this.strings.GetStringFromName("responsiveUI.touch"));
|
||||
this.touchbutton.className = "devtools-responsiveui-toolbarbutton devtools-responsiveui-touch";
|
||||
this.touchbutton.addEventListener("command", this.bound_touch, true);
|
||||
this.touchbutton.setAttribute(
|
||||
"tooltiptext",
|
||||
this.strings.GetStringFromName("responsiveUI.touch")
|
||||
);
|
||||
this.touchbutton.className =
|
||||
"devtools-responsiveui-toolbarbutton devtools-responsiveui-touch";
|
||||
this.touchbutton.addEventListener("command", this.boundTouch, true);
|
||||
this.toolbar.appendChild(this.touchbutton);
|
||||
|
||||
this.toolbar.appendChild(this.screenshotbutton);
|
||||
|
|
@ -559,7 +588,7 @@ ResponsiveUI.prototype = {
|
|||
this.userAgentInput.className = "devtools-responsiveui-textinput";
|
||||
this.userAgentInput.setAttribute("placeholder",
|
||||
this.strings.GetStringFromName("responsiveUI.userAgentPlaceholder"));
|
||||
this.userAgentInput.addEventListener("blur", this.bound_changeUA, true);
|
||||
this.userAgentInput.addEventListener("blur", this.boundChangeUA, true);
|
||||
this.userAgentInput.hidden = true;
|
||||
this.toolbar.appendChild(this.userAgentInput);
|
||||
|
||||
|
|
@ -570,21 +599,21 @@ ResponsiveUI.prototype = {
|
|||
this.resizer.setAttribute("right", "0");
|
||||
this.resizer.setAttribute("bottom", "0");
|
||||
this.resizer.setAttribute("tooltiptext", resizerTooltip);
|
||||
this.resizer.onmousedown = this.bound_startResizing;
|
||||
this.resizer.onmousedown = this.boundStartResizing;
|
||||
|
||||
this.resizeBarV = this.chromeDoc.createElement("box");
|
||||
this.resizeBarV.className = "devtools-responsiveui-resizebarV";
|
||||
this.resizeBarV.setAttribute("top", "0");
|
||||
this.resizeBarV.setAttribute("right", "0");
|
||||
this.resizeBarV.setAttribute("tooltiptext", resizerTooltip);
|
||||
this.resizeBarV.onmousedown = this.bound_startResizing;
|
||||
this.resizeBarV.onmousedown = this.boundStartResizing;
|
||||
|
||||
this.resizeBarH = this.chromeDoc.createElement("box");
|
||||
this.resizeBarH.className = "devtools-responsiveui-resizebarH";
|
||||
this.resizeBarH.setAttribute("bottom", "0");
|
||||
this.resizeBarH.setAttribute("left", "0");
|
||||
this.resizeBarH.setAttribute("tooltiptext", resizerTooltip);
|
||||
this.resizeBarH.onmousedown = this.bound_startResizing;
|
||||
this.resizeBarH.onmousedown = this.boundStartResizing;
|
||||
|
||||
this.container.insertBefore(this.toolbar, this.stack);
|
||||
this.stack.appendChild(this.resizer);
|
||||
|
|
@ -641,7 +670,8 @@ ResponsiveUI.prototype = {
|
|||
bottomToolbar.setAttribute("pack", "center");
|
||||
|
||||
let homeButton = this.chromeDoc.createElement("toolbarbutton");
|
||||
homeButton.className = "devtools-responsiveui-toolbarbutton devtools-responsiveui-home-button";
|
||||
homeButton.className =
|
||||
"devtools-responsiveui-toolbarbutton devtools-responsiveui-home-button";
|
||||
homeButton.addEventListener("mousedown", () => {
|
||||
SystemAppProxy.dispatchKeyboardEvent("keydown", { key: "Home" });
|
||||
});
|
||||
|
|
@ -656,7 +686,7 @@ ResponsiveUI.prototype = {
|
|||
/**
|
||||
* Validate and apply any user input on the editable menulist
|
||||
*/
|
||||
handleManualInput: function RUI_handleManualInput() {
|
||||
handleManualInput: function () {
|
||||
let userInput = this.menulist.inputField.value;
|
||||
let value = INPUT_PARSER.exec(userInput);
|
||||
let selectedPreset = this.menuitems.get(this.selectedItem);
|
||||
|
|
@ -688,9 +718,9 @@ ResponsiveUI.prototype = {
|
|||
/**
|
||||
* Build the presets list and append it to the menupopup.
|
||||
*
|
||||
* @param aParent menupopup.
|
||||
* @param parent menupopup.
|
||||
*/
|
||||
registerPresets: function RUI_registerPresets(aParent) {
|
||||
registerPresets: function (parent) {
|
||||
let fragment = this.chromeDoc.createDocumentFragment();
|
||||
let doc = this.chromeDoc;
|
||||
|
||||
|
|
@ -711,37 +741,39 @@ ResponsiveUI.prototype = {
|
|||
this.setMenuLabel(menuitem, preset);
|
||||
fragment.appendChild(menuitem);
|
||||
}
|
||||
aParent.appendChild(fragment);
|
||||
parent.appendChild(fragment);
|
||||
},
|
||||
|
||||
/**
|
||||
* Set the menuitem label of a preset.
|
||||
*
|
||||
* @param aMenuitem menuitem to edit.
|
||||
* @param aPreset associated preset.
|
||||
* @param menuitem menuitem to edit.
|
||||
* @param preset associated preset.
|
||||
*/
|
||||
setMenuLabel: function RUI_setMenuLabel(aMenuitem, aPreset) {
|
||||
setMenuLabel: function (menuitem, preset) {
|
||||
let size = SHARED_L10N.getFormatStr("dimensions",
|
||||
Math.round(aPreset.width), Math.round(aPreset.height));
|
||||
Math.round(preset.width), Math.round(preset.height));
|
||||
|
||||
// .inputField might be not reachable yet (async XBL loading)
|
||||
if (this.menulist.inputField) {
|
||||
this.menulist.inputField.value = size;
|
||||
}
|
||||
|
||||
if (aPreset.custom) {
|
||||
size = this.strings.formatStringFromName("responsiveUI.customResolution", [size], 1);
|
||||
} else if (aPreset.name != null && aPreset.name !== "") {
|
||||
size = this.strings.formatStringFromName("responsiveUI.namedResolution", [size, aPreset.name], 2);
|
||||
if (preset.custom) {
|
||||
size = this.strings.formatStringFromName("responsiveUI.customResolution",
|
||||
[size], 1);
|
||||
} else if (preset.name != null && preset.name !== "") {
|
||||
size = this.strings.formatStringFromName("responsiveUI.namedResolution",
|
||||
[size, preset.name], 2);
|
||||
}
|
||||
|
||||
aMenuitem.setAttribute("label", size);
|
||||
menuitem.setAttribute("label", size);
|
||||
},
|
||||
|
||||
/**
|
||||
* When a preset is selected, apply it.
|
||||
*/
|
||||
presetSelected: function RUI_presetSelected() {
|
||||
presetSelected: function () {
|
||||
if (this.menulist.selectedItem.getAttribute("ispreset") === "true") {
|
||||
this.selectedItem = this.menulist.selectedItem;
|
||||
|
||||
|
|
@ -772,13 +804,14 @@ ResponsiveUI.prototype = {
|
|||
/**
|
||||
* Add a preset to the list and the memory
|
||||
*/
|
||||
addPreset: function RUI_addPreset() {
|
||||
addPreset: function () {
|
||||
let w = this.customPreset.width;
|
||||
let h = this.customPreset.height;
|
||||
let newName = {};
|
||||
|
||||
let title = this.strings.GetStringFromName("responsiveUI.customNamePromptTitle1");
|
||||
let message = this.strings.formatStringFromName("responsiveUI.customNamePromptMsg", [w, h], 2);
|
||||
let message = this.strings.formatStringFromName("responsiveUI.customNamePromptMsg",
|
||||
[w, h], 2);
|
||||
let promptOk = Services.prompt.prompt(null, title, message, newName, null, {});
|
||||
|
||||
if (!promptOk) {
|
||||
|
|
@ -797,24 +830,22 @@ ResponsiveUI.prototype = {
|
|||
this.presets.push(newPreset);
|
||||
|
||||
// Sort the presets according to width/height ascending order
|
||||
this.presets.sort(function RUI_sortPresets(aPresetA, aPresetB) {
|
||||
this.presets.sort((presetA, presetB) => {
|
||||
// We keep custom preset at first
|
||||
if (aPresetA.custom && !aPresetB.custom) {
|
||||
if (presetA.custom && !presetB.custom) {
|
||||
return 1;
|
||||
}
|
||||
if (!aPresetA.custom && aPresetB.custom) {
|
||||
if (!presetA.custom && presetB.custom) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
if (aPresetA.width === aPresetB.width) {
|
||||
if (aPresetA.height === aPresetB.height) {
|
||||
if (presetA.width === presetB.width) {
|
||||
if (presetA.height === presetB.height) {
|
||||
return 0;
|
||||
} else {
|
||||
return aPresetA.height > aPresetB.height;
|
||||
}
|
||||
} else {
|
||||
return aPresetA.width > aPresetB.width;
|
||||
return presetA.height > presetB.height;
|
||||
}
|
||||
return presetA.width > presetB.width;
|
||||
});
|
||||
|
||||
this.savePresets();
|
||||
|
|
@ -836,7 +867,7 @@ ResponsiveUI.prototype = {
|
|||
/**
|
||||
* remove a preset from the list and the memory
|
||||
*/
|
||||
removePreset: function RUI_removePreset() {
|
||||
removePreset: function () {
|
||||
let selectedPreset = this.menuitems.get(this.selectedItem);
|
||||
let w = selectedPreset.width;
|
||||
let h = selectedPreset.height;
|
||||
|
|
@ -863,7 +894,7 @@ ResponsiveUI.prototype = {
|
|||
/**
|
||||
* Swap width and height.
|
||||
*/
|
||||
rotate: function RUI_rotate() {
|
||||
rotate: function () {
|
||||
let selectedPreset = this.menuitems.get(this.selectedItem);
|
||||
let width = this.rotateValue ? selectedPreset.height : selectedPreset.width;
|
||||
let height = this.rotateValue ? selectedPreset.width : selectedPreset.height;
|
||||
|
|
@ -884,24 +915,26 @@ ResponsiveUI.prototype = {
|
|||
/**
|
||||
* Take a screenshot of the page.
|
||||
*
|
||||
* @param aFileName name of the screenshot file (used for tests).
|
||||
* @param filename name of the screenshot file (used for tests).
|
||||
*/
|
||||
screenshot: function RUI_screenshot(aFileName) {
|
||||
let filename = aFileName;
|
||||
screenshot: function (filename) {
|
||||
if (!filename) {
|
||||
let date = new Date();
|
||||
let month = ("0" + (date.getMonth() + 1)).substr(-2, 2);
|
||||
let day = ("0" + date.getDate()).substr(-2, 2);
|
||||
let dateString = [date.getFullYear(), month, day].join("-");
|
||||
let timeString = date.toTimeString().replace(/:/g, ".").split(" ")[0];
|
||||
filename = this.strings.formatStringFromName("responsiveUI.screenshotGeneratedFilename", [dateString, timeString], 2);
|
||||
filename =
|
||||
this.strings.formatStringFromName("responsiveUI.screenshotGeneratedFilename",
|
||||
[dateString, timeString], 2);
|
||||
}
|
||||
let mm = this.tab.linkedBrowser.messageManager;
|
||||
let chromeWindow = this.chromeDoc.defaultView;
|
||||
let doc = chromeWindow.document;
|
||||
function onScreenshot(aMessage) {
|
||||
function onScreenshot(message) {
|
||||
mm.removeMessageListener("ResponsiveMode:RequestScreenshot:Done", onScreenshot);
|
||||
chromeWindow.saveURL(aMessage.data, filename + ".png", null, true, true, doc.documentURIObject, doc);
|
||||
chromeWindow.saveURL(message.data, filename + ".png", null, true, true,
|
||||
doc.documentURIObject, doc);
|
||||
}
|
||||
mm.addMessageListener("ResponsiveMode:RequestScreenshot:Done", onScreenshot);
|
||||
mm.sendAsyncMessage("ResponsiveMode:RequestScreenshot");
|
||||
|
|
@ -910,17 +943,17 @@ ResponsiveUI.prototype = {
|
|||
/**
|
||||
* Enable/Disable mouse -> touch events translation.
|
||||
*/
|
||||
enableTouch: function RUI_enableTouch() {
|
||||
enableTouch: function () {
|
||||
this.touchbutton.setAttribute("checked", "true");
|
||||
return this.touchEventSimulator.start();
|
||||
},
|
||||
|
||||
disableTouch: function RUI_disableTouch() {
|
||||
disableTouch: function () {
|
||||
this.touchbutton.removeAttribute("checked");
|
||||
return this.touchEventSimulator.stop();
|
||||
},
|
||||
|
||||
hideTouchNotification: function RUI_hideTouchNotification() {
|
||||
hideTouchNotification: function () {
|
||||
let nbox = this.mainWindow.gBrowser.getNotificationBox(this.browser);
|
||||
let n = nbox.getNotificationWithValue("responsive-ui-need-reload");
|
||||
if (n) {
|
||||
|
|
@ -932,27 +965,32 @@ ResponsiveUI.prototype = {
|
|||
this.hideTouchNotification();
|
||||
if (this.touchEventSimulator.enabled) {
|
||||
this.disableTouch();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
let isReloadNeeded = yield this.enableTouch();
|
||||
if (isReloadNeeded) {
|
||||
if (Services.prefs.getBoolPref("devtools.responsiveUI.no-reload-notification")) {
|
||||
if (!isReloadNeeded) {
|
||||
return;
|
||||
}
|
||||
|
||||
const PREF = "devtools.responsiveUI.no-reload-notification";
|
||||
if (Services.prefs.getBoolPref(PREF)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let nbox = this.mainWindow.gBrowser.getNotificationBox(this.browser);
|
||||
|
||||
var buttons = [{
|
||||
let buttons = [{
|
||||
label: this.strings.GetStringFromName("responsiveUI.notificationReload"),
|
||||
callback: () => {
|
||||
this.browser.reload();
|
||||
},
|
||||
accessKey: this.strings.GetStringFromName("responsiveUI.notificationReload_accesskey"),
|
||||
callback: () => this.browser.reload(),
|
||||
accessKey:
|
||||
this.strings.GetStringFromName("responsiveUI.notificationReload_accesskey"),
|
||||
}, {
|
||||
label: this.strings.GetStringFromName("responsiveUI.dontShowReloadNotification"),
|
||||
callback: function () {
|
||||
Services.prefs.setBoolPref("devtools.responsiveUI.no-reload-notification", true);
|
||||
},
|
||||
accessKey: this.strings.GetStringFromName("responsiveUI.dontShowReloadNotification_accesskey"),
|
||||
callback: () => Services.prefs.setBoolPref(PREF, true),
|
||||
accessKey:
|
||||
this.strings
|
||||
.GetStringFromName("responsiveUI.dontShowReloadNotification_accesskey"),
|
||||
}];
|
||||
|
||||
nbox.appendNotification(
|
||||
|
|
@ -960,22 +998,21 @@ ResponsiveUI.prototype = {
|
|||
"responsive-ui-need-reload",
|
||||
null,
|
||||
nbox.PRIORITY_INFO_LOW,
|
||||
buttons);
|
||||
}
|
||||
}
|
||||
buttons
|
||||
);
|
||||
}),
|
||||
|
||||
waitForReload() {
|
||||
let navigatedDeferred = promise.defer();
|
||||
return new Promise(resolve => {
|
||||
let onNavigated = (_, { state }) => {
|
||||
if (state != "stop") {
|
||||
return;
|
||||
}
|
||||
this.client.removeListener("tabNavigated", onNavigated);
|
||||
navigatedDeferred.resolve();
|
||||
resolve();
|
||||
};
|
||||
this.client.addListener("tabNavigated", onNavigated);
|
||||
return navigatedDeferred.promise;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -1024,45 +1061,52 @@ ResponsiveUI.prototype = {
|
|||
}
|
||||
},
|
||||
|
||||
setWidth: function RUI_setWidth(aWidth) {
|
||||
aWidth = Math.min(Math.max(aWidth, MIN_WIDTH), MAX_WIDTH);
|
||||
this.stack.style.maxWidth = this.stack.style.minWidth = aWidth + "px";
|
||||
setWidth: function (width) {
|
||||
width = Math.min(Math.max(width, MIN_WIDTH), MAX_WIDTH);
|
||||
this.stack.style.maxWidth = this.stack.style.minWidth = width + "px";
|
||||
|
||||
if (!this.ignoreX)
|
||||
this.resizeBarH.setAttribute("left", Math.round(aWidth / 2));
|
||||
if (!this.ignoreX) {
|
||||
this.resizeBarH.setAttribute("left", Math.round(width / 2));
|
||||
}
|
||||
|
||||
let selectedPreset = this.menuitems.get(this.selectedItem);
|
||||
|
||||
if (selectedPreset.custom) {
|
||||
selectedPreset.width = aWidth;
|
||||
selectedPreset.width = width;
|
||||
this.setMenuLabel(this.selectedItem, selectedPreset);
|
||||
}
|
||||
},
|
||||
|
||||
setHeight: function RUI_setHeight(aHeight) {
|
||||
aHeight = Math.min(Math.max(aHeight, MIN_HEIGHT), MAX_HEIGHT);
|
||||
this.stack.style.maxHeight = this.stack.style.minHeight = aHeight + "px";
|
||||
setHeight: function (height) {
|
||||
height = Math.min(Math.max(height, MIN_HEIGHT), MAX_HEIGHT);
|
||||
this.stack.style.maxHeight = this.stack.style.minHeight = height + "px";
|
||||
|
||||
if (!this.ignoreY)
|
||||
this.resizeBarV.setAttribute("top", Math.round(aHeight / 2));
|
||||
if (!this.ignoreY) {
|
||||
this.resizeBarV.setAttribute("top", Math.round(height / 2));
|
||||
}
|
||||
|
||||
let selectedPreset = this.menuitems.get(this.selectedItem);
|
||||
if (selectedPreset.custom) {
|
||||
selectedPreset.height = aHeight;
|
||||
selectedPreset.height = height;
|
||||
this.setMenuLabel(this.selectedItem, selectedPreset);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Start the process of resizing the browser.
|
||||
*
|
||||
* @param aEvent
|
||||
* @param event
|
||||
*/
|
||||
startResizing: function RUI_startResizing(aEvent) {
|
||||
startResizing: function (event) {
|
||||
let selectedPreset = this.menuitems.get(this.selectedItem);
|
||||
|
||||
if (!selectedPreset.custom) {
|
||||
this.customPreset.width = this.rotateValue ? selectedPreset.height : selectedPreset.width;
|
||||
this.customPreset.height = this.rotateValue ? selectedPreset.width : selectedPreset.height;
|
||||
if (this.rotateValue) {
|
||||
this.customPreset.width = selectedPreset.height;
|
||||
this.customPreset.height = selectedPreset.width;
|
||||
} else {
|
||||
this.customPreset.width = selectedPreset.width;
|
||||
this.customPreset.height = selectedPreset.height;
|
||||
}
|
||||
|
||||
let menuitem = this.customMenuitem;
|
||||
this.setMenuLabel(menuitem, this.customPreset);
|
||||
|
|
@ -1070,18 +1114,18 @@ ResponsiveUI.prototype = {
|
|||
this.currentPresetKey = this.customPreset.key;
|
||||
this.menulist.selectedItem = menuitem;
|
||||
}
|
||||
this.mainWindow.addEventListener("mouseup", this.bound_stopResizing, true);
|
||||
this.mainWindow.addEventListener("mousemove", this.bound_onDrag, true);
|
||||
this.mainWindow.addEventListener("mouseup", this.boundStopResizing, true);
|
||||
this.mainWindow.addEventListener("mousemove", this.boundOnDrag, true);
|
||||
this.container.style.pointerEvents = "none";
|
||||
|
||||
this._resizing = true;
|
||||
this.stack.setAttribute("notransition", "true");
|
||||
|
||||
this.lastScreenX = aEvent.screenX;
|
||||
this.lastScreenY = aEvent.screenY;
|
||||
this.lastScreenX = event.screenX;
|
||||
this.lastScreenY = event.screenY;
|
||||
|
||||
this.ignoreY = (aEvent.target === this.resizeBarV);
|
||||
this.ignoreX = (aEvent.target === this.resizeBarH);
|
||||
this.ignoreY = (event.target === this.resizeBarV);
|
||||
this.ignoreX = (event.target === this.resizeBarH);
|
||||
|
||||
this.isResizing = true;
|
||||
},
|
||||
|
|
@ -1089,22 +1133,24 @@ ResponsiveUI.prototype = {
|
|||
/**
|
||||
* Resizing on mouse move.
|
||||
*
|
||||
* @param aEvent
|
||||
* @param event
|
||||
*/
|
||||
onDrag: function RUI_onDrag(aEvent) {
|
||||
let shift = aEvent.shiftKey;
|
||||
let ctrl = !aEvent.shiftKey && aEvent.ctrlKey;
|
||||
onDrag: function (event) {
|
||||
let shift = event.shiftKey;
|
||||
let ctrl = !event.shiftKey && event.ctrlKey;
|
||||
|
||||
let screenX = aEvent.screenX;
|
||||
let screenY = aEvent.screenY;
|
||||
let screenX = event.screenX;
|
||||
let screenY = event.screenY;
|
||||
|
||||
let deltaX = screenX - this.lastScreenX;
|
||||
let deltaY = screenY - this.lastScreenY;
|
||||
|
||||
if (this.ignoreY)
|
||||
if (this.ignoreY) {
|
||||
deltaY = 0;
|
||||
if (this.ignoreX)
|
||||
}
|
||||
if (this.ignoreX) {
|
||||
deltaX = 0;
|
||||
}
|
||||
|
||||
if (ctrl) {
|
||||
deltaX /= SLOW_RATIO;
|
||||
|
|
@ -1142,11 +1188,11 @@ ResponsiveUI.prototype = {
|
|||
/**
|
||||
* Stop End resizing
|
||||
*/
|
||||
stopResizing: function RUI_stopResizing() {
|
||||
stopResizing: function () {
|
||||
this.container.style.pointerEvents = "auto";
|
||||
|
||||
this.mainWindow.removeEventListener("mouseup", this.bound_stopResizing, true);
|
||||
this.mainWindow.removeEventListener("mousemove", this.bound_onDrag, true);
|
||||
this.mainWindow.removeEventListener("mouseup", this.boundStopResizing, true);
|
||||
this.mainWindow.removeEventListener("mousemove", this.boundOnDrag, true);
|
||||
|
||||
this.saveCustomSize();
|
||||
|
||||
|
|
@ -1162,29 +1208,33 @@ ResponsiveUI.prototype = {
|
|||
/**
|
||||
* Store the custom size as a pref.
|
||||
*/
|
||||
saveCustomSize: function RUI_saveCustomSize() {
|
||||
Services.prefs.setIntPref("devtools.responsiveUI.customWidth", this.customPreset.width);
|
||||
Services.prefs.setIntPref("devtools.responsiveUI.customHeight", this.customPreset.height);
|
||||
saveCustomSize: function () {
|
||||
Services.prefs.setIntPref("devtools.responsiveUI.customWidth",
|
||||
this.customPreset.width);
|
||||
Services.prefs.setIntPref("devtools.responsiveUI.customHeight",
|
||||
this.customPreset.height);
|
||||
},
|
||||
|
||||
/**
|
||||
* Store the current preset as a pref.
|
||||
*/
|
||||
saveCurrentPreset: function RUI_saveCurrentPreset() {
|
||||
Services.prefs.setCharPref("devtools.responsiveUI.currentPreset", this.currentPresetKey);
|
||||
Services.prefs.setBoolPref("devtools.responsiveUI.rotate", this.rotateValue);
|
||||
saveCurrentPreset: function () {
|
||||
Services.prefs.setCharPref("devtools.responsiveUI.currentPreset",
|
||||
this.currentPresetKey);
|
||||
Services.prefs.setBoolPref("devtools.responsiveUI.rotate",
|
||||
this.rotateValue);
|
||||
},
|
||||
|
||||
/**
|
||||
* Store the list of all registered presets as a pref.
|
||||
*/
|
||||
savePresets: function RUI_savePresets() {
|
||||
savePresets: function () {
|
||||
// We exclude the custom one
|
||||
let registeredPresets = this.presets.filter(function (aPreset) {
|
||||
return !aPreset.custom;
|
||||
let registeredPresets = this.presets.filter(function (preset) {
|
||||
return !preset.custom;
|
||||
});
|
||||
|
||||
Services.prefs.setCharPref("devtools.responsiveUI.presets", JSON.stringify(registeredPresets));
|
||||
Services.prefs.setCharPref("devtools.responsiveUI.presets",
|
||||
JSON.stringify(registeredPresets));
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue