@yuebai008/cli/dist/cli-server/client/front_end/panels/emulation/DeviceModeToolbar.js

Command line interface for rapid qg-minigame development

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 Root from"../../core/root/root.js";import*as EmulationModel from"../../models/emulation/emulation.js";import*as UI from"../../ui/legacy/legacy.js";import*as MobileThrottling from"../mobile_throttling/mobile_throttling.js";import*as EmulationComponents from"./components/components.js";import deviceModeToolbarStyles from"./deviceModeToolbar.css.legacy.js";const UIStrings={dimensions:"Dimensions",width:"Width",heightLeaveEmptyForFull:"Height (leave empty for full)",zoom:"Zoom",devicePixelRatio:"Device pixel ratio",deviceType:"Device type",experimentalWebPlatformFeature:'"`Experimental Web Platform Feature`" flag is enabled. Click to disable it.',experimentalWebPlatformFeatureFlag:'"`Experimental Web Platform Feature`" flag is disabled. Click to enable it.',moreOptions:"More options",fitToWindowF:"Fit to window ({PH1}%)",autoadjustZoom:"Auto-adjust zoom",defaultF:"Default: {PH1}",hideDeviceFrame:"Hide device frame",showDeviceFrame:"Show device frame",hideMediaQueries:"Hide media queries",showMediaQueries:"Show media queries",hideRulers:"Hide rulers",showRulers:"Show rulers",removeDevicePixelRatio:"Remove device pixel ratio",addDevicePixelRatio:"Add device pixel ratio",removeDeviceType:"Remove device type",addDeviceType:"Add device type",resetToDefaults:"Reset to defaults",closeDevtools:"Close DevTools",responsive:"Responsive",edit:"Edit…",portrait:"Portrait",landscape:"Landscape",rotate:"Rotate",none:"None",screenOrientationOptions:"Screen orientation options",toggleDualscreenMode:"Toggle dual-screen mode"},str_=i18n.i18n.registerUIStrings("panels/emulation/DeviceModeToolbar.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);function setTitleForButton(e,t){e.setTitle(t),e.element.title=t}export class DeviceModeToolbar{model;showMediaInspectorSetting;showRulersSetting;experimentDualScreenSupport;deviceOutlineSetting;showDeviceScaleFactorSetting;showUserAgentTypeSetting;autoAdjustScaleSetting;lastMode;elementInternal;emulatedDevicesList;persistenceSetting;spanButton;modeButton;widthInput;heightInput;deviceScaleItem;deviceSelectItem;scaleItem;uaItem;experimentalButton;cachedDeviceScale;cachedUaType;xItem;throttlingConditionsItem;cachedModelType;cachedScale;cachedModelDevice;cachedModelMode;constructor(e,t,i){this.model=e,this.showMediaInspectorSetting=t,this.showRulersSetting=i,this.experimentDualScreenSupport=Root.Runtime.experiments.isEnabled("dualScreenSupport"),this.deviceOutlineSetting=this.model.deviceOutlineSetting(),this.showDeviceScaleFactorSetting=Common.Settings.Settings.instance().createSetting("emulation.showDeviceScaleFactor",!1),this.showDeviceScaleFactorSetting.addChangeListener(this.updateDeviceScaleFactorVisibility,this),this.showUserAgentTypeSetting=Common.Settings.Settings.instance().createSetting("emulation.showUserAgentType",!1),this.showUserAgentTypeSetting.addChangeListener(this.updateUserAgentTypeVisibility,this),this.autoAdjustScaleSetting=Common.Settings.Settings.instance().createSetting("emulation.autoAdjustScale",!0),this.lastMode=new Map,this.elementInternal=document.createElement("div"),this.elementInternal.classList.add("device-mode-toolbar");const o=this.elementInternal.createChild("div","device-mode-toolbar-spacer");o.createChild("div","device-mode-toolbar-spacer");const n=new UI.Toolbar.Toolbar("",o);this.fillLeftToolbar(n);const s=new UI.Toolbar.Toolbar("",this.elementInternal);s.makeWrappable(),this.widthInput=new EmulationComponents.DeviceSizeInputElement.SizeInputElement(i18nString(UIStrings.width)),this.widthInput.addEventListener("sizechanged",(({size:e})=>{this.model.setWidthAndScaleToFit(e)})),this.heightInput=new EmulationComponents.DeviceSizeInputElement.SizeInputElement(i18nString(UIStrings.heightLeaveEmptyForFull)),this.heightInput.addEventListener("sizechanged",(({size:e})=>{this.model.setHeightAndScaleToFit(e)})),this.fillMainToolbar(s);const l=this.elementInternal.createChild("div","device-mode-toolbar-spacer"),a=new UI.Toolbar.Toolbar("device-mode-toolbar-fixed-size",l);a.makeWrappable(),this.fillRightToolbar(a);const d=new UI.Toolbar.Toolbar("device-mode-toolbar-fixed-size",l);d.makeWrappable(),this.fillModeToolbar(d),l.createChild("div","device-mode-toolbar-spacer");const r=new UI.Toolbar.Toolbar("device-mode-toolbar-options",l);function c(){const t=e.toolbarControlsEnabledSetting().get();n.setEnabled(t),s.setEnabled(t),a.setEnabled(t),d.setEnabled(t),r.setEnabled(t)}r.makeWrappable(),this.fillOptionsToolbar(r),this.emulatedDevicesList=EmulationModel.EmulatedDevices.EmulatedDevicesList.instance(),this.emulatedDevicesList.addEventListener("CustomDevicesUpdated",this.deviceListChanged,this),this.emulatedDevicesList.addEventListener("StandardDevicesUpdated",this.deviceListChanged,this),this.persistenceSetting=Common.Settings.Settings.instance().createSetting("emulation.deviceModeValue",{device:"",orientation:"",mode:""}),this.model.toolbarControlsEnabledSetting().addChangeListener(c),c()}createEmptyToolbarElement(){const e=document.createElement("div");return e.classList.add("device-mode-empty-toolbar-element"),e}fillLeftToolbar(e){e.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement())),this.deviceSelectItem=new UI.Toolbar.ToolbarMenuButton(this.appendDeviceMenuItems.bind(this)),this.deviceSelectItem.setGlyph(""),this.deviceSelectItem.turnIntoSelect(!0),this.deviceSelectItem.setDarkText(),e.appendToolbarItem(this.deviceSelectItem)}fillMainToolbar(e){e.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.widthInput));const t=document.createElement("div");t.classList.add("device-mode-x"),t.textContent="×",this.xItem=this.wrapToolbarItem(t),e.appendToolbarItem(this.xItem),e.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.heightInput))}fillRightToolbar(e){e.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement())),this.scaleItem=new UI.Toolbar.ToolbarMenuButton(this.appendScaleMenuItems.bind(this)),setTitleForButton(this.scaleItem,i18nString(UIStrings.zoom)),this.scaleItem.setGlyph(""),this.scaleItem.turnIntoSelect(),this.scaleItem.setDarkText(),e.appendToolbarItem(this.scaleItem),e.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement())),this.deviceScaleItem=new UI.Toolbar.ToolbarMenuButton(this.appendDeviceScaleMenuItems.bind(this)),this.deviceScaleItem.setVisible(this.showDeviceScaleFactorSetting.get()),setTitleForButton(this.deviceScaleItem,i18nString(UIStrings.devicePixelRatio)),this.deviceScaleItem.setGlyph(""),this.deviceScaleItem.turnIntoSelect(),this.deviceScaleItem.setDarkText(),e.appendToolbarItem(this.deviceScaleItem),e.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement())),this.uaItem=new UI.Toolbar.ToolbarMenuButton(this.appendUserAgentMenuItems.bind(this)),this.uaItem.setVisible(this.showUserAgentTypeSetting.get()),setTitleForButton(this.uaItem,i18nString(UIStrings.deviceType)),this.uaItem.setGlyph(""),this.uaItem.turnIntoSelect(),this.uaItem.setDarkText(),e.appendToolbarItem(this.uaItem),this.throttlingConditionsItem=MobileThrottling.ThrottlingManager.throttlingManager().createMobileThrottlingButton(),e.appendToolbarItem(this.throttlingConditionsItem)}fillModeToolbar(e){e.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement())),this.modeButton=new UI.Toolbar.ToolbarButton("","screen-rotation"),this.modeButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.modeMenuClicked,this),e.appendToolbarItem(this.modeButton),this.experimentDualScreenSupport&&(this.spanButton=new UI.Toolbar.ToolbarButton("","device-fold"),this.spanButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.spanClicked,this),e.appendToolbarItem(this.spanButton),this.createExperimentalButton(e))}createExperimentalButton(e){e.appendToolbarItem(new UI.Toolbar.ToolbarSeparator(!0));const t=this.model.webPlatformExperimentalFeaturesEnabled()?i18nString(UIStrings.experimentalWebPlatformFeature):i18nString(UIStrings.experimentalWebPlatformFeatureFlag);this.experimentalButton=new UI.Toolbar.ToolbarToggle(t,"experiment-check"),this.experimentalButton.setToggled(this.model.webPlatformExperimentalFeaturesEnabled()),this.experimentalButton.setEnabled(!0),this.experimentalButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.experimentalClicked,this),e.appendToolbarItem(this.experimentalButton)}experimentalClicked(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab("chrome://flags/#enable-experimental-web-platform-features")}fillOptionsToolbar(e){e.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));const t=new UI.Toolbar.ToolbarMenuButton(this.appendOptionsMenuItems.bind(this));setTitleForButton(t,i18nString(UIStrings.moreOptions)),e.appendToolbarItem(t)}appendScaleMenuItems(e){this.model.type()===EmulationModel.DeviceModeModel.Type.Device&&e.footerSection().appendItem(i18nString(UIStrings.fitToWindowF,{PH1:this.getPrettyFitZoomPercentage()}),this.onScaleMenuChanged.bind(this,this.model.fitScale()),!1),e.footerSection().appendCheckboxItem(i18nString(UIStrings.autoadjustZoom),this.onAutoAdjustScaleChanged.bind(this),this.autoAdjustScaleSetting.get());const t=function(t,i){e.defaultSection().appendCheckboxItem(t,this.onScaleMenuChanged.bind(this,i),this.model.scaleSetting().get()===i,!1)}.bind(this);t("50%",.5),t("75%",.75),t("100%",1),t("125%",1.25),t("150%",1.5),t("200%",2)}onScaleMenuChanged(e){this.model.scaleSetting().set(e)}onAutoAdjustScaleChanged(){this.autoAdjustScaleSetting.set(!this.autoAdjustScaleSetting.get())}appendDeviceScaleMenuItems(e){const t=this.model.deviceScaleFactorSetting(),i=this.model.uaSetting().get()===EmulationModel.DeviceModeModel.UA.Mobile||this.model.uaSetting().get()===EmulationModel.DeviceModeModel.UA.MobileNoTouch?EmulationModel.DeviceModeModel.defaultMobileScaleFactor:window.devicePixelRatio;function o(e,i,o){e.appendCheckboxItem(i,t.set.bind(t,o),t.get()===o)}o(e.headerSection(),i18nString(UIStrings.defaultF,{PH1:i}),0),o(e.defaultSection(),"1",1),o(e.defaultSection(),"2",2),o(e.defaultSection(),"3",3)}appendUserAgentMenuItems(e){const t=this.model.uaSetting();function i(i,o){e.defaultSection().appendCheckboxItem(i,t.set.bind(t,o),t.get()===o)}i(EmulationModel.DeviceModeModel.UA.Mobile,EmulationModel.DeviceModeModel.UA.Mobile),i(EmulationModel.DeviceModeModel.UA.MobileNoTouch,EmulationModel.DeviceModeModel.UA.MobileNoTouch),i(EmulationModel.DeviceModeModel.UA.Desktop,EmulationModel.DeviceModeModel.UA.Desktop),i(EmulationModel.DeviceModeModel.UA.DesktopTouch,EmulationModel.DeviceModeModel.UA.DesktopTouch)}appendOptionsMenuItems(e){const t=this.model;function i(e,i,o,n,s){void 0===s&&(s=t.type()===EmulationModel.DeviceModeModel.Type.None),e.appendItem(i.get()?o:n,i.set.bind(i,!i.get()),s)}i(e.headerSection(),this.deviceOutlineSetting,i18nString(UIStrings.hideDeviceFrame),i18nString(UIStrings.showDeviceFrame),t.type()!==EmulationModel.DeviceModeModel.Type.Device),i(e.headerSection(),this.showMediaInspectorSetting,i18nString(UIStrings.hideMediaQueries),i18nString(UIStrings.showMediaQueries)),i(e.headerSection(),this.showRulersSetting,i18nString(UIStrings.hideRulers),i18nString(UIStrings.showRulers)),i(e.defaultSection(),this.showDeviceScaleFactorSetting,i18nString(UIStrings.removeDevicePixelRatio),i18nString(UIStrings.addDevicePixelRatio)),i(e.defaultSection(),this.showUserAgentTypeSetting,i18nString(UIStrings.removeDeviceType),i18nString(UIStrings.addDeviceType)),e.appendItemsAtLocation("deviceModeMenu"),e.footerSection().appendItem(i18nString(UIStrings.resetToDefaults),this.reset.bind(this)),e.footerSection().appendItem(i18nString(UIStrings.closeDevtools),Host.InspectorFrontendHost.InspectorFrontendHostInstance.closeWindow.bind(Host.InspectorFrontendHost.InspectorFrontendHostInstance))}reset(){this.deviceOutlineSetting.set(!1),this.showDeviceScaleFactorSetting.set(!1),this.showUserAgentTypeSetting.set(!1),this.showMediaInspectorSetting.set(!1),this.showRulersSetting.set(!1),this.model.reset()}wrapToolbarItem(e){const t=document.createElement("div");return UI.Utils.createShadowRootWithCoreStyles(t,{cssFile:deviceModeToolbarStyles,delegatesFocus:void 0}).appendChild(e),new UI.Toolbar.ToolbarItem(t)}emulateDevice(e){const t=this.autoAdjustScaleSetting.get()?void 0:this.model.scaleSetting().get();this.model.emulate(EmulationModel.DeviceModeModel.Type.Device,e,this.lastMode.get(e)||e.modes[0],t)}switchToResponsive(){this.model.emulate(EmulationModel.DeviceModeModel.Type.Responsive,null,null)}filterDevices(e){return(e=e.filter((function(e){return e.show()}))).sort(EmulationModel.EmulatedDevices.EmulatedDevice.deviceComparator),e}standardDevices(){return this.filterDevices(this.emulatedDevicesList.standard())}customDevices(){return this.filterDevices(this.emulatedDevicesList.custom())}allDevices(){return this.standardDevices().concat(this.customDevices())}appendDeviceMenuItems(e){function t(t){if(!t.length)return;const i=e.section();for(const e of t)i.appendCheckboxItem(e.title,this.emulateDevice.bind(this,e),this.model.device()===e,!1)}e.headerSection().appendCheckboxItem(i18nString(UIStrings.responsive),this.switchToResponsive.bind(this),this.model.type()===EmulationModel.DeviceModeModel.Type.Responsive,!1),t.call(this,this.standardDevices()),t.call(this,this.customDevices()),e.footerSection().appendItem(i18nString(UIStrings.edit),this.emulatedDevicesList.revealCustomSetting.bind(this.emulatedDevicesList),!1)}deviceListChanged(){const e=this.model.device();if(!e)return;const t=this.allDevices();-1===t.indexOf(e)?t.length?this.emulateDevice(t[0]):this.model.emulate(EmulationModel.DeviceModeModel.Type.Responsive,null,null):this.emulateDevice(e)}updateDeviceScaleFactorVisibility(){this.deviceScaleItem&&this.deviceScaleItem.setVisible(this.showDeviceScaleFactorSetting.get())}updateUserAgentTypeVisibility(){this.uaItem&&this.uaItem.setVisible(this.showUserAgentTypeSetting.get())}spanClicked(){const e=this.model.device();if(!e||!e.isDualScreen)return;const t=this.autoAdjustScaleSetting.get()?void 0:this.model.scaleSetting().get(),i=this.model.mode();if(!i)return;const o=e.getSpanPartner(i);o&&this.model.emulate(this.model.type(),e,o,t)}modeMenuClicked(e){const t=this.model.device(),i=this.model,o=this.autoAdjustScaleSetting;if(i.type()===EmulationModel.DeviceModeModel.Type.Responsive){const e=i.appliedDeviceSize();return void(o.get()?i.setSizeAndScaleToFit(e.height,e.width):(i.setWidth(e.height),i.setHeight(e.width)))}if(!t)return;if((t.isDualScreen||2===t.modes.length)&&t.modes[0].orientation!==t.modes[1].orientation){const e=o.get()?void 0:i.scaleSetting().get(),n=i.mode();if(!n)return;const s=t.getRotationPartner(n);if(!s)return;return void i.emulate(i.type(),i.device(),s,e)}if(!this.modeButton)return;const n=new UI.ContextMenu.ContextMenu(e.data,{useSoftMenu:!1,x:this.modeButton.element.getBoundingClientRect().left,y:this.modeButton.element.getBoundingClientRect().top+this.modeButton.element.offsetHeight});function s(e,i){if(!t)return;const o=t.modesForOrientation(e);if(o.length)if(1===o.length)l(o[0],i);else for(let e=0;e<o.length;e++)l(o[e],i+" – "+o[e].title)}function l(e,t){n.defaultSection().appendCheckboxItem(t,a.bind(null,e),i.mode()===e,!1)}function a(e){const t=o.get()?void 0:i.scaleSetting().get();i.emulate(i.type(),i.device(),e,t)}s(EmulationModel.EmulatedDevices.Vertical,i18nString(UIStrings.portrait)),s(EmulationModel.EmulatedDevices.Horizontal,i18nString(UIStrings.landscape)),n.show()}getPrettyFitZoomPercentage(){return`${(100*this.model.fitScale()).toFixed(0)}`}getPrettyZoomPercentage(){return`${(100*this.model.scale()).toFixed(0)}`}element(){return this.elementInternal}update(){this.model.type()!==this.cachedModelType&&(this.cachedModelType=this.model.type(),this.widthInput.disabled=this.model.type()!==EmulationModel.DeviceModeModel.Type.Responsive,this.heightInput.disabled=this.model.type()!==EmulationModel.DeviceModeModel.Type.Responsive,this.deviceScaleItem.setEnabled(this.model.type()===EmulationModel.DeviceModeModel.Type.Responsive),this.uaItem.setEnabled(this.model.type()===EmulationModel.DeviceModeModel.Type.Responsive),this.model.type()===EmulationModel.DeviceModeModel.Type.Responsive?(this.modeButton.setEnabled(!0),setTitleForButton(this.modeButton,i18nString(UIStrings.rotate))):this.modeButton.setEnabled(!1));const e=this.model.appliedDeviceSize();this.widthInput.size=String(e.width),this.heightInput.size=this.model.type()===EmulationModel.DeviceModeModel.Type.Responsive&&this.model.isFullHeight()?"":String(e.height),this.heightInput.placeholder=String(e.height),this.model.scale()!==this.cachedScale&&(this.scaleItem.setText(`${this.getPrettyZoomPercentage()}%`),this.cachedScale=this.model.scale());const t=this.model.appliedDeviceScaleFactor();t!==this.cachedDeviceScale&&(this.deviceScaleItem.setText(`DPR: ${t.toFixed(1)}`),this.cachedDeviceScale=t);const i=this.model.appliedUserAgentType();i!==this.cachedUaType&&(this.uaItem.setText(i),this.cachedUaType=i);let o=i18nString(UIStrings.none);this.model.type()===EmulationModel.DeviceModeModel.Type.Responsive&&(o=i18nString(UIStrings.responsive));const n=this.model.device();if(this.model.type()===EmulationModel.DeviceModeModel.Type.Device&&n&&(o=n.title),this.deviceSelectItem.setText(`${i18nString(UIStrings.dimensions)}: ${o}`),this.model.device()!==this.cachedModelDevice){const e=this.model.device();if(e){const t=e?e.modes.length:0;this.modeButton.setEnabled(t>=2),setTitleForButton(this.modeButton,i18nString(2===t?UIStrings.rotate:UIStrings.screenOrientationOptions))}this.cachedModelDevice=e}if(this.experimentDualScreenSupport&&this.experimentalButton){const e=this.model.device();e&&e.isDualScreen?(this.spanButton.setVisible(!0),this.experimentalButton.setVisible(!0)):(this.spanButton.setVisible(!1),this.experimentalButton.setVisible(!1)),setTitleForButton(this.spanButton,i18nString(UIStrings.toggleDualscreenMode))}if(this.model.type()===EmulationModel.DeviceModeModel.Type.Device&&this.lastMode.set(this.model.device(),this.model.mode()),this.model.mode()!==this.cachedModelMode&&this.model.type()!==EmulationModel.DeviceModeModel.Type.None){this.cachedModelMode=this.model.mode();const e=this.persistenceSetting.get(),t=this.model.device();if(t){e.device=t.title;const i=this.model.mode();e.orientation=i?i.orientation:"",e.mode=i?i.title:""}else e.device="",e.orientation="",e.mode="";this.persistenceSetting.set(e)}}restore(){for(const e of this.allDevices())if(e.title===this.persistenceSetting.get().device)for(const t of e.modes)if(t.orientation===this.persistenceSetting.get().orientation&&t.title===this.persistenceSetting.get().mode)return this.lastMode.set(e,t),void this.emulateDevice(e);this.model.emulate(EmulationModel.DeviceModeModel.Type.Responsive,null,null)}}