chrome-devtools-frontend
Version:
Chrome DevTools UI
812 lines (725 loc) • 35.9 kB
text/typescript
// Copyright (c) 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import * as Common from '../../core/common/common.js';
import * as Host from '../../core/host/host.js';
import * as i18n from '../../core/i18n/i18n.js';
import * as SDK from '../../core/sdk/sdk.js';
import * as UI from '../../ui/legacy/legacy.js';
import sensorsStyles from './sensors.css.js';
const UIStrings = {
/**
*@description Title for a group of cities
*/
location: 'Location',
/**
*@description An option that appears in a drop-down to prevent the GPS location of the user from being overridden.
*/
noOverride: 'No override',
/**
*@description Title of a section that contains overrides for the user's GPS location.
*/
overrides: 'Overrides',
/**
*@description Text of button in Sensors View, takes the user to the custom location setting screen
*where they can enter/edit custom locations.
*/
manage: 'Manage',
/**
*@description Aria-label for location manage button in Sensors View
*/
manageTheListOfLocations: 'Manage the list of locations',
/**
*@description Option in a drop-down input for selecting the GPS location of the user. As an
*alternative to selecting a location from the list, the user can select this option and they are
*prompted to enter the details for a new custom location.
*/
other: 'Other…',
/**
*@description Title of a section in a drop-down input that contains error locations, e.g. to select
*a location override that says 'the location is not available'. A noun.
*/
error: 'Error',
/**
*@description A type of override where the geographic location of the user is not available.
*/
locationUnavailable: 'Location unavailable',
/**
*@description Tooltip text telling the user how to change the value of a latitude/longitude input
*text box. several shortcuts are provided for convenience. The placeholder can be different
*keyboard keys, depending on the user's settings.
*@example {Ctrl} PH1
*/
adjustWithMousewheelOrUpdownKeys: 'Adjust with mousewheel or up/down keys. {PH1}: ±10, Shift: ±1, Alt: ±0.01',
/**
*@description Label for latitude of a GPS location.
*/
latitude: 'Latitude',
/**
*@description Label for Longitude of a GPS location.
*/
longitude: 'Longitude',
/**
*@description Label for the ID of a timezone for a particular location.
*/
timezoneId: 'Timezone ID',
/**
*@description Label for the locale relevant to a custom location.
*/
locale: 'Locale',
/**
*@description Label the orientation of a user's device e.g. tilt in 3D-space.
*/
orientation: 'Orientation',
/**
*@description Option that when chosen, turns off device orientation override.
*/
off: 'Off',
/**
*@description Option that when chosen, allows the user to enter a custom orientation for the device e.g. tilt in 3D-space.
*/
customOrientation: 'Custom orientation',
/**
*@description Warning to the user they should enable the device orientation override, in order to
*enable this input which allows them to interactively select orientation by dragging a 3D phone
*model.
*/
enableOrientationToRotate: 'Enable orientation to rotate',
/**
*@description Text telling the user how to use an input which allows them to interactively select
*orientation by dragging a 3D phone model.
*/
shiftdragHorizontallyToRotate: 'Shift+drag horizontally to rotate around the y-axis',
/**
*@description Message in the Sensors tool that is alerted (for screen readers) when the device orientation setting is changed
*@example {180} PH1
*@example {-90} PH2
*@example {0} PH3
*/
deviceOrientationSetToAlphaSBeta: 'Device orientation set to alpha: {PH1}, beta: {PH2}, gamma: {PH3}',
/**
*@description Text of orientation reset button in Sensors View of the Device Toolbar
*/
reset: 'Reset',
/**
*@description Aria-label for orientation reset button in Sensors View. Command.
*/
resetDeviceOrientation: 'Reset device orientation',
/**
*@description Description of the Touch select in Sensors tab
*/
forcesTouchInsteadOfClick: 'Forces touch instead of click',
/**
*@description Description of the Emulate Idle State select in Sensors tab
*/
forcesSelectedIdleStateEmulation: 'Forces selected idle state emulation',
/**
*@description Title for a group of configuration options in a drop-down input.
*/
presets: 'Presets',
/**
*@description Drop-down input option for the orientation of a device in 3D space.
*/
portrait: 'Portrait',
/**
*@description Drop-down input option for the orientation of a device in 3D space.
*/
portraitUpsideDown: 'Portrait upside down',
/**
*@description Drop-down input option for the orientation of a device in 3D space.
*/
landscapeLeft: 'Landscape left',
/**
*@description Drop-down input option for the orientation of a device in 3D space.
*/
landscapeRight: 'Landscape right',
/**
*@description Drop-down input option for the orientation of a device in 3D space. Noun indicating
*the display of the device is pointing up.
*/
displayUp: 'Display up',
/**
*@description Drop-down input option for the orientation of a device in 3D space. Noun indicating
*the display of the device is pointing down.
*/
displayDown: 'Display down',
/**
*@description Label for one dimension of device orientation that the user can override.
*/
alpha: '\u03B1 (alpha)',
/**
*@description Label for one dimension of device orientation that the user can override.
*/
beta: '\u03B2 (beta)',
/**
*@description Label for one dimension of device orientation that the user can override.
*/
gamma: '\u03B3 (gamma)',
};
const str_ = i18n.i18n.registerUIStrings('panels/sensors/SensorsView.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/naming-convention
let _instanceObject: SensorsView|null = null;
export class SensorsView extends UI.Widget.VBox {
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/naming-convention
private readonly LocationSetting: Common.Settings.Setting<string>;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/naming-convention
private Location: SDK.EmulationModel.Location;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/naming-convention
private LocationOverrideEnabled: boolean;
private fieldsetElement!: HTMLFieldSetElement;
private timezoneError!: HTMLElement;
private locationSelectElement!: HTMLSelectElement;
private latitudeInput!: HTMLInputElement;
private longitudeInput!: HTMLInputElement;
private timezoneInput!: HTMLInputElement;
private localeInput!: HTMLInputElement;
private latitudeSetter!: (arg0: string) => void;
private longitudeSetter!: (arg0: string) => void;
private timezoneSetter!: (arg0: string) => void;
private localeSetter!: (arg0: string) => void;
private localeError!: HTMLElement;
private customLocationsGroup!: HTMLOptGroupElement;
private readonly deviceOrientationSetting: Common.Settings.Setting<string>;
private deviceOrientation: SDK.EmulationModel.DeviceOrientation;
private deviceOrientationOverrideEnabled: boolean;
private deviceOrientationFieldset!: HTMLFieldSetElement;
private stageElement!: HTMLElement;
private orientationSelectElement!: HTMLSelectElement;
private alphaElement!: HTMLInputElement;
private betaElement!: HTMLInputElement;
private gammaElement!: HTMLInputElement;
private alphaSetter!: (arg0: string) => void;
private betaSetter!: (arg0: string) => void;
private gammaSetter!: (arg0: string) => void;
private orientationLayer!: HTMLDivElement;
private boxElement?: HTMLElement;
private boxMatrix?: DOMMatrix;
private mouseDownVector?: UI.Geometry.Vector|null;
private originalBoxMatrix?: DOMMatrix;
constructor() {
super(true);
this.contentElement.classList.add('sensors-view');
this.LocationSetting = Common.Settings.Settings.instance().createSetting('emulation.locationOverride', '');
this.Location = SDK.EmulationModel.Location.parseSetting(this.LocationSetting.get());
this.LocationOverrideEnabled = false;
this.createLocationSection(this.Location);
this.contentElement.createChild('div').classList.add('panel-section-separator');
this.deviceOrientationSetting =
Common.Settings.Settings.instance().createSetting('emulation.deviceOrientationOverride', '');
this.deviceOrientation = SDK.EmulationModel.DeviceOrientation.parseSetting(this.deviceOrientationSetting.get());
this.deviceOrientationOverrideEnabled = false;
this.createDeviceOrientationSection();
this.contentElement.createChild('div').classList.add('panel-section-separator');
this.appendTouchControl();
this.contentElement.createChild('div').classList.add('panel-section-separator');
this.appendIdleEmulator();
this.contentElement.createChild('div').classList.add('panel-section-separator');
}
static instance(): SensorsView {
if (!_instanceObject) {
_instanceObject = new SensorsView();
}
return _instanceObject;
}
override wasShown(): void {
super.wasShown();
this.registerCSSFiles([sensorsStyles]);
}
private createLocationSection(location: SDK.EmulationModel.Location): void {
const geogroup = this.contentElement.createChild('section', 'sensors-group');
const geogroupTitle = UI.UIUtils.createLabel(i18nString(UIStrings.location), 'sensors-group-title');
geogroup.appendChild(geogroupTitle);
const fields = geogroup.createChild('div', 'geo-fields');
let selectedIndex = 0;
const noOverrideOption = {title: i18nString(UIStrings.noOverride), location: NonPresetOptions.NoOverride};
this.locationSelectElement = (fields.createChild('select', 'chrome-select') as HTMLSelectElement);
UI.ARIAUtils.bindLabelToControl(geogroupTitle, this.locationSelectElement);
// No override
this.locationSelectElement.appendChild(new Option(noOverrideOption.title, noOverrideOption.location));
this.customLocationsGroup = (this.locationSelectElement.createChild('optgroup') as HTMLOptGroupElement);
this.customLocationsGroup.label = i18nString(UIStrings.overrides);
const customLocations = Common.Settings.Settings.instance().moduleSetting('emulation.locations');
const manageButton =
UI.UIUtils.createTextButton(i18nString(UIStrings.manage), () => Common.Revealer.reveal(customLocations));
UI.ARIAUtils.setAccessibleName(manageButton, i18nString(UIStrings.manageTheListOfLocations));
fields.appendChild(manageButton);
const fillCustomSettings = (): void => {
if (!this.customLocationsGroup) {
return;
}
this.customLocationsGroup.removeChildren();
for (const [i, customLocation] of customLocations.get().entries()) {
this.customLocationsGroup.appendChild(new Option(customLocation.title, JSON.stringify(customLocation)));
if (location.latitude === customLocation.lat && location.longitude === customLocation.long) {
// If the location coming from settings matches the custom location, use its index to select the option
selectedIndex = i + 1;
}
}
};
customLocations.addChangeListener(fillCustomSettings);
fillCustomSettings();
// Other location
const customLocationOption = {title: i18nString(UIStrings.other), location: NonPresetOptions.Custom};
this.locationSelectElement.appendChild(new Option(customLocationOption.title, customLocationOption.location));
// Error location.
const group = (this.locationSelectElement.createChild('optgroup') as HTMLOptGroupElement);
group.label = i18nString(UIStrings.error);
group.appendChild(new Option(i18nString(UIStrings.locationUnavailable), NonPresetOptions.Unavailable));
this.locationSelectElement.selectedIndex = selectedIndex;
this.locationSelectElement.addEventListener('change', this.LocationSelectChanged.bind(this));
this.fieldsetElement = (fields.createChild('fieldset') as HTMLFieldSetElement);
this.fieldsetElement.disabled = !this.LocationOverrideEnabled;
this.fieldsetElement.id = 'location-override-section';
const latitudeGroup = this.fieldsetElement.createChild('div', 'latlong-group');
const longitudeGroup = this.fieldsetElement.createChild('div', 'latlong-group');
const timezoneGroup = this.fieldsetElement.createChild('div', 'latlong-group');
const localeGroup = this.fieldsetElement.createChild('div', 'latlong-group');
const cmdOrCtrl = Host.Platform.isMac() ? '\u2318' : 'Ctrl';
const modifierKeyMessage = i18nString(UIStrings.adjustWithMousewheelOrUpdownKeys, {PH1: cmdOrCtrl});
this.latitudeInput = UI.UIUtils.createInput('', 'number');
latitudeGroup.appendChild(this.latitudeInput);
this.latitudeInput.setAttribute('step', 'any');
this.latitudeInput.value = '0';
this.latitudeSetter = UI.UIUtils.bindInput(
this.latitudeInput, this.applyLocationUserInput.bind(this), SDK.EmulationModel.Location.latitudeValidator, true,
0.1);
this.latitudeSetter(String(location.latitude));
UI.Tooltip.Tooltip.install(this.latitudeInput, modifierKeyMessage);
latitudeGroup.appendChild(
UI.UIUtils.createLabel(i18nString(UIStrings.latitude), 'latlong-title', this.latitudeInput));
this.longitudeInput = UI.UIUtils.createInput('', 'number');
longitudeGroup.appendChild(this.longitudeInput);
this.longitudeInput.setAttribute('step', 'any');
this.longitudeInput.value = '0';
this.longitudeSetter = UI.UIUtils.bindInput(
this.longitudeInput, this.applyLocationUserInput.bind(this), SDK.EmulationModel.Location.longitudeValidator,
true, 0.1);
this.longitudeSetter(String(location.longitude));
UI.Tooltip.Tooltip.install(this.longitudeInput, modifierKeyMessage);
longitudeGroup.appendChild(
UI.UIUtils.createLabel(i18nString(UIStrings.longitude), 'latlong-title', this.longitudeInput));
this.timezoneInput = UI.UIUtils.createInput('', 'text');
timezoneGroup.appendChild(this.timezoneInput);
this.timezoneInput.value = 'Europe/Berlin';
this.timezoneSetter = UI.UIUtils.bindInput(
this.timezoneInput, this.applyLocationUserInput.bind(this), SDK.EmulationModel.Location.timezoneIdValidator,
false);
this.timezoneSetter(location.timezoneId);
timezoneGroup.appendChild(
UI.UIUtils.createLabel(i18nString(UIStrings.timezoneId), 'timezone-title', this.timezoneInput));
this.timezoneError = (timezoneGroup.createChild('div', 'timezone-error') as HTMLElement);
this.localeInput = UI.UIUtils.createInput('', 'text');
localeGroup.appendChild(this.localeInput);
this.localeInput.value = 'en-US';
this.localeSetter = UI.UIUtils.bindInput(
this.localeInput, this.applyLocationUserInput.bind(this), SDK.EmulationModel.Location.localeValidator, false);
this.localeSetter(location.locale);
localeGroup.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.locale), 'locale-title', this.localeInput));
this.localeError = (localeGroup.createChild('div', 'locale-error') as HTMLElement);
}
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/naming-convention
private LocationSelectChanged(): void {
this.fieldsetElement.disabled = false;
this.timezoneError.textContent = '';
const value = this.locationSelectElement.options[this.locationSelectElement.selectedIndex].value;
if (value === NonPresetOptions.NoOverride) {
this.LocationOverrideEnabled = false;
this.clearFieldsetElementInputs();
this.fieldsetElement.disabled = true;
} else if (value === NonPresetOptions.Custom) {
this.LocationOverrideEnabled = true;
const location = SDK.EmulationModel.Location.parseUserInput(
this.latitudeInput.value.trim(), this.longitudeInput.value.trim(), this.timezoneInput.value.trim(),
this.localeInput.value.trim());
if (!location) {
return;
}
this.Location = location;
} else if (value === NonPresetOptions.Unavailable) {
this.LocationOverrideEnabled = true;
this.Location = new SDK.EmulationModel.Location(0, 0, '', '', true);
} else {
this.LocationOverrideEnabled = true;
const coordinates = JSON.parse(value);
this.Location = new SDK.EmulationModel.Location(
coordinates.lat, coordinates.long, coordinates.timezoneId, coordinates.locale, false);
this.latitudeSetter(coordinates.lat);
this.longitudeSetter(coordinates.long);
this.timezoneSetter(coordinates.timezoneId);
this.localeSetter(coordinates.locale);
}
this.applyLocation();
if (value === NonPresetOptions.Custom) {
this.latitudeInput.focus();
}
}
private applyLocationUserInput(): void {
const location = SDK.EmulationModel.Location.parseUserInput(
this.latitudeInput.value.trim(), this.longitudeInput.value.trim(), this.timezoneInput.value.trim(),
this.localeInput.value.trim());
if (!location) {
return;
}
this.timezoneError.textContent = '';
this.setSelectElementLabel(this.locationSelectElement, NonPresetOptions.Custom);
this.Location = location;
this.applyLocation();
}
private applyLocation(): void {
if (this.LocationOverrideEnabled) {
this.LocationSetting.set(this.Location.toSetting());
} else {
this.LocationSetting.set('');
}
for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(SDK.EmulationModel.EmulationModel)) {
emulationModel.emulateLocation(this.LocationOverrideEnabled ? this.Location : null).catch(err => {
switch (err.type) {
case 'emulation-set-timezone': {
this.timezoneError.textContent = err.message;
break;
}
case 'emulation-set-locale': {
this.localeError.textContent = err.message;
break;
}
}
});
}
}
private clearFieldsetElementInputs(): void {
this.latitudeSetter('0');
this.longitudeSetter('0');
this.timezoneSetter('');
this.localeSetter('');
}
private createDeviceOrientationSection(): void {
const orientationGroup = this.contentElement.createChild('section', 'sensors-group');
const orientationTitle = UI.UIUtils.createLabel(i18nString(UIStrings.orientation), 'sensors-group-title');
orientationGroup.appendChild(orientationTitle);
const orientationContent = orientationGroup.createChild('div', 'orientation-content');
const fields = orientationContent.createChild('div', 'orientation-fields');
const orientationOffOption = {title: i18nString(UIStrings.off), orientation: NonPresetOptions.NoOverride};
const customOrientationOption = {
title: i18nString(UIStrings.customOrientation),
orientation: NonPresetOptions.Custom,
};
const orientationGroups = [{
title: i18nString(UIStrings.presets),
value: [
{title: i18nString(UIStrings.portrait), orientation: '[0, 90, 0]'},
{title: i18nString(UIStrings.portraitUpsideDown), orientation: '[-180, -90, 0]'},
{title: i18nString(UIStrings.landscapeLeft), orientation: '[90, 0, -90]'},
{title: i18nString(UIStrings.landscapeRight), orientation: '[90, -180, -90]'},
{title: i18nString(UIStrings.displayUp), orientation: '[0, 0, 0]'},
{title: i18nString(UIStrings.displayDown), orientation: '[0, -180, 0]'},
],
}];
this.orientationSelectElement = (this.contentElement.createChild('select', 'chrome-select') as HTMLSelectElement);
UI.ARIAUtils.bindLabelToControl(orientationTitle, this.orientationSelectElement);
this.orientationSelectElement.appendChild(new Option(orientationOffOption.title, orientationOffOption.orientation));
this.orientationSelectElement.appendChild(
new Option(customOrientationOption.title, customOrientationOption.orientation));
for (let i = 0; i < orientationGroups.length; ++i) {
const groupElement = (this.orientationSelectElement.createChild('optgroup') as HTMLOptGroupElement);
groupElement.label = orientationGroups[i].title;
const group = orientationGroups[i].value;
for (let j = 0; j < group.length; ++j) {
groupElement.appendChild(new Option(group[j].title, group[j].orientation));
}
}
this.orientationSelectElement.selectedIndex = 0;
fields.appendChild(this.orientationSelectElement);
this.orientationSelectElement.addEventListener('change', this.orientationSelectChanged.bind(this));
this.deviceOrientationFieldset = this.createDeviceOrientationOverrideElement(this.deviceOrientation);
this.stageElement = (orientationContent.createChild('div', 'orientation-stage') as HTMLElement);
this.orientationLayer = (this.stageElement.createChild('div', 'orientation-layer') as HTMLDivElement);
this.boxElement = this.orientationLayer.createChild('section', 'orientation-box orientation-element');
this.boxElement.createChild('section', 'orientation-front orientation-element');
this.boxElement.createChild('section', 'orientation-top orientation-element');
this.boxElement.createChild('section', 'orientation-back orientation-element');
this.boxElement.createChild('section', 'orientation-left orientation-element');
this.boxElement.createChild('section', 'orientation-right orientation-element');
this.boxElement.createChild('section', 'orientation-bottom orientation-element');
UI.UIUtils.installDragHandle(this.stageElement, this.onBoxDragStart.bind(this), event => {
this.onBoxDrag(event);
}, null, '-webkit-grabbing', '-webkit-grab');
fields.appendChild(this.deviceOrientationFieldset);
this.enableOrientationFields(true);
this.setBoxOrientation(this.deviceOrientation, false);
}
private enableOrientationFields(disable: boolean|null): void {
if (disable) {
this.deviceOrientationFieldset.disabled = true;
this.stageElement.classList.add('disabled');
UI.Tooltip.Tooltip.install(this.stageElement, i18nString(UIStrings.enableOrientationToRotate));
} else {
this.deviceOrientationFieldset.disabled = false;
this.stageElement.classList.remove('disabled');
UI.Tooltip.Tooltip.install(this.stageElement, i18nString(UIStrings.shiftdragHorizontallyToRotate));
}
}
private orientationSelectChanged(): void {
const value = this.orientationSelectElement.options[this.orientationSelectElement.selectedIndex].value;
this.enableOrientationFields(false);
if (value === NonPresetOptions.NoOverride) {
this.deviceOrientationOverrideEnabled = false;
this.enableOrientationFields(true);
} else if (value === NonPresetOptions.Custom) {
this.deviceOrientationOverrideEnabled = true;
this.resetDeviceOrientation();
this.alphaElement.focus();
} else {
const parsedValue = JSON.parse(value);
this.deviceOrientationOverrideEnabled = true;
this.deviceOrientation = new SDK.EmulationModel.DeviceOrientation(parsedValue[0], parsedValue[1], parsedValue[2]);
this.setDeviceOrientation(this.deviceOrientation, DeviceOrientationModificationSource.SelectPreset);
}
}
private applyDeviceOrientation(): void {
if (this.deviceOrientationOverrideEnabled) {
this.deviceOrientationSetting.set(this.deviceOrientation.toSetting());
}
for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(SDK.EmulationModel.EmulationModel)) {
void emulationModel.emulateDeviceOrientation(
this.deviceOrientationOverrideEnabled ? this.deviceOrientation : null);
}
}
private setSelectElementLabel(selectElement: HTMLSelectElement, labelValue: string): void {
const optionValues = Array.prototype.map.call(selectElement.options, x => x.value);
selectElement.selectedIndex = optionValues.indexOf(labelValue);
}
private applyDeviceOrientationUserInput(): void {
this.setDeviceOrientation(
SDK.EmulationModel.DeviceOrientation.parseUserInput(
this.alphaElement.value.trim(), this.betaElement.value.trim(), this.gammaElement.value.trim()),
DeviceOrientationModificationSource.UserInput);
this.setSelectElementLabel(this.orientationSelectElement, NonPresetOptions.Custom);
}
private resetDeviceOrientation(): void {
this.setDeviceOrientation(
new SDK.EmulationModel.DeviceOrientation(0, 90, 0), DeviceOrientationModificationSource.ResetButton);
this.setSelectElementLabel(this.orientationSelectElement, '[0, 90, 0]');
}
private setDeviceOrientation(
deviceOrientation: SDK.EmulationModel.DeviceOrientation|null,
modificationSource: DeviceOrientationModificationSource): void {
if (!deviceOrientation) {
return;
}
function roundAngle(angle: number): number {
return Math.round(angle * 10000) / 10000;
}
if (modificationSource !== DeviceOrientationModificationSource.UserInput) {
// Even though the angles in |deviceOrientation| will not be rounded
// here, their precision will be rounded by CSS when we change
// |this.orientationLayer.style| in setBoxOrientation().
this.alphaSetter(String(roundAngle(deviceOrientation.alpha)));
this.betaSetter(String(roundAngle(deviceOrientation.beta)));
this.gammaSetter(String(roundAngle(deviceOrientation.gamma)));
}
const animate = modificationSource !== DeviceOrientationModificationSource.UserDrag;
this.setBoxOrientation(deviceOrientation, animate);
this.deviceOrientation = deviceOrientation;
this.applyDeviceOrientation();
UI.ARIAUtils.alert(i18nString(
UIStrings.deviceOrientationSetToAlphaSBeta,
{PH1: deviceOrientation.alpha, PH2: deviceOrientation.beta, PH3: deviceOrientation.gamma}));
}
private createAxisInput(parentElement: Element, input: HTMLInputElement, label: string, validator: (arg0: string) => {
valid: boolean,
errorMessage: (string|undefined),
}): (arg0: string) => void {
const div = parentElement.createChild('div', 'orientation-axis-input-container');
div.appendChild(input);
div.appendChild(UI.UIUtils.createLabel(label, /* className */ '', input));
return UI.UIUtils.bindInput(input, this.applyDeviceOrientationUserInput.bind(this), validator, true);
}
private createDeviceOrientationOverrideElement(deviceOrientation: SDK.EmulationModel.DeviceOrientation):
HTMLFieldSetElement {
const fieldsetElement = document.createElement('fieldset');
fieldsetElement.classList.add('device-orientation-override-section');
const cellElement = fieldsetElement.createChild('td', 'orientation-inputs-cell');
this.alphaElement = UI.UIUtils.createInput('', 'number');
this.alphaElement.setAttribute('step', 'any');
this.alphaSetter = this.createAxisInput(
cellElement, this.alphaElement, i18nString(UIStrings.alpha),
SDK.EmulationModel.DeviceOrientation.alphaAngleValidator);
this.alphaSetter(String(deviceOrientation.alpha));
this.betaElement = UI.UIUtils.createInput('', 'number');
this.betaElement.setAttribute('step', 'any');
this.betaSetter = this.createAxisInput(
cellElement, this.betaElement, i18nString(UIStrings.beta),
SDK.EmulationModel.DeviceOrientation.betaAngleValidator);
this.betaSetter(String(deviceOrientation.beta));
this.gammaElement = UI.UIUtils.createInput('', 'number');
this.gammaElement.setAttribute('step', 'any');
this.gammaSetter = this.createAxisInput(
cellElement, this.gammaElement, i18nString(UIStrings.gamma),
SDK.EmulationModel.DeviceOrientation.gammaAngleValidator);
this.gammaSetter(String(deviceOrientation.gamma));
const resetButton = UI.UIUtils.createTextButton(
i18nString(UIStrings.reset), this.resetDeviceOrientation.bind(this), 'orientation-reset-button');
UI.ARIAUtils.setAccessibleName(resetButton, i18nString(UIStrings.resetDeviceOrientation));
resetButton.setAttribute('type', 'reset');
cellElement.appendChild(resetButton);
return fieldsetElement;
}
private setBoxOrientation(deviceOrientation: SDK.EmulationModel.DeviceOrientation, animate: boolean): void {
if (animate) {
this.stageElement.classList.add('is-animating');
} else {
this.stageElement.classList.remove('is-animating');
}
// It is important to explain the multiple conversions happening here. A
// few notes on coordinate spaces first:
// 1. The CSS coordinate space is left-handed. X and Y are parallel to the
// screen, and Z is perpendicular to the screen. X is positive to the
// right, Y is positive downwards and Z increases towards the viewer.
// See https://drafts.csswg.org/css-transforms-2/#transform-rendering
// for more information.
// 2. The Device Orientation coordinate space is right-handed. X and Y are
// parallel to the screen, and Z is perpenticular to the screen. X is
// positive to the right, Y is positive upwards and Z increases towards
// the viewer. See
// https://w3c.github.io/deviceorientation/#deviceorientation for more
// information.
// 3. Additionally, the phone model we display is rotated +90 degrees in
// the X axis in the CSS coordinate space (i.e. when all angles are 0 we
// cannot see its screen in DevTools).
//
// |this.boxMatrix| is set in the Device Orientation coordinate space
// because it represents the phone model we show users and also because the
// calculations in UI.Geometry.EulerAngles assume this coordinate space (so
// we apply the rotations in the Z-X'-Y'' order).
// The CSS transforms, on the other hand, are done in the CSS coordinate
// space, so we need to convert 2) to 1) while keeping 3) in mind. We can
// cover 3) by swapping the Y and Z axes, and 2) by inverting the X axis.
const {alpha, beta, gamma} = deviceOrientation;
this.boxMatrix = new DOMMatrixReadOnly().rotate(0, 0, alpha).rotate(beta, 0, 0).rotate(0, gamma, 0);
this.orientationLayer.style.transform = `rotateY(${alpha}deg) rotateX(${- beta}deg) rotateZ(${gamma}deg)`;
}
private onBoxDrag(event: MouseEvent): boolean {
const mouseMoveVector = this.calculateRadiusVector(event.x, event.y);
if (!mouseMoveVector) {
return true;
}
if (!this.mouseDownVector) {
return true;
}
event.consume(true);
let axis, angle;
if (event.shiftKey) {
axis = new UI.Geometry.Vector(0, 0, 1);
angle = (mouseMoveVector.x - this.mouseDownVector.x) * ShiftDragOrientationSpeed;
} else {
axis = UI.Geometry.crossProduct(this.mouseDownVector, mouseMoveVector);
angle = UI.Geometry.calculateAngle(this.mouseDownVector, mouseMoveVector);
}
// See the comment in setBoxOrientation() for a longer explanation about
// the CSS coordinate space, the Device Orientation coordinate space and
// the conversions we make. |axis| and |angle| are in the CSS coordinate
// space, while |this.originalBoxMatrix| is rotated and in the Device
// Orientation coordinate space, which is why we swap Y and Z and invert X.
const currentMatrix =
new DOMMatrixReadOnly().rotateAxisAngle(-axis.x, axis.z, axis.y, angle).multiply(this.originalBoxMatrix);
const eulerAngles = UI.Geometry.EulerAngles.fromDeviceOrientationRotationMatrix(currentMatrix);
const newOrientation =
new SDK.EmulationModel.DeviceOrientation(eulerAngles.alpha, eulerAngles.beta, eulerAngles.gamma);
this.setDeviceOrientation(newOrientation, DeviceOrientationModificationSource.UserDrag);
this.setSelectElementLabel(this.orientationSelectElement, NonPresetOptions.Custom);
return false;
}
private onBoxDragStart(event: MouseEvent): boolean {
if (!this.deviceOrientationOverrideEnabled) {
return false;
}
this.mouseDownVector = this.calculateRadiusVector(event.x, event.y);
this.originalBoxMatrix = this.boxMatrix;
if (!this.mouseDownVector) {
return false;
}
event.consume(true);
return true;
}
private calculateRadiusVector(x: number, y: number): UI.Geometry.Vector|null {
const rect = this.stageElement.getBoundingClientRect();
const radius = Math.max(rect.width, rect.height) / 2;
const sphereX = (x - rect.left - rect.width / 2) / radius;
const sphereY = (y - rect.top - rect.height / 2) / radius;
const sqrSum = sphereX * sphereX + sphereY * sphereY;
if (sqrSum > 0.5) {
return new UI.Geometry.Vector(sphereX, sphereY, 0.5 / Math.sqrt(sqrSum));
}
return new UI.Geometry.Vector(sphereX, sphereY, Math.sqrt(1 - sqrSum));
}
private appendTouchControl(): void {
const container = this.contentElement.createChild('div', 'touch-section');
const control = UI.SettingsUI.createControlForSetting(
Common.Settings.Settings.instance().moduleSetting('emulation.touch'),
i18nString(UIStrings.forcesTouchInsteadOfClick));
if (control) {
container.appendChild(control);
}
}
private appendIdleEmulator(): void {
const container = this.contentElement.createChild('div', 'idle-section');
const control = UI.SettingsUI.createControlForSetting(
Common.Settings.Settings.instance().moduleSetting('emulation.idleDetection'),
i18nString(UIStrings.forcesSelectedIdleStateEmulation));
if (control) {
container.appendChild(control);
}
}
}
export const enum DeviceOrientationModificationSource {
UserInput = 'userInput',
UserDrag = 'userDrag',
ResetButton = 'resetButton',
SelectPreset = 'selectPreset',
}
/** {string} */
export const NonPresetOptions = {
NoOverride: 'noOverride',
Custom: 'custom',
Unavailable: 'unavailable',
};
export class PresetOrientations {
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/naming-convention
static get Orientations(): {title: string, value: {title: string, orientation: string}[]}[] {
return [{
title: i18nString(UIStrings.presets),
value: [
{title: i18nString(UIStrings.portrait), orientation: '[0, 90, 0]'},
{title: i18nString(UIStrings.portraitUpsideDown), orientation: '[-180, -90, 0]'},
{title: i18nString(UIStrings.landscapeLeft), orientation: '[90, 0, -90]'},
{title: i18nString(UIStrings.landscapeRight), orientation: '[90, -180, -90]'},
{title: i18nString(UIStrings.displayUp), orientation: '[0, 0, 0]'},
{title: i18nString(UIStrings.displayDown), orientation: '[0, -180, 0]'},
],
}];
}
}
let showActionDelegateInstance: ShowActionDelegate;
export class ShowActionDelegate implements UI.ActionRegistration.ActionDelegate {
handleAction(_context: UI.Context.Context, _actionId: string): boolean {
void UI.ViewManager.ViewManager.instance().showView('sensors');
return true;
}
static instance(opts: {
forceNew: boolean|null,
} = {forceNew: null}): ShowActionDelegate {
const {forceNew} = opts;
if (!showActionDelegateInstance || forceNew) {
showActionDelegateInstance = new ShowActionDelegate();
}
return showActionDelegateInstance;
}
}
export const ShiftDragOrientationSpeed = 16;