From f71ff2641ef3c3c1c6ce67ef9908e80dc3849f34 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 20 Mar 2017 17:07:07 -0500 Subject: [PATCH] Bug 1349009 - Fix ESLint errors in responsivedesign.jsm. r=tromey MozReview-Commit-ID: Jg1MleQYV9W --HG-- extra : rebase_source : ca8c329ccd6d9989ccb1ed414cef95309cc54767 --- .eslintignore | 1 + .../responsivedesign/responsivedesign.jsm | 546 ++++++++++-------- 2 files changed, 299 insertions(+), 248 deletions(-) diff --git a/.eslintignore b/.eslintignore index 7c5d28696d4d..59576d3e93cf 100644 --- a/.eslintignore +++ b/.eslintignore @@ -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 diff --git a/devtools/client/responsivedesign/responsivedesign.jsm b/devtools/client/responsivedesign/responsivedesign.jsm index f67d1912c25b..57da28464b44 100644 --- a/devtools/client/responsivedesign/responsivedesign.jsm +++ b/devtools/client/responsivedesign/responsivedesign.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: } }) @@ -146,12 +147,12 @@ if (Services.prefs.getBoolPref("devtools.responsive.html.enabled") && var defaultPresets = [ // Phones - {key: "320x480", width: 320, height: 480}, // iPhone, B2G, with - {key: "360x640", width: 360, height: 640}, // Android 4, phones, with + {key: "320x480", width: 320, height: 480}, // iPhone, B2G, with + {key: "360x640", width: 360, height: 640}, // Android 4, phones, with // Tablets - {key: "768x1024", width: 768, height: 1024}, // iPad, with - {key: "800x1280", width: 800, height: 1280}, // Android 4, Tablet, with + {key: "768x1024", width: 768, height: 1024}, // iPad, with + {key: "800x1280", width: 800, height: 1280}, // Android 4, Tablet, with // Default width for mobile browsers, no {key: "980x1280", width: 980, height: 1280}, @@ -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; @@ -276,7 +278,7 @@ ResponsiveUI.prototype = { } this.client = new DebuggerClient(DebuggerServer.connectPipe()); yield this.client.connect(); - let {tab} = yield this.client.getTab(); + let { tab } = yield this.client.getTab(); yield this.client.attachTab(tab.actor); this.emulationFront = EmulationFront(this.client, tab); }), @@ -293,7 +295,7 @@ ResponsiveUI.prototype = { } } - this.customPreset = {key: "custom", custom: true}; + this.customPreset = { key: "custom", custom: true }; if (Array.isArray(presets)) { this.presets = [this.customPreset].concat(presets); @@ -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 = { * From tabbrowser.xml * * // presets - * // rotate - * // screenshot - * // close + * // rotate + * // screenshot + * // close * * From tabbrowser.xml * @@ -493,7 +500,7 @@ ResponsiveUI.prototype = { * * */ - 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); @@ -601,10 +630,10 @@ ResponsiveUI.prototype = { sleepButton.setAttribute("top", 0); sleepButton.setAttribute("right", 0); sleepButton.addEventListener("mousedown", () => { - SystemAppProxy.dispatchKeyboardEvent("keydown", {key: "Power"}); + SystemAppProxy.dispatchKeyboardEvent("keydown", { key: "Power" }); }); sleepButton.addEventListener("mouseup", () => { - SystemAppProxy.dispatchKeyboardEvent("keyup", {key: "Power"}); + SystemAppProxy.dispatchKeyboardEvent("keyup", { key: "Power" }); }); this.stack.appendChild(sleepButton); @@ -616,19 +645,19 @@ ResponsiveUI.prototype = { let volumeUp = this.chromeDoc.createElement("button"); volumeUp.className = "devtools-responsiveui-volume-up-button"; volumeUp.addEventListener("mousedown", () => { - SystemAppProxy.dispatchKeyboardEvent("keydown", {key: "AudioVolumeUp"}); + SystemAppProxy.dispatchKeyboardEvent("keydown", { key: "AudioVolumeUp" }); }); volumeUp.addEventListener("mouseup", () => { - SystemAppProxy.dispatchKeyboardEvent("keyup", {key: "AudioVolumeUp"}); + SystemAppProxy.dispatchKeyboardEvent("keyup", { key: "AudioVolumeUp" }); }); let volumeDown = this.chromeDoc.createElement("button"); volumeDown.className = "devtools-responsiveui-volume-down-button"; volumeDown.addEventListener("mousedown", () => { - SystemAppProxy.dispatchKeyboardEvent("keydown", {key: "AudioVolumeDown"}); + SystemAppProxy.dispatchKeyboardEvent("keydown", { key: "AudioVolumeDown" }); }); volumeDown.addEventListener("mouseup", () => { - SystemAppProxy.dispatchKeyboardEvent("keyup", {key: "AudioVolumeDown"}); + SystemAppProxy.dispatchKeyboardEvent("keyup", { key: "AudioVolumeDown" }); }); volumeButtons.appendChild(volumeUp); @@ -641,12 +670,13 @@ 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"}); + SystemAppProxy.dispatchKeyboardEvent("keydown", { key: "Home" }); }); homeButton.addEventListener("mouseup", () => { - SystemAppProxy.dispatchKeyboardEvent("keyup", {key: "Home"}); + SystemAppProxy.dispatchKeyboardEvent("keyup", { key: "Home" }); }); bottomToolbar.appendChild(homeButton); this.bottomToolbar = bottomToolbar; @@ -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,50 +965,54 @@ ResponsiveUI.prototype = { this.hideTouchNotification(); if (this.touchEventSimulator.enabled) { this.disableTouch(); - } else { - let isReloadNeeded = yield this.enableTouch(); - if (isReloadNeeded) { - if (Services.prefs.getBoolPref("devtools.responsiveUI.no-reload-notification")) { - return; - } - - let nbox = this.mainWindow.gBrowser.getNotificationBox(this.browser); - - var buttons = [{ - label: this.strings.GetStringFromName("responsiveUI.notificationReload"), - 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"), - }]; - - nbox.appendNotification( - this.strings.GetStringFromName("responsiveUI.needReload"), - "responsive-ui-need-reload", - null, - nbox.PRIORITY_INFO_LOW, - buttons); - } + return; } + + let isReloadNeeded = yield this.enableTouch(); + if (!isReloadNeeded) { + return; + } + + const PREF = "devtools.responsiveUI.no-reload-notification"; + if (Services.prefs.getBoolPref(PREF)) { + return; + } + + let nbox = this.mainWindow.gBrowser.getNotificationBox(this.browser); + + let buttons = [{ + label: this.strings.GetStringFromName("responsiveUI.notificationReload"), + callback: () => this.browser.reload(), + accessKey: + this.strings.GetStringFromName("responsiveUI.notificationReload_accesskey"), + }, { + label: this.strings.GetStringFromName("responsiveUI.dontShowReloadNotification"), + callback: () => Services.prefs.setBoolPref(PREF, true), + accessKey: + this.strings + .GetStringFromName("responsiveUI.dontShowReloadNotification_accesskey"), + }]; + + nbox.appendNotification( + this.strings.GetStringFromName("responsiveUI.needReload"), + "responsive-ui-need-reload", + null, + nbox.PRIORITY_INFO_LOW, + buttons + ); }), waitForReload() { - let navigatedDeferred = promise.defer(); - let onNavigated = (_, { state }) => { - if (state != "stop") { - return; - } - this.client.removeListener("tabNavigated", onNavigated); - navigatedDeferred.resolve(); - }; - this.client.addListener("tabNavigated", onNavigated); - return navigatedDeferred.promise; + return new Promise(resolve => { + let onNavigated = (_, { state }) => { + if (state != "stop") { + return; + } + this.client.removeListener("tabNavigated", onNavigated); + resolve(); + }; + this.client.addListener("tabNavigated", onNavigated); + }); }, /** @@ -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)); }, };