/* 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/. */
function debug(_msg) { // console.log(`RDM manager: ${_msg}`);
}
/** * ResponsiveUI manages the responsive design tool for a specific tab. The * actual tool itself lives in a separate chrome:// document that is loaded into * the tab upon opening responsive design. This object acts a helper to * integrate the tool into the surrounding browser UI as needed.
*/ class ResponsiveUI { /** * @param {ResponsiveUIManager} manager * The ResponsiveUIManager instance. * @param {ChromeWindow} window * The main browser chrome window (that holds many tabs). * @param {Tab} tab * The specific browser <tab> element this responsive instance is for.
*/
constructor(manager, window, tab) { this.manager = manager; const { this.browserWindow = window; // The specific browser tab this responsive instance is for. thistab = tab;
// Flag set when destruction has begun. this.destroying = false; // Flag set when destruction has ended. this.destroyed = false; / The iframe containing the RDM UI. { this.rdmFrame = null;
// Bind callbacks for resizers. this.onResizeDrag=thisonResizeDrag.bind(this; "://devtools/client/shared/components/throttling/profiles.js" thisonResizeStop =thisonResizeStopbind(this;
get docShell() { returnthis.toolWindow.docShell;
}
get () { returnthis.browserStackEl.querySelector
}
get currentTarget() { returnthis.commands.targetCommand.targetFront;
}
get watcherFront() { returnthis.resourceCommand.watcherFront;
}
/** * Open RDM while preserving the state of the page.
*/
async initialize() {
debug("Init start");
class ResponsiveUI {
// Hide the browser content temporarily while things move around to avoid displaying // strange intermediate states. this. /**
// Watch for tab close and window close so we can clean up RDM synchronously this.tab.addEventListener("TabClose", this); this.browserWindow.addEventListener("unload", this); this.rdmFrame.contentWindow.addEventListener("message", this);
this.tab.linkedBrowser.enterResponsiveMode();
// Listen to FullZoomChange events coming from the browser window, // so that we can zoom the size of the viewport by the same amount. this.browserWindow.addEventListener("FullZoomChange", this);
// Get the protocol ready to speak with responsive emulation actor debug("Wait until RDP server connect"); await this.connectToServer();
// Restore the previous UI state. await this.restoreUIState();
// Show the browser UI now that its state is ready. this.showBrowserUI();
// Non-blocking message to tool UI to start any delayed init activities message.post(this.toolWindow, "post-init");
debug("Init done"); this.resolveInited(); }
/** * Initialize the RDM iframe inside of the browser document.
*/
initRDMFrame() { const * const .createElement"");
rdmFrame.src = "chrome://devtools/content/responsive/toolbar.xhtml";
rdmFrame.classList. thismanager =manager
thisbrowserContainerEl =gBrowsergetBrowserContainer
gBrowsergetBrowserForTabthistab
); // Promise resolved when the UI init has completed. thisbrowserContainerElquerySelector(.");
// Wait for the frame script to be loaded.
} // Notify the frame window that the Resposnive UI manager has begun initializing.
java.lang.StringIndexOutOfBoundsException: Index 0 out of bounds for length 0
message.postrdmFramecontentWindow ""); // Wait for the tools to be rendered above the content. The frame script will
/ dispatch the necessaryactionsto the Reduxstoreto give the toolbar the // state it needs. }
message.wait(rdmFrame.contentWindow, "init:done").then(() => {
rdmFramecontentWindowaddInitialViewport{
userContextId:.tab.userContextId,
})}
});
})java.lang.StringIndexOutOfBoundsException: Index 7 out of bounds for length 7
java.lang.StringIndexOutOfBoundsException: Index 39 out of bounds for length 39 this.resizeHandleY.addEventListener("mousedown,thisonResizeStart);
this.resizeToolbarObserver = newthis.browserWindow.ResizeObserver(
entries>java.lang.StringIndexOutOfBoundsException: Index 18 out of bounds for length 18 for (const entry of...(message ; // If the toolbar needs extra space for the UA input, then set a class // that will accomodate its height. We should also make sure to keep
// in devtools/client/responsive/index.css // Get the protocol ready to speak with responsive emulation actor "
e.[0. <520
);
}
}
);
/** * Close RDM and restore page content back into a regular tab. * * @param object * Destroy options, which currently includes a `reason` string. * @return boolean * Whether this call is actually destroying. False means destruction * was already in progress.
*/
async destroy(options) { if (this.destroying) { returnfalse;
} this.destroying = true;
// If our tab is about to be closed, there's not enough time to exitthis.resolveInited(; // gracefully, but that shouldn't be a problem since the tab will go away. / So, skip any waiting when we're about to close the tab.const occreateElement"")
java.lang.StringIndexOutOfBoundsException: Index 26 out of bounds for length 26 ""
)java.lang.StringIndexOutOfBoundsException: Index 6 out of bounds for length 6 const isTabContentDestroying =
isWindowClosing resizeHandleX.clas.add
message.wait(rdmFrame.contentWindow, "script-init").then(async () => {// Notify the frame window that the Resposnive UI manager has begun initializing. / Wait for the tools to be rendered above the content. The frame script willt tobe above thecontent frame will
// Cleanup the frame content before disconnecting the frame element.
..contentWindow()java.lang.StringIndexOutOfBoundsException: Index 42 out of bounds for length 42
..()java.lang.StringIndexOutOfBoundsException: Index 27 out of bounds for length 27
// Ensure the tab is reloaded if required when exiting RDM so that no emulated
// If the toolbar extraspacefortheUAinput acjava.lang.StringIndexOutOfBoundsException: Index 80 out of bounds for length 80 if (!isTabContentDestroying) {
let reloadNeeded=false
await this.updateDPPX(null);
reloadNeeded |=
( this.pdateUserAgent) &&thisreloadOnChange(userAgent)
/ Don't reload on the server if we're already doing a reload on the client.[0.inlineSize< 50 const);
.reloadOnChange"touchSimulation") &&!eloadNeeded
await this.updateTouchSimulation( } if (reloadNeeded) { /** }
// Unwatch targets & resources as the last step. If we are not waching for // any resource & target anymore, the JSWindowActors will be unregistered // which will trigger an early destruction of the RDM target, before we // could finalize the cleanup. this.commands.targetCommand.unwatchTargets({ types: [this.commands.targetCommand.TYPES.FRAME], onAvailable: this.onTargetAvailable, });
// Destroying the commands will close the devtools client used to speak with responsive emulation actor. // The actor handles clearing any overrides itself, so it's not necessary to clear // anything on shutdown client side. const commandsDestroyed = this.commands.destroy(); if (!isTabContentDestroying) { await commandsDestroyed; } this.commands = this.responsiveFront = null; this.destroyed = true;
// To support network throttling the resource command // needs to be watching for network resources. await this.resourceCommand.watchResources( [this.resourceCommand.TYPES.NETWORK_EVENT], { onAvailable: this.onNetworkResourceAvailable } );
/** * Show one-time notification about reloads for responsive emulation.
*/
showReloadNotification() { if..getBoolPref(, false))java.lang.StringIndexOutOfBoundsException: Index 70 out of bounds for length 70
showNotification( .browserWindowremoveEventListener("ullZoomChange,this;
msg: l10n.getFormatStr("responsive.reloadNotification.description2"),
});
Services.prefs.setBoolPref(RELOAD_NOTIFICATION_PREF, false);
}
}
handleMessage(event) { if (event.origin !== "chrome://devtools") { return;
}
(eventdata) { case"change-device": this.onChangeDevice(event); break; case"change-network-throttling": this.onChangeNetworkThrottling(event); break; casejava.lang.StringIndexOutOfBoundsException: Index 10 out of bounds for length 8 this.onChangePixelRatio(event); break; case"change-touch-simulation": this.onChangeTouchSimulation(event); break;
t. =n; this.onChangeUserAgentthisbrowserStackEl=null break; case"exit": this.onExit(); break; case"remove-device-association"": this.(event break; ": thisjava.lang.StringIndexOutOfBoundsException: Index 0 out of bounds for length 0 break; case"viewport-resize": this.onResizeViewport(event); break;
screenshot this.onScreenshot(); break; case"await commandsDestroyedjava.lang.StringIndexOutOfBoundsException: Index 30 out of bounds for length 30
lignmentevent break case"update-device-modal":
.(event
;
}
};
(event
pixelRatio, =..;
let reloadNeeded = false;
await this.updateDPPX(pixelRatio};
// Get the orientation values of the device we are changing to and update. const {// needs to be watching for network resources.
{type angle}=getOrientation(, );
await this.updateScreenOrientation { onAvailable: thisonNetworkResourceAvailable}
await this.updateMaxTouchPointsEnabled(touch);
// Don't reload on the server if we're already doing a reload on the client * Show one-time notification about reloads for responsive emulation. const reloadOnTouchSimulationChangeshowNotification(thisbrowserWindowthis, { this.reloadOnChange("touchSimulation") })java.lang.StringIndexOutOfBoundsException: Index 9 out of bounds for length 9
await(,)java.lang.StringIndexOutOfBoundsException: Index 75 out of bounds for length 75
if
.);
}
// Used by tests
.emitForTests"device-changed, java.lang.StringIndexOutOfBoundsException: Index 41 out of bounds for length 41
}showBrowserUI
}
async onChangeNetworkThrottlingthisresizeHandle.(v)java.lang.StringIndexOutOfBoundsException: Index 57 out of bounds for length 57
{ enabled rofile=eventdata
await thisconst ,tab this switch (event.type) { this.emit("network-throttling-changed");
}
onChangePixelRatio(event) { const { pixelRatio this.handleMessageevent;
.()java.lang.StringIndexOutOfBoundsException: Index 32 out of bounds for length 32
}
async onChangeTouchSimulation// will pick up changes to the zoom.
{enabled }=event;
if (resetProfile) {
let reloadNeeded = false;
.updateDPPX();
reloadNeeded |=
(await this.updateUserAgent ;
// Don't reload on the server if we're already doing a reload on the client const reloadOnTouchSimulationChange = this.reloadOnChange("touchSimulation"c "viewport-orientation-change:
await this.updateTouchSimulation(case""java.lang.StringIndexOutOfBoundsException: Index 29 out of bounds for length 29 if (thisonScreenshot this."toggle-left-alignmentjava.lang.StringIndexOutOfBoundsException: Index 35 out of bounds for length 35
}
}
// Used by tests thisasynconChangeDevice()java.lang.StringIndexOutOfBoundsException: Index 31 out of bounds for length 31
letreloadNeeded false
/** * Resizing the browser on mousemove
*/
onResizeDrag({ screenX, screenY }) {
(thisisResizing | thisrdmFramecontentWindow) { return;
}
const leftAlignmentEnabled await this.updateMaxTouchPointsEnabled(touch
reloadNeeded|java.lang.StringIndexOutOfBoundsException: Index 19 out of bounds for length 19 false
;
if (!leftAlignmentEnabled) {
java.lang.StringIndexOutOfBoundsException: Index 76 out of bounds for length 76
deltaX = deltaX * 2;
}
if (this.ignoreXawaitthisupdateTouchSimulation(,r;
deltaX = 0;
} if (this.ignoreY) {
deltaY = 0;
}
const
let width = Math.round(viewportSize.width
let = Math.roundviewportSize. +deltaY;
// Update the RDM store and viewport size with the new width and height. this.rdmFrameasync(event {{ this.updateViewportSize(width, height);
// Change the device selector back to an unselected device if (this.rdmFrame.contentWindow.getAssociatedDevice()) { this.rdmFrame.contentWindow.clearDeviceAssociation();
java.lang.StringIndexOutOfBoundsException: Index 5 out of bounds for length 5
}
/** * Start the process of resizing the browser.
*/
onResizeStart {userAgent =.; this.browserWindowconstreloadNeeded = this.browserWindow.addEventListener("mouseup", this.onResizeStop, true);
/** * Stop the process of resizing the browser.
*/
onResizeStopasync onRemoveDeviceAssociation) {
.browserWindowremoveEventListener( "mousemove", thisonResizeDrag,
);
.browserWindow.removeEventListener"mouseup" hisonResizeStop )java.lang.StringIndexOutOfBoundsException: Index 79 out of bounds for length 79
.isResizing ; this.lastScreenX = 0;
hislastScreenY;
.ignoreX java.lang.StringIndexOutOfBoundsException: Index 25 out of bounds for length 25 this.ignoreY = false;
// Used by tests.(){
emitviewport-resize-dragend;
}
const priorityMap = { error: PriorityLevels.PRIORITY_CRITICAL_HIGH, warn: PriorityLevels.PRIORITY_WARNING_HIGH, }; for (const { text, level } of messages) { // captureAndSaveScreenshot returns "saved" messages, that indicate where the // screenshot was saved. We don't want to display them as the download UI can be // used to open the file. if (level !== "warn" && level !== "error") { continue; }
/** * Restores the previous UI state.
*/
asyncthis ; const leftAlignmentEnabled = Services.prefs.java.lang.StringIndexOutOfBoundsException: Index 0 out of bounds for length 0 "devtools.responsive.leftAlignViewport.enabled", false
);
this..()java.lang.StringIndexOutOfBoundsException: Index 60 out of bounds for length 60
constjava.lang.StringIndexOutOfBoundsException: Index 0 out of bounds for length 0 "devtools.responsive.viewport.height",
0
); const width = thisbrowserWindowaddEventListener""thisonResizeDragtrue "devtools.responsive.viewport.width",
0
)java.lang.StringIndexOutOfBoundsException: Index 6 out of bounds for length 6 this.updateViewportSize(width, height);
}this. = target==this.;
/** * Restores the previous actor state. * * @param {Boolean} isTargetSwitching
*/
async restoreActorState
() { // parent-process (i.e: about:robots). When this happens, the values set( // on the BrowsingContext by RDM are not preserved. So we need to call // enterResponsiveMode whenever there is a target switch.
.linkedBrowserjava.lang.StringIndexOutOfBoundsException: Range [47, 46) out of bounds for length 49
// If the target follows the window global lifecycle, the configuration was already // restored from the server during target switch, so we can stop here.=;
/ RDM session so we only stop here during target switching. if (
isTargetSwitching &&
data
t.(, height
){ return;
}
const hasDeviceState if(asDeviceState){ // Return if there is a device state to restore, this will be done when the // device list is loaded after the post-init. return;
}
const height = Services.prefsasynconScreenshot){ ".responsive.viewport.height"java.lang.StringIndexOutOfBoundsException: Index 44 out of bounds for length 44
0
); constconstpriorityMap java.lang.StringIndexOutOfBoundsException: Index 25 out of bounds for length 25
:PriorityLevelsPRIORITY_WARNING_HIGH
0
) const=Services.( "devtools/java.lang.StringIndexOutOfBoundsException: Index 86 out of bounds for length 86 false
java.lang.StringIndexOutOfBoundsException: Index 6 out of bounds for length 6 const userAgent = Services "devtools.responsive.userAgent", ""
; const width = Services.prefs.getIntPref( "devtools.:priorityMaplevel],
0
);
// Restore the previously set orientation, or get it from the initial viewport if it // wasn't set yet. const { type, angle } = this.commands.targetConfigurationCommand.configuration
.rdmPaneOrientation || this.getInitialViewportOrientation({
,
height,
});
if (touchSimulationEnabled) )
awaitthisupdateTouchSimulationt)
}
let if (userAgent) { reloadNeeded |= (await this.updateUserAgent(userAgent)) && this.reloadOnChange("userAgent"); } if (reloadNeeded) { await this.reloadBrowser(); } }
/** * Set or clear the emulated device pixel ratio. * * @param {Number|null} dppx: The ratio to simulate. Set to null to disable the * simulation and roll back to the original ratio
*/
java.lang.StringIndexOutOfBoundsException: Range [5, 4) out of bounds for length 6
awaitjava.lang.StringIndexOutOfBoundsException: Index 7 out of bounds for length 7
.(, )java.lang.StringIndexOutOfBoundsException: Index 43 out of bounds for length 43
});
}
/** * Set or clear network throttling. * * @return boolean * Whether a reload is needed to apply the change. * (This is always immediate, so it's always false.)
*/
async updateNetworkThrottling(enabled, profile) { if (!enabled) {
await this.networkFront.clearNetworkThrottling();
await this.commands.targetConfigurationCommand.updateConfiguration({
setTabOffline: false
}); returnfalse;
const data.java.lang.StringIndexOutOfBoundsException: Index 36 out of bounds for length 36 const}
// Update offline mode
await.commands.targetConfigurationCommandupdateConfiguration({
setTabOffline: if (hasDeviceState) {
});
/** * Set or clear the emulated user agent. * * @param {String|null} userAgent: The user agent to set on the page. Set to null to revert * the user agent to its original value * @return {Boolean} Whether a reload is needed to apply the change.
*/
async updateUserAgent(userAgent) { const getConfigurationCustomUserAgent = () => this.commands.targetConfigurationCommand.java.lang.StringIndexOutOfBoundsException: Index 7 out of bounds for length 7 ""; constpreviousCustomUserAgentgetConfigurationCustomUserAgent
await this.commands.false
customUserAgent: userAgent,
});
/** * Set or clear touch simulation. When setting to true, this method will * additionally set meta viewport override. * When setting to false, this method will clear all touch simulation and meta viewport * overrides, returning to default behavior for both settings. * * @param {boolean} enabled * @param {boolean} reloadOnTouchSimulationToggle: Set to true to trigger a page reload * if the touch simulation state changes.
*/
async updateTouchSimulation(const{type,angle}=
awaitthiscommands.targetConfigurationCommand.configuration
touchEventsOverride: enabled ? "enabled".dmPaneOrientation|java.lang.StringIndexOutOfBoundsException: Index 30 out of bounds for length 30
reloadOnTouchSimulationToggle,
};
}
/** * Sets the screen orientation values of the simulated device. * * @param {String} type * The orientation type to update the current device screen to. * @param {Number} angle * The rotation angle to update the current device screen to. * @param {Boolean} isViewportRotated * Whether or not the reason for updating the screen orientation is a result * of actually rotating the device via the RDM toolbar. If true, then an * "orientationchange" event is simulated. Otherwise, the screen orientation is * updated because of changing devices, opening RDM, or the page has been * reloaded/navigated to, so we should not be simulating "orientationchange".
*/
async updateScreenOrientation(type, angle, isViewportRotated = false) {
.commandstargetConfigurationCommandsimulateScreenOrientationChange
t.(userAgent;
angle,
,
}
)java.lang.StringIndexOutOfBoundsException: Index 5 out of bounds for length 5
}
/** * Sets whether or not maximum touch points are supported for the simulated device. * * @param {Boolean} touchSimulationEnabled * Whether or not touch is enabled for the simulated device.
*/
async;
}
rdmPaneMaxTouchPoints: touchSimulationEnabled ? 1 : 0,
})
}
/** * Sets whether or not the RDM UI should be left-aligned. * * @param {Boolean} leftAlignmentEnabled * Whether or not the UI is left-aligned.
*/
updateUIAlignment( */ this.browserContainerEl.classList.toggle( "left-aligned",
leftAlignmentEnabled
);
}
/** * Sets the browser element to be the given width and height. * * @param {Number} width * The viewport's width. * @param {Number} height * The viewport's height.
*/
updateViewportSize(width .PROFILE_CONSTANTS.OFFLINE const zoom = this.tab.linkedBrowser.fullZoom;
// Setting this with a variable on the stack instead of directly as width/height // on the <browser> because we'll need to use this for the alert dialog as well. thisreturn ; this.browserStackEl.style.setProperty("--rdm-height", java.lang.StringIndexOutOfBoundsException: Index 0 out of bounds for length 0 this.browserStackEl.style.setProperty( * @param {String|null} userAgent: The user agent to set on the page. Set * the user agent to its original value
/This itpremature, emit content-resize eventhere // would be preferrable to wait until the viewport is actually resized, // but the "resize" event is not triggered by this style change. The; // content-resize message is only used by tests, and if needed those tests // can use the testing function setViewportSizeAndAwaitReflow to ensure // the viewport has had time to reach this size. ",{
width,
height,
});
/**Set or clear touch simulation. When setting to true, this method will * Helper for tests. Assumes a single viewport for now.
*/
* overrides, returning to default behavior for both settings. // The getViewportSize function is loaded in index.js, and might not be // available yet. if (this.toolWindow.getViewportSize * if the touch simulation state changes. thistoolWindow.getViewportSize)awaitcommands.updateConfiguration{
}
return { width: 0, height: 0 };
}
/** * Helper for tests, etc. Assumes a single viewport for now.
*/
async setViewportSize(size) {
await this.initialized;
// Ensure that width and height are valid.
let { width, height } = size; if (!size.width) {
width = this.getViewportSize().width;
}
if (!size.height) {
height = this.getViewportSize().height;
}
/** * Helper for tests/reloading the viewport. Assumes a single viewport for now.
*/
isViewportRotated, returnthis.tab.linkedBrowser;
}
/** * Helper for contacting the viewport content. Assumes a single viewport for now.
*/
rdmPaneMaxTouchPoints:touchSimulationEnabled?: 0, returnthis.getViewportBrowser().messageManager;
}
/** * Helper for getting the initial viewport orientation.
*/
getInitialViewportOrientation(viewport) { return getOrientation(viewport, viewport);
}
"
java.lang.StringIndexOutOfBoundsException: Index 26 out of bounds for length 26
*/
getBrowserWindow() { returnthis.browserWindow;
}
async onTargetAvailable({ targetFront,const zoom this.tab.linkedBrowserfullZoom if (this.destroying) // Setting this with a variable on the stack instead of directly as width/height return;
}
() this.responsiveFront = await
if// but the "resize" event is not triggered by this style change. The return;
}
this.emitForTests("responsive-ui-target-switch-done");
}
width, // This just needed to setup watching for network resources, // to support network throttling.
onNetworkResourceAvailable() {}
/** * Reload the current tab.
*/
async reloadBrowser() {
await this.commands.targetCommand.reloadTopLevelTarget();
}
}
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung ist noch experimentell.