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

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as SDK from"../../core/sdk/sdk.js";import*as Bindings from"../../models/bindings/bindings.js";import*as UI from"../../ui/legacy/legacy.js";import mediaQueryInspectorStyles from"./mediaQueryInspector.css.legacy.js";const UIStrings={revealInSourceCode:"Reveal in source code"},str_=i18n.i18n.registerUIStrings("panels/emulation/MediaQueryInspector.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class MediaQueryInspector extends UI.Widget.Widget{mediaThrottler;getWidthCallback;setWidthCallback;scale;elementsToMediaQueryModel;elementsToCSSLocations;cssModel;cachedQueryModels;constructor(e,t,i){super(!0),this.registerRequiredCSS(mediaQueryInspectorStyles),this.contentElement.classList.add("media-inspector-view"),this.contentElement.addEventListener("click",this.onMediaQueryClicked.bind(this),!1),this.contentElement.addEventListener("contextmenu",this.onContextMenu.bind(this),!1),this.mediaThrottler=i,this.getWidthCallback=e,this.setWidthCallback=t,this.scale=1,this.elementsToMediaQueryModel=new WeakMap,this.elementsToCSSLocations=new WeakMap,SDK.TargetManager.TargetManager.instance().observeModels(SDK.CSSModel.CSSModel,this),UI.ZoomManager.ZoomManager.instance().addEventListener("ZoomChanged",this.renderMediaQueries.bind(this),this)}modelAdded(e){e.target()===SDK.TargetManager.TargetManager.instance().primaryPageTarget()&&(this.cssModel=e,this.cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetAdded,this.scheduleMediaQueriesUpdate,this),this.cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetRemoved,this.scheduleMediaQueriesUpdate,this),this.cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetChanged,this.scheduleMediaQueriesUpdate,this),this.cssModel.addEventListener(SDK.CSSModel.Events.MediaQueryResultChanged,this.scheduleMediaQueriesUpdate,this))}modelRemoved(e){e===this.cssModel&&(this.cssModel.removeEventListener(SDK.CSSModel.Events.StyleSheetAdded,this.scheduleMediaQueriesUpdate,this),this.cssModel.removeEventListener(SDK.CSSModel.Events.StyleSheetRemoved,this.scheduleMediaQueriesUpdate,this),this.cssModel.removeEventListener(SDK.CSSModel.Events.StyleSheetChanged,this.scheduleMediaQueriesUpdate,this),this.cssModel.removeEventListener(SDK.CSSModel.Events.MediaQueryResultChanged,this.scheduleMediaQueriesUpdate,this),delete this.cssModel)}setAxisTransform(e){Math.abs(this.scale-e)<1e-8||(this.scale=e,this.renderMediaQueries())}onMediaQueryClicked(e){const t=e.target.enclosingNodeOrSelfWithClass("media-inspector-bar");if(!t)return;const i=this.elementsToMediaQueryModel.get(t);if(!i)return;const s=i.maxWidthExpression(),n=i.minWidthExpression();if(0===i.section())return void this.setWidthCallback(s&&s.computedLength()||0);if(2===i.section())return void this.setWidthCallback(n&&n.computedLength()||0);const r=this.getWidthCallback();n&&r!==n.computedLength()?this.setWidthCallback(n.computedLength()||0):this.setWidthCallback(s&&s.computedLength()||0)}onContextMenu(e){if(!this.cssModel||!this.cssModel.isEnabled())return;const t=e.target.enclosingNodeOrSelfWithClass("media-inspector-bar");if(!t)return;const i=this.elementsToCSSLocations.get(t)||[],s=new Map;for(let e=0;e<i.length;++e){const t=Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().rawLocationToUILocation(i[e]);if(!t)continue;const n="number"==typeof t.columnNumber?Platform.StringUtilities.sprintf("%s:%d:%d",t.uiSourceCode.url(),t.lineNumber+1,t.columnNumber+1):Platform.StringUtilities.sprintf("%s:%d",t.uiSourceCode.url(),t.lineNumber+1);s.set(n,t)}const n=[...s.keys()].sort(),r=new UI.ContextMenu.ContextMenu(e),o=r.defaultSection().appendSubMenuItem(i18nString(UIStrings.revealInSourceCode));for(let e=0;e<n.length;++e){const t=n[e];o.defaultSection().appendItem(t,this.revealSourceLocation.bind(this,s.get(t)))}r.show()}revealSourceLocation(e){Common.Revealer.reveal(e)}scheduleMediaQueriesUpdate(){this.isShowing()&&this.mediaThrottler.schedule(this.refetchMediaQueries.bind(this))}refetchMediaQueries(){return this.isShowing()&&this.cssModel?this.cssModel.getMediaQueries().then(this.rebuildMediaQueries.bind(this)):Promise.resolve()}squashAdjacentEqual(e){const t=[];for(let i=0;i<e.length;++i){const s=t[t.length-1];s&&s.equals(e[i])||t.push(e[i])}return t}rebuildMediaQueries(e){let t=[];for(let i=0;i<e.length;++i){const s=e[i];if(s.mediaList)for(let e=0;e<s.mediaList.length;++e){const i=s.mediaList[e],n=MediaQueryUIModel.createFromMediaQuery(s,i);n&&t.push(n)}}t.sort((function(e,t){return e.compareTo(t)})),t=this.squashAdjacentEqual(t);let i=this.cachedQueryModels&&this.cachedQueryModels.length===t.length;for(let e=0;i&&e<t.length;++e)i=i&&this.cachedQueryModels&&this.cachedQueryModels[e].equals(t[e]);i||(this.cachedQueryModels=t,this.renderMediaQueries())}renderMediaQueries(){if(!this.cachedQueryModels||!this.isShowing())return;const e=[];let t=null;for(let i=0;i<this.cachedQueryModels.length;++i){const s=this.cachedQueryModels[i];t&&t.model.dimensionsEqual(s)?t.active=t.active||s.active():(t={active:s.active(),model:s,locations:[]},e.push(t));const n=s.rawLocation();n&&t.locations.push(n)}this.contentElement.removeChildren();let i=null;for(let t=0;t<e.length;++t){t&&e[t].model.section()===e[t-1].model.section()||(i=this.contentElement.createChild("div","media-inspector-marker-container"));const s=e[t],n=this.createElementFromMediaQueryModel(s.model);if(this.elementsToMediaQueryModel.set(n,s.model),this.elementsToCSSLocations.set(n,s.locations),n.classList.toggle("media-inspector-marker-inactive",!s.active),!i)throw new Error("Could not find container to render media queries into.");i.appendChild(n)}}zoomFactor(){return UI.ZoomManager.ZoomManager.instance().zoomFactor()/this.scale}wasShown(){super.wasShown(),this.scheduleMediaQueriesUpdate()}createElementFromMediaQueryModel(e){const t=this.zoomFactor(),i=e.minWidthExpression(),s=e.maxWidthExpression(),n=i?(i.computedLength()||0)/t:0,r=s?(s.computedLength()||0)/t:0,o=document.createElement("div");if(o.classList.add("media-inspector-bar"),0===e.section()){o.createChild("div","media-inspector-marker-spacer");const t=o.createChild("div","media-inspector-marker media-inspector-marker-max-width");t.style.width=r+"px",UI.Tooltip.Tooltip.install(t,e.mediaText()),a(t,e.maxWidthExpression(),!1,!1),a(t,e.maxWidthExpression(),!0,!0),o.createChild("div","media-inspector-marker-spacer")}if(1===e.section()){o.createChild("div","media-inspector-marker-spacer");const t=o.createChild("div","media-inspector-marker media-inspector-marker-min-max-width");t.style.width=.5*(r-n)+"px",UI.Tooltip.Tooltip.install(t,e.mediaText()),a(t,e.maxWidthExpression(),!0,!1),a(t,e.minWidthExpression(),!1,!0),o.createChild("div","media-inspector-marker-spacer").style.flex="0 0 "+n+"px";const i=o.createChild("div","media-inspector-marker media-inspector-marker-min-max-width");i.style.width=.5*(r-n)+"px",UI.Tooltip.Tooltip.install(i,e.mediaText()),a(i,e.minWidthExpression(),!0,!1),a(i,e.maxWidthExpression(),!1,!0),o.createChild("div","media-inspector-marker-spacer")}if(2===e.section()){const t=o.createChild("div","media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-left");UI.Tooltip.Tooltip.install(t,e.mediaText()),a(t,e.minWidthExpression(),!1,!1),o.createChild("div","media-inspector-marker-spacer").style.flex="0 0 "+n+"px";const i=o.createChild("div","media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-right");UI.Tooltip.Tooltip.install(i,e.mediaText()),a(i,e.minWidthExpression(),!0,!0)}function a(e,t,i,s){t&&(e.createChild("div","media-inspector-marker-label-container "+(i?"media-inspector-marker-label-container-left":"media-inspector-marker-label-container-right")).createChild("span","media-inspector-marker-label "+(s?"media-inspector-label-left":"media-inspector-label-right")).textContent=t.value()+t.unit())}return o}}export class MediaQueryUIModel{cssMedia;minWidthExpressionInternal;maxWidthExpressionInternal;activeInternal;sectionInternal;rawLocationInternal;constructor(e,t,i,s){this.cssMedia=e,this.minWidthExpressionInternal=t,this.maxWidthExpressionInternal=i,this.activeInternal=s,this.sectionInternal=i&&!t?0:t&&i?1:2}static createFromMediaQuery(e,t){let i=null,s=Number.MAX_VALUE,n=null,r=Number.MIN_VALUE;const o=t.expressions();if(!o)return null;for(let e=0;e<o.length;++e){const t=o[e],a=t.feature();if(-1===a.indexOf("width"))continue;const d=t.computedLength();a.startsWith("max-")&&d&&d<s?(i=t,s=d):a.startsWith("min-")&&d&&d>r&&(n=t,r=d)}return r>s||!i&&!n?null:new MediaQueryUIModel(e,n,i,t.active())}equals(e){return 0===this.compareTo(e)}dimensionsEqual(e){const t=this.minWidthExpression(),i=e.minWidthExpression(),s=this.maxWidthExpression(),n=e.maxWidthExpression(),r=this.section()===e.section(),o=!t||t.computedLength()===i?.computedLength(),a=!s||s.computedLength()===n?.computedLength();return r&&o&&a}compareTo(e){if(this.section()!==e.section())return this.section()-e.section();if(this.dimensionsEqual(e)){const t=this.rawLocation(),i=e.rawLocation();return t||i?t&&!i?1:!t&&i?-1:this.active()!==e.active()?this.active()?-1:1:t&&i?Platform.StringUtilities.compare(t.url,i.url)||t.lineNumber-i.lineNumber||t.columnNumber-i.columnNumber:0:Platform.StringUtilities.compare(this.mediaText(),e.mediaText())}const t=this.maxWidthExpression(),i=e.maxWidthExpression(),s=t&&t.computedLength()||0,n=i&&i.computedLength()||0,r=this.minWidthExpression(),o=e.minWidthExpression(),a=r&&r.computedLength()||0,d=o&&o.computedLength()||0;return 0===this.section()?n-s:2===this.section()?a-d:a-d||n-s}section(){return this.sectionInternal}mediaText(){return this.cssMedia.text||""}rawLocation(){return this.rawLocationInternal||(this.rawLocationInternal=this.cssMedia.rawLocation()),this.rawLocationInternal}minWidthExpression(){return this.minWidthExpressionInternal}maxWidthExpression(){return this.maxWidthExpressionInternal}active(){return this.activeInternal}}