@react-native/debugger-frontend/dist/third-party/front_end/panels/settings/emulation/emulation.js

Debugger frontend for React Native based on Chrome DevTools

import"../../../ui/components/cards/cards.js";import*as e from"../../../core/i18n/i18n.js";import*as t from"../../../models/emulation/emulation.js";import*as i from"../../../ui/legacy/legacy.js";import*as s from"../../../ui/visual_logging/visual_logging.js";import*as d from"./components/components.js";var a={cssText:`.device-card-content{padding-left:0;padding-right:0}.list{&:has(div){border:none}}#custom-device-add-button{padding:var(--sys-size-5) var(--sys-size-6)}.devices-settings-tab .devices-button-row{flex:none;display:flex;devtools-button{margin:4px 0 0 5px}}.devices-settings-tab .devices-list{width:min(350px,100%);margin-top:10px}.devices-list-item{padding:var(--sys-size-3) var(--sys-size-6);height:var(--sys-size-13);display:flex;align-items:center;flex:auto 1 1;overflow:hidden;color:var(--sys-color-on-surface);user-select:none;white-space:nowrap;text-overflow:ellipsis}.devices-list-checkbox{height:12px;width:12px;margin:2px 5px 2px 2px;flex:none;pointer-events:none}.device-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.devices-edit-fields{flex:auto;display:flex;flex-direction:column;align-items:stretch;padding-left:4px;margin-bottom:5px}.devices-edit-fields b{margin-top:8px;margin-bottom:0}.devices-edit-client-hints-heading{display:flex;flex-direction:row;align-items:center;margin-bottom:5px}li .devices-edit-client-hints-heading{margin-bottom:0}.devices-edit-client-hints-heading b{margin-inline-end:2px}.devices-edit-client-hints-heading .help-icon{margin-left:2px;margin-right:2px;vertical-align:middle}.devices-edit-client-hints-heading a:focus{box-shadow:var(--sys-color-state-focus-ring)}.devices-edit-fields input{flex:auto;margin:8px 5px 0}li.devices-edit-client-hints-field{left:-12px}.devices-edit-client-hints-field input{flex:auto;margin:8px 5px 0}.devices-edit-fields .device-edit-fixed{flex:0 0 140px}.devices-edit-fields select{margin:8px 5px 0}\n/*# sourceURL=${import.meta.resolve("./devicesSettingsTab.css")} */\n`};const c={customDevices:"Custom devices",defaultDevices:"Default devices",addCustomDevice:"Add custom device",device:"Device",deviceName:"Device Name",width:"Width",height:"Height",devicePixelRatio:"Device pixel ratio",userAgentString:"User agent string",userAgentType:"User agent type",deviceNameMustBeLessThanS:"Device name must be less than {PH1} characters.",deviceNameCannotBeEmpty:"Device name cannot be empty.",deviceAddedOrUpdated:"Device {PH1} successfully added/updated."},n=e.i18n.registerUIStrings("panels/settings/emulation/DevicesSettingsTab.ts",c),o=e.i18n.getLocalizedString.bind(void 0,n);class l extends i.Widget.VBox{containerElement;addCustomButton;ariaSuccessMessageElement;#e;#t;muteUpdate;emulatedDevicesList;editor;constructor(){super(),this.registerRequiredCSS(a),this.element.setAttribute("jslog",`${s.pane("devices")}`),this.containerElement=this.contentElement.createChild("div","settings-card-container-wrapper").createChild("div"),this.containerElement.classList.add("settings-card-container","ignore-list-settings"),this.#t=new i.ListWidget.ListWidget(this,!1),this.#t.registerRequiredCSS(a),this.#t.element.classList.add("devices-list","device-card-content"),this.muteUpdate=!1,this.emulatedDevicesList=t.EmulatedDevices.EmulatedDevicesList.instance(),this.emulatedDevicesList.addEventListener("CustomDevicesUpdated",this.devicesUpdated,this),this.emulatedDevicesList.addEventListener("StandardDevicesUpdated",this.devicesUpdated,this),this.ariaSuccessMessageElement=this.contentElement.createChild("div","device-success-message"),i.ARIAUtils.markAsPoliteLiveRegion(this.ariaSuccessMessageElement,!1),this.addCustomButton=i.UIUtils.createTextButton(o(c.addCustomDevice),this.addCustomDevice.bind(this),{jslogContext:"add-custom-device"}),this.addCustomButton.id="custom-device-add-button";const e=document.createElement("div");e.classList.add("device-card-content"),e.appendChild(this.ariaSuccessMessageElement);const d=e.createChild("div");e.appendChild(this.addCustomButton);const n=this.containerElement.createChild("devtools-card");n.heading=o(c.customDevices),n.append(e),this.#e=new i.ListWidget.ListWidget(this,!1),this.#e.registerRequiredCSS(a),this.#e.element.classList.add("devices-list"),this.#e.show(d);const l=this.containerElement.createChild("devtools-card");l.heading=o(c.defaultDevices),l.append(this.#t.element)}wasShown(){super.wasShown(),this.devicesUpdated()}devicesUpdated(){if(this.muteUpdate)return;this.#t.clear(),this.#e.clear();let e=this.emulatedDevicesList.custom().slice();for(let t=0;t<e.length;++t)this.#e.appendItem(e[t],!0);e=this.emulatedDevicesList.standard().slice(),e.sort(t.EmulatedDevices.EmulatedDevice.deviceComparator);for(let t=0;t<e.length;++t)this.#t.appendItem(e[t],!1)}muteAndSaveDeviceList(e){this.muteUpdate=!0,e?this.emulatedDevicesList.saveCustomDevices():this.emulatedDevicesList.saveStandardDevices(),this.muteUpdate=!1}addCustomDevice(){const e=new t.EmulatedDevices.EmulatedDevice;e.deviceScaleFactor=0,e.horizontal.width=700,e.horizontal.height=400,e.vertical.width=400,e.vertical.height=700,this.#e.addNewItem(this.emulatedDevicesList.custom().length,e)}toNumericInputValue(e){return e?String(e):""}renderItem(e,t){const i=document.createElement("label");i.classList.add("devices-list-item");const d=i.createChild("input","devices-list-checkbox");d.type="checkbox",d.checked=e.show(),d.addEventListener("click",function(i){const s=d.checked;e.setShow(s),this.muteAndSaveDeviceList(t),i.consume()}.bind(this),!1),d.setAttribute("jslog",`${s.toggle().track({click:!0})}`);const a=document.createElement("span");return a.classList.add("device-name"),a.appendChild(document.createTextNode(e.title)),i.appendChild(a),i}removeItemRequested(e){this.emulatedDevicesList.removeCustomDevice(e)}commitEdit(e,i,s){e.title=i.control("title").value.trim(),e.vertical.width=i.control("width").value?parseInt(i.control("width").value,10):0,e.vertical.height=i.control("height").value?parseInt(i.control("height").value,10):0,e.horizontal.width=e.vertical.height,e.horizontal.height=e.vertical.width,e.deviceScaleFactor=i.control("scale").value?parseFloat(i.control("scale").value):0,e.userAgent=i.control("user-agent").value,e.modes=[],e.modes.push({title:"",orientation:t.EmulatedDevices.Vertical,insets:new t.DeviceModeModel.Insets(0,0,0,0),image:null}),e.modes.push({title:"",orientation:t.EmulatedDevices.Horizontal,insets:new t.DeviceModeModel.Insets(0,0,0,0),image:null}),e.capabilities=[];const d=i.control("ua-type").value;"Mobile"!==d&&"Mobile (no touch)"!==d||e.capabilities.push("mobile"),"Mobile"!==d&&"Desktop (touch)"!==d||e.capabilities.push("touch");const a=i.control("ua-metadata").value.metaData;a&&(e.userAgentMetadata={...a,mobile:"Mobile"===d||"Mobile (no touch)"===d}),s?this.emulatedDevicesList.addCustomDevice(e):this.emulatedDevicesList.saveCustomDevices(),this.addCustomButton.scrollIntoViewIfNeeded(),this.addCustomButton.focus(),this.ariaSuccessMessageElement.setAttribute("aria-label",o(c.deviceAddedOrUpdated,{PH1:e.title}))}beginEdit(e){const t=this.createEditor();let i;return t.control("title").value=e.title,t.control("width").value=this.toNumericInputValue(e.vertical.width),t.control("height").value=this.toNumericInputValue(e.vertical.height),t.control("scale").value=this.toNumericInputValue(e.deviceScaleFactor),t.control("user-agent").value=e.userAgent,i=e.mobile()?e.touch()?"Mobile":"Mobile (no touch)":e.touch()?"Desktop (touch)":"Desktop",t.control("ua-type").value=i,t.control("ua-metadata").value={metaData:e.userAgentMetadata||void 0},t}createEditor(){if(this.editor)return this.editor;const e=new i.ListWidget.Editor;this.editor=e;const s=e.contentElement(),a=s.createChild("div","devices-edit-fields");i.UIUtils.createTextChild(a.createChild("b"),o(c.device));const n=e.createInput("title","text",o(c.deviceName),(function(e,i,s){let d,a=!1;const n=s.value.trim();n.length>=t.DeviceModeModel.MaxDeviceNameLength?d=o(c.deviceNameMustBeLessThanS,{PH1:t.DeviceModeModel.MaxDeviceNameLength}):0===n.length?d=o(c.deviceNameCannotBeEmpty):a=!0;return{valid:a,errorMessage:d}}));a.createChild("div","hbox").appendChild(n),n.id="custom-device-name-field";const l=a.createChild("div","hbox");l.appendChild(e.createInput("width","text",o(c.width),(function(e,i,s){return t.DeviceModeModel.DeviceModeModel.widthValidator(s.value)}))),l.appendChild(e.createInput("height","text",o(c.height),(function(e,i,s){return t.DeviceModeModel.DeviceModeModel.heightValidator(s.value)})));const r=e.createInput("scale","text",o(c.devicePixelRatio),(function(e,i,s){return t.DeviceModeModel.DeviceModeModel.scaleValidator(s.value)}));r.classList.add("device-edit-fixed"),l.appendChild(r);const u=s.createChild("div","devices-edit-fields");i.UIUtils.createTextChild(u.createChild("b"),o(c.userAgentString));const v=u.createChild("div","hbox");v.appendChild(e.createInput("user-agent","text",o(c.userAgentString),(()=>({valid:!0,errorMessage:void 0}))));const h=e.createSelect("ua-type",["Mobile","Mobile (no touch)","Desktop","Desktop (touch)"],(()=>({valid:!0,errorMessage:void 0})),o(c.userAgentType));h.classList.add("device-edit-fixed"),v.appendChild(h);const m=e.createCustomControl("ua-metadata",d.UserAgentClientHintsForm.UserAgentClientHintsForm,(function(){return m.validate()}));return m.value={},m.addEventListener("clienthintschange",(()=>e.requestValidation()),!1),s.appendChild(m),e}}var r=Object.freeze({__proto__:null,DevicesSettingsTab:l});export{r as DevicesSettingsTab};