chrome-devtools-frontend 1.0.1512349 → 1.0.1513662
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/cookbook/release_management.md +15 -13
- package/docs/get_the_code.md +114 -35
- package/front_end/core/common/Color.ts +40 -44
- package/front_end/core/common/Console.ts +4 -4
- package/front_end/core/common/ParsedURL.ts +14 -14
- package/front_end/core/common/ResourceType.ts +20 -20
- package/front_end/core/common/SegmentedRange.ts +13 -14
- package/front_end/core/common/Settings.ts +4 -4
- package/front_end/core/common/StringOutputStream.ts +4 -4
- package/front_end/core/host/GdpClient.ts +38 -0
- package/front_end/core/host/InspectorFrontendHost.ts +4 -1
- package/front_end/core/host/InspectorFrontendHostAPI.ts +2 -0
- package/front_end/core/host/ResourceLoader.ts +2 -2
- package/front_end/core/host/UserMetrics.ts +0 -2
- package/front_end/core/protocol_client/InspectorBackend.ts +9 -9
- package/front_end/core/root/Runtime.ts +5 -2
- package/front_end/core/sdk/AccessibilityModel.ts +48 -48
- package/front_end/core/sdk/AnimationModel.ts +78 -79
- package/front_end/core/sdk/CPUProfilerModel.ts +5 -5
- package/front_end/core/sdk/CPUThrottlingManager.ts +17 -17
- package/front_end/core/sdk/CSSMatchedStyles.ts +44 -44
- package/front_end/core/sdk/CSSMedia.ts +22 -22
- package/front_end/core/sdk/CSSModel.ts +4 -4
- package/front_end/core/sdk/CSSProperty.ts +9 -9
- package/front_end/core/sdk/CSSPropertyParser.ts +1 -2
- package/front_end/core/sdk/CSSRule.ts +3 -3
- package/front_end/core/sdk/CSSStyleDeclaration.ts +27 -28
- package/front_end/core/sdk/CSSStyleSheetHeader.ts +13 -13
- package/front_end/core/sdk/CategorizedBreakpoint.ts +4 -4
- package/front_end/core/sdk/ChildTargetManager.ts +6 -6
- package/front_end/core/sdk/CompilerSourceMappingContentProvider.ts +4 -4
- package/front_end/core/sdk/ConsoleModel.ts +24 -24
- package/front_end/core/sdk/Cookie.ts +16 -16
- package/front_end/core/sdk/CookieParser.ts +6 -6
- package/front_end/core/sdk/DOMDebuggerModel.ts +88 -89
- package/front_end/core/sdk/DOMModel.ts +113 -113
- package/front_end/core/sdk/DebuggerModel.ts +102 -103
- package/front_end/core/sdk/EmulationModel.ts +6 -6
- package/front_end/core/sdk/EventBreakpointsModel.ts +5 -5
- package/front_end/core/sdk/HeapProfilerModel.ts +5 -5
- package/front_end/core/sdk/IsolateManager.ts +26 -26
- package/front_end/core/sdk/LayerTreeBase.ts +29 -30
- package/front_end/core/sdk/OverlayModel.ts +6 -6
- package/front_end/core/sdk/Resource.ts +43 -43
- package/front_end/core/sdk/ResourceTreeModel.ts +58 -61
- package/front_end/core/sdk/RuntimeModel.ts +12 -13
- package/front_end/core/sdk/SDKModel.ts +3 -3
- package/front_end/core/sdk/Script.ts +17 -17
- package/front_end/core/sdk/SecurityOriginManager.ts +14 -14
- package/front_end/core/sdk/ServerTiming.ts +2 -2
- package/front_end/core/sdk/ServiceWorkerCacheModel.ts +15 -15
- package/front_end/core/sdk/ServiceWorkerManager.ts +19 -24
- package/front_end/core/sdk/SourceMap.ts +10 -10
- package/front_end/core/sdk/StorageKeyManager.ts +12 -12
- package/front_end/core/sdk/Target.ts +33 -34
- package/front_end/core/sdk/TargetManager.ts +20 -20
- package/front_end/entrypoints/formatter_worker/AcornTokenizer.ts +8 -8
- package/front_end/entrypoints/formatter_worker/HTMLFormatter.ts +7 -7
- package/front_end/entrypoints/heap_snapshot_worker/AllocationProfile.ts +7 -7
- package/front_end/entrypoints/heap_snapshot_worker/HeapSnapshot.ts +24 -24
- package/front_end/entrypoints/main/GlobalAiButton.ts +3 -3
- package/front_end/entrypoints/main/MainImpl.ts +16 -14
- package/front_end/entrypoints/main/main-meta.ts +1 -2
- package/front_end/generated/InspectorBackendCommands.js +3 -2
- package/front_end/generated/SupportedCSSProperties.js +20 -0
- package/front_end/generated/protocol-mapping.d.ts +4 -0
- package/front_end/generated/protocol-proxy-api.d.ts +5 -0
- package/front_end/generated/protocol.ts +20 -0
- package/front_end/models/ai_assistance/agents/PerformanceAgent.ts +15 -16
- package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.snapshot.txt +127 -0
- package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts +149 -26
- package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt +6 -0
- package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts +9 -10
- package/front_end/models/badges/AiExplorerBadge.ts +21 -0
- package/front_end/models/badges/Badge.ts +3 -5
- package/front_end/models/badges/CodeWhispererBadge.ts +21 -0
- package/front_end/models/badges/DOMDetectiveBadge.ts +4 -3
- package/front_end/models/badges/SpeedsterBadge.ts +6 -4
- package/front_end/models/badges/StarterBadge.ts +4 -3
- package/front_end/models/badges/UserBadges.ts +29 -3
- package/front_end/models/bindings/CSSWorkspaceBinding.ts +6 -6
- package/front_end/models/bindings/DebuggerLanguagePlugins.ts +18 -18
- package/front_end/models/bindings/FileUtils.ts +15 -15
- package/front_end/models/bindings/ResourceScriptMapping.ts +14 -14
- package/front_end/models/elements/ElementUpdateRecord.ts +11 -11
- package/front_end/models/emulation/DeviceModeModel.ts +123 -131
- package/front_end/models/emulation/EmulatedDevices.ts +22 -22
- package/front_end/models/extensions/ExtensionPanel.ts +24 -24
- package/front_end/models/extensions/ExtensionServer.ts +4 -4
- package/front_end/models/javascript_metadata/NativeFunctions.js +14 -2
- package/front_end/models/persistence/IsolatedFileSystem.ts +18 -19
- package/front_end/models/persistence/IsolatedFileSystemManager.ts +13 -13
- package/front_end/models/trace/EventsSerializer.ts +5 -5
- package/front_end/models/trace/LanternComputationData.ts +10 -10
- package/front_end/models/trace/ModelImpl.ts +32 -41
- package/front_end/models/trace/Processor.ts +28 -30
- package/front_end/models/trace/extras/FilmStrip.ts +6 -6
- package/front_end/models/trace/extras/StackTraceForEvent.ts +22 -25
- package/front_end/models/trace/extras/ThirdParties.ts +16 -17
- package/front_end/models/trace/extras/TraceFilter.ts +1 -1
- package/front_end/models/trace/handlers/Threads.ts +10 -10
- package/front_end/models/trace/handlers/helpers.ts +9 -9
- package/front_end/models/trace/handlers/types.ts +3 -3
- package/front_end/models/trace/insights/CLSCulprits.ts +12 -14
- package/front_end/models/trace/insights/Cache.ts +8 -4
- package/front_end/models/trace/insights/DOMSize.ts +8 -5
- package/front_end/models/trace/insights/DocumentLatency.ts +2 -2
- package/front_end/models/trace/insights/DuplicatedJavaScript.ts +3 -3
- package/front_end/models/trace/insights/FontDisplay.ts +3 -4
- package/front_end/models/trace/insights/ForcedReflow.ts +3 -3
- package/front_end/models/trace/insights/INPBreakdown.ts +2 -2
- package/front_end/models/trace/insights/ImageDelivery.ts +11 -11
- package/front_end/models/trace/insights/LCPBreakdown.ts +4 -4
- package/front_end/models/trace/insights/LCPDiscovery.ts +4 -4
- package/front_end/models/trace/insights/LegacyJavaScript.ts +2 -2
- package/front_end/models/trace/insights/ModernHTTP.ts +4 -5
- package/front_end/models/trace/insights/NetworkDependencyTree.ts +12 -12
- package/front_end/models/trace/insights/RenderBlocking.ts +9 -10
- package/front_end/models/trace/insights/SlowCSSSelector.ts +2 -2
- package/front_end/models/trace/insights/ThirdParties.ts +4 -5
- package/front_end/models/trace/insights/Viewport.ts +8 -5
- package/front_end/models/trace/insights/types.ts +1 -0
- package/front_end/models/trace/lantern/testing/MetricTestUtils.ts +10 -10
- package/front_end/panels/accessibility/AXBreadcrumbsPane.ts +52 -52
- package/front_end/panels/accessibility/AccessibilitySidebarView.ts +8 -8
- package/front_end/panels/animation/AnimationTimeline.ts +5 -5
- package/front_end/panels/animation/AnimationUI.ts +22 -23
- package/front_end/panels/application/ApplicationPanelSidebar.ts +12 -12
- package/front_end/panels/application/DOMStorageModel.ts +23 -23
- package/front_end/panels/application/ExtensionStorageModel.ts +31 -31
- package/front_end/panels/application/IndexedDBModel.ts +1 -0
- package/front_end/panels/application/PreloadingTreeElement.ts +8 -8
- package/front_end/panels/application/ServiceWorkersView.ts +0 -53
- package/front_end/panels/application/preloading/components/PreloadingDisabledInfobar.ts +2 -2
- package/front_end/panels/application/preloading/components/UsedPreloadingView.ts +2 -2
- package/front_end/panels/common/BadgeNotification.ts +24 -4
- package/front_end/panels/common/GdpSignUpDialog.ts +5 -0
- package/front_end/panels/common/badgeNotification.css +26 -9
- package/front_end/panels/console/ConsoleContextSelector.ts +9 -9
- package/front_end/panels/console/ConsolePrompt.ts +8 -5
- package/front_end/panels/console/ConsoleView.ts +13 -13
- package/front_end/panels/console/ConsoleViewport.ts +29 -29
- package/front_end/panels/coverage/CoverageModel.ts +22 -22
- package/front_end/panels/elements/ClassesPaneWidget.ts +1 -1
- package/front_end/panels/elements/ComputedStyleModel.ts +17 -18
- package/front_end/panels/elements/DOMPath.ts +2 -2
- package/front_end/panels/elements/ElementsPanel.ts +13 -13
- package/front_end/panels/elements/ElementsTreeElement.ts +18 -18
- package/front_end/panels/elements/ElementsTreeOutline.ts +41 -48
- package/front_end/panels/elements/ShortcutTreeElement.ts +4 -4
- package/front_end/panels/elements/StylePropertiesSection.ts +4 -4
- package/front_end/panels/elements/StylePropertyTreeElement.ts +49 -50
- package/front_end/panels/elements/StylesSidebarPane.ts +19 -19
- package/front_end/panels/emulation/DeviceModeToolbar.ts +7 -7
- package/front_end/panels/emulation/DeviceModeView.ts +6 -6
- package/front_end/panels/emulation/MediaQueryInspector.ts +18 -18
- package/front_end/panels/event_listeners/EventListenersView.ts +13 -14
- package/front_end/panels/layer_viewer/LayerTreeOutline.ts +3 -3
- package/front_end/panels/layer_viewer/LayerViewHost.ts +13 -13
- package/front_end/panels/layer_viewer/PaintProfilerView.ts +9 -10
- package/front_end/panels/layer_viewer/TransformController.ts +34 -36
- package/front_end/panels/layers/LayerTreeModel.ts +41 -40
- package/front_end/panels/lighthouse/LighthouseReportSelector.ts +13 -13
- package/front_end/panels/lighthouse/LighthouseStartView.ts +7 -7
- package/front_end/panels/media/PlayerMessagesView.ts +5 -5
- package/front_end/panels/media/TickingFlameChart.ts +24 -24
- package/front_end/panels/media/TickingFlameChartHelpers.ts +32 -32
- package/front_end/panels/network/NetworkItemView.ts +4 -4
- package/front_end/panels/network/NetworkLogViewColumns.ts +29 -29
- package/front_end/panels/network/NetworkPanel.ts +8 -5
- package/front_end/panels/network/ResourceWebSocketFrameView.ts +10 -10
- package/front_end/panels/profiler/HeapDetachedElementsView.ts +3 -3
- package/front_end/panels/profiler/HeapProfileView.ts +1 -1
- package/front_end/panels/profiler/ProfileFlameChartDataProvider.ts +3 -4
- package/front_end/panels/profiler/ProfileHeader.ts +25 -25
- package/front_end/panels/profiler/ProfileLauncherView.ts +5 -6
- package/front_end/panels/recorder/components/ReplaySection.ts +3 -1
- package/front_end/panels/security/OriginTreeElement.ts +8 -8
- package/front_end/panels/security/SecurityPanel.ts +5 -5
- package/front_end/panels/settings/SettingsScreen.ts +18 -12
- package/front_end/panels/settings/components/SyncSection.ts +20 -6
- package/front_end/panels/sources/AiCodeCompletionPlugin.ts +3 -0
- package/front_end/panels/sources/DebuggerPausedMessage.ts +8 -9
- package/front_end/panels/sources/NavigatorView.ts +43 -46
- package/front_end/panels/sources/SourcesPanel.ts +35 -35
- package/front_end/panels/sources/SourcesView.ts +13 -13
- package/front_end/panels/sources/TabbedEditorContainer.ts +19 -22
- package/front_end/panels/sources/UISourceCodeFrame.ts +4 -4
- package/front_end/panels/sources/WatchExpressionsSidebarPane.ts +34 -36
- package/front_end/panels/timeline/AnimationsTrackAppender.ts +3 -3
- package/front_end/panels/timeline/CompatibilityTracksAppender.ts +8 -8
- package/front_end/panels/timeline/CountersGraph.ts +16 -16
- package/front_end/panels/timeline/EntriesFilter.ts +4 -3
- package/front_end/panels/timeline/EventsTimelineTreeView.ts +3 -3
- package/front_end/panels/timeline/GPUTrackAppender.ts +3 -3
- package/front_end/panels/timeline/Initiators.ts +10 -10
- package/front_end/panels/timeline/InteractionsTrackAppender.ts +5 -5
- package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts +7 -7
- package/front_end/panels/timeline/ModificationsManager.ts +8 -15
- package/front_end/panels/timeline/TargetForEvent.ts +2 -2
- package/front_end/panels/timeline/ThirdPartyTreeView.ts +1 -1
- package/front_end/panels/timeline/ThreadAppender.ts +13 -13
- package/front_end/panels/timeline/TimelineDetailsView.ts +6 -14
- package/front_end/panels/timeline/TimelineEventOverview.ts +27 -26
- package/front_end/panels/timeline/TimelineFilters.ts +5 -5
- package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts +54 -53
- package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts +34 -34
- package/front_end/panels/timeline/TimelineFlameChartView.ts +18 -31
- package/front_end/panels/timeline/TimelineHistoryManager.ts +17 -18
- package/front_end/panels/timeline/TimelineMiniMap.ts +6 -6
- package/front_end/panels/timeline/TimelinePaintProfilerView.ts +6 -6
- package/front_end/panels/timeline/TimelinePanel.ts +52 -59
- package/front_end/panels/timeline/TimelineSelectorStatsView.ts +7 -5
- package/front_end/panels/timeline/TimelineTreeView.ts +10 -10
- package/front_end/panels/timeline/TimelineUIUtils.ts +43 -43
- package/front_end/panels/timeline/TimingsTrackAppender.ts +12 -12
- package/front_end/panels/timeline/TracingLayerTree.ts +43 -43
- package/front_end/panels/timeline/TrackConfigBanner.ts +6 -6
- package/front_end/panels/timeline/TrackConfiguration.ts +1 -1
- package/front_end/panels/timeline/components/DetailsView.ts +4 -4
- package/front_end/panels/timeline/components/LayoutShiftDetails.ts +12 -21
- package/front_end/panels/timeline/components/LiveMetricsView.ts +2 -1
- package/front_end/panels/timeline/components/NetworkRequestDetails.ts +5 -5
- package/front_end/panels/timeline/components/Sidebar.ts +4 -14
- package/front_end/panels/timeline/components/SidebarInsightsTab.ts +13 -36
- package/front_end/panels/timeline/components/SidebarSingleInsightSet.ts +21 -19
- package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts +1 -1
- package/front_end/panels/timeline/components/insights/Cache.ts +4 -0
- package/front_end/panels/timeline/components/insights/DOMSize.ts +5 -1
- package/front_end/panels/timeline/components/insights/Helpers.ts +19 -0
- package/front_end/panels/timeline/components/insights/NetworkDependencyTree.ts +1 -1
- package/front_end/panels/timeline/components/insights/Viewport.ts +4 -0
- package/front_end/panels/timeline/overlays/OverlaysImpl.ts +1 -1
- package/front_end/panels/timeline/utils/AICallTree.ts +11 -11
- package/front_end/panels/timeline/utils/AIContext.ts +17 -19
- package/front_end/panels/timeline/utils/EntityMapper.ts +6 -5
- package/front_end/panels/timeline/utils/EntryName.ts +2 -2
- package/front_end/panels/timeline/utils/EntryNodes.ts +5 -5
- package/front_end/panels/timeline/utils/EntryStyles.ts +4 -4
- package/front_end/panels/timeline/utils/FreshRecording.ts +3 -3
- package/front_end/panels/timeline/utils/Helpers.ts +0 -18
- package/front_end/panels/timeline/utils/InsightAIContext.ts +6 -6
- package/front_end/panels/timeline/utils/SourceMapsResolver.ts +7 -7
- package/front_end/panels/webauthn/WebauthnPane.ts +1 -0
- package/front_end/third_party/chromium/README.chromium +1 -1
- package/front_end/third_party/codemirror.next/chunk/angular.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/angular.js.map +1 -1
- package/front_end/third_party/codemirror.next/chunk/codemirror.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/codemirror.js.map +1 -1
- package/front_end/third_party/codemirror.next/chunk/cpp.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/cpp.js.map +1 -1
- package/front_end/third_party/codemirror.next/chunk/java.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/java.js.map +1 -1
- package/front_end/third_party/codemirror.next/chunk/legacy.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/legacy.js.map +1 -1
- package/front_end/third_party/codemirror.next/chunk/less.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/less.js.map +1 -1
- package/front_end/third_party/codemirror.next/chunk/markdown.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/markdown.js.map +1 -1
- package/front_end/third_party/codemirror.next/chunk/php.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/php.js.map +1 -1
- package/front_end/third_party/codemirror.next/chunk/python.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/python.js.map +1 -1
- package/front_end/third_party/codemirror.next/chunk/sass.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/sass.js.map +1 -1
- package/front_end/third_party/codemirror.next/chunk/svelte.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/svelte.js.map +1 -1
- package/front_end/third_party/codemirror.next/chunk/vue.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/vue.js.map +1 -1
- package/front_end/third_party/codemirror.next/chunk/wast.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/wast.js.map +1 -1
- package/front_end/third_party/codemirror.next/chunk/xml.js +1 -1
- package/front_end/third_party/codemirror.next/chunk/xml.js.map +1 -1
- package/front_end/third_party/codemirror.next/codemirror.next.js +1 -1
- package/front_end/third_party/codemirror.next/package.json +1 -1
- package/front_end/third_party/codemirror.next/rebuild.sh +1 -1
- package/front_end/third_party/json5/rebuild.sh +1 -1
- package/front_end/third_party/legacy-javascript/{update.sh → rebuild.sh} +1 -1
- package/front_end/third_party/lit/lib/decorators.d.ts +26 -9
- package/front_end/third_party/lit/lib/decorators.js +5 -5
- package/front_end/third_party/lit/lib/decorators.js.map +1 -1
- package/front_end/third_party/lit/lib/directive.js.map +1 -1
- package/front_end/third_party/lit/lib/directives.js +8 -13
- package/front_end/third_party/lit/lib/directives.js.map +1 -1
- package/front_end/third_party/lit/lib/lit.d.ts +26 -9
- package/front_end/third_party/lit/lib/lit.js +5 -5
- package/front_end/third_party/lit/lib/lit.js.map +1 -1
- package/front_end/third_party/lit/lib/static-html.js +2 -2
- package/front_end/third_party/lit/lib/static-html.js.map +1 -1
- package/front_end/third_party/lit/rebuild.sh +1 -1
- package/front_end/third_party/third-party-web/rebuild.sh +1 -1
- package/front_end/ui/components/dialogs/Dialog.ts +6 -7
- package/front_end/ui/legacy/ActionRegistration.ts +9 -9
- package/front_end/ui/legacy/DockController.ts +18 -18
- package/front_end/ui/legacy/FilterBar.ts +7 -7
- package/front_end/ui/legacy/Fragment.ts +4 -4
- package/front_end/ui/legacy/GlassPane.ts +12 -12
- package/front_end/ui/legacy/InspectorView.ts +5 -15
- package/front_end/ui/legacy/ListControl.ts +27 -27
- package/front_end/ui/legacy/ListWidget.ts +4 -4
- package/front_end/ui/legacy/PopoverHelper.ts +4 -4
- package/front_end/ui/legacy/ShortcutRegistry.ts +17 -17
- package/front_end/ui/legacy/TabbedPane.ts +74 -75
- package/front_end/ui/legacy/TextPrompt.ts +31 -31
- package/front_end/ui/legacy/Toolbar.ts +13 -14
- package/front_end/ui/legacy/ViewManager.ts +30 -31
- package/front_end/ui/legacy/Widget.ts +6 -6
- package/front_end/ui/legacy/XLink.ts +9 -9
- package/front_end/ui/legacy/ZoomManager.ts +9 -9
- package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts +27 -27
- package/front_end/ui/legacy/components/color_picker/ContrastInfo.ts +30 -32
- package/front_end/ui/legacy/components/color_picker/Spectrum.ts +15 -15
- package/front_end/ui/legacy/components/data_grid/DataGrid.ts +64 -64
- package/front_end/ui/legacy/components/data_grid/ShowMoreDataGridNode.ts +2 -2
- package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts +10 -11
- package/front_end/ui/legacy/components/perf_ui/ChartViewport.ts +12 -12
- package/front_end/ui/legacy/components/perf_ui/FlameChart.ts +3 -3
- package/front_end/ui/legacy/components/perf_ui/TimelineGrid.ts +14 -14
- package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts +8 -8
- package/front_end/ui/legacy/components/quick_open/CommandMenu.ts +5 -5
- package/front_end/ui/legacy/components/source_frame/ResourceSourceFrame.ts +4 -4
- package/front_end/ui/legacy/theme_support/ThemeSupport.ts +4 -4
- package/front_end/ui/visual_logging/KnownContextValues.ts +2 -2
- package/package.json +1 -1
@@ -1880,11 +1880,11 @@ export function getPropertyRenderers(
|
|
1880
1880
|
|
1881
1881
|
export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
1882
1882
|
private readonly style: SDK.CSSStyleDeclaration.CSSStyleDeclaration;
|
1883
|
-
|
1883
|
+
#matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
|
1884
1884
|
property: SDK.CSSProperty.CSSProperty;
|
1885
|
-
|
1886
|
-
|
1887
|
-
|
1885
|
+
readonly #inherited: boolean;
|
1886
|
+
#overloaded: boolean;
|
1887
|
+
#parentPane: StylesSidebarPane;
|
1888
1888
|
#parentSection: StylePropertiesSection;
|
1889
1889
|
isShorthand: boolean;
|
1890
1890
|
private readonly applyStyleThrottler = new Common.Throttler.Throttler(0);
|
@@ -1911,12 +1911,12 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
1911
1911
|
const jslogContext = property.name.startsWith('--') ? 'custom-property' : property.name;
|
1912
1912
|
super('', isShorthand, jslogContext);
|
1913
1913
|
this.style = property.ownerStyle;
|
1914
|
-
this
|
1914
|
+
this.#matchedStyles = matchedStyles;
|
1915
1915
|
this.property = property;
|
1916
|
-
this
|
1917
|
-
this
|
1916
|
+
this.#inherited = inherited;
|
1917
|
+
this.#overloaded = overloaded;
|
1918
1918
|
this.selectable = false;
|
1919
|
-
this
|
1919
|
+
this.#parentPane = stylesPane;
|
1920
1920
|
this.#parentSection = section;
|
1921
1921
|
this.isShorthand = isShorthand;
|
1922
1922
|
this.newProperty = newProperty;
|
@@ -1933,8 +1933,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
1933
1933
|
if (!SDK.CSSMetadata.cssMetadata().isGridNameAwareProperty(this.name)) {
|
1934
1934
|
return new Set();
|
1935
1935
|
}
|
1936
|
-
for (let node = this.
|
1937
|
-
const style = await this.
|
1936
|
+
for (let node = this.#parentPane.node()?.parentNode; node; node = node?.parentNode) {
|
1937
|
+
const style = await this.#parentPane.cssModel()?.getComputedStyle(node.id);
|
1938
1938
|
const display = style?.get('display');
|
1939
1939
|
const isGrid = display === 'grid' || display === 'inline-grid';
|
1940
1940
|
if (!isGrid) {
|
@@ -1967,7 +1967,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
1967
1967
|
}
|
1968
1968
|
|
1969
1969
|
matchedStyles(): SDK.CSSMatchedStyles.CSSMatchedStyles {
|
1970
|
-
return this
|
1970
|
+
return this.#matchedStyles;
|
1971
1971
|
}
|
1972
1972
|
|
1973
1973
|
getLonghand(): StylePropertyTreeElement|null {
|
@@ -1980,18 +1980,18 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
1980
1980
|
}
|
1981
1981
|
|
1982
1982
|
inherited(): boolean {
|
1983
|
-
return this
|
1983
|
+
return this.#inherited;
|
1984
1984
|
}
|
1985
1985
|
|
1986
1986
|
overloaded(): boolean {
|
1987
|
-
return this
|
1987
|
+
return this.#overloaded;
|
1988
1988
|
}
|
1989
1989
|
|
1990
1990
|
setOverloaded(x: boolean): void {
|
1991
|
-
if (x === this
|
1991
|
+
if (x === this.#overloaded) {
|
1992
1992
|
return;
|
1993
1993
|
}
|
1994
|
-
this
|
1994
|
+
this.#overloaded = x;
|
1995
1995
|
this.updateState();
|
1996
1996
|
}
|
1997
1997
|
|
@@ -2020,7 +2020,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2020
2020
|
}
|
2021
2021
|
|
2022
2022
|
updateFilter(): boolean {
|
2023
|
-
const regex = this.
|
2023
|
+
const regex = this.#parentPane.filterRegex();
|
2024
2024
|
const matches = regex !== null && (regex.test(this.property.name) || regex.test(this.property.value));
|
2025
2025
|
this.listItemElement.classList.toggle('filter-match', matches);
|
2026
2026
|
|
@@ -2095,11 +2095,11 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2095
2095
|
}
|
2096
2096
|
|
2097
2097
|
node(): SDK.DOMModel.DOMNode|null {
|
2098
|
-
return this.
|
2098
|
+
return this.#parentPane.node();
|
2099
2099
|
}
|
2100
2100
|
|
2101
2101
|
parentPane(): StylesSidebarPane {
|
2102
|
-
return this
|
2102
|
+
return this.#parentPane;
|
2103
2103
|
}
|
2104
2104
|
|
2105
2105
|
section(): StylePropertiesSection {
|
@@ -2116,14 +2116,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2116
2116
|
return;
|
2117
2117
|
}
|
2118
2118
|
|
2119
|
-
this.
|
2119
|
+
this.#parentPane.setUserOperation(true);
|
2120
2120
|
const success = await this.property.setDisabled(disabled);
|
2121
|
-
this.
|
2121
|
+
this.#parentPane.setUserOperation(false);
|
2122
2122
|
|
2123
2123
|
if (!success) {
|
2124
2124
|
return;
|
2125
2125
|
}
|
2126
|
-
this.
|
2126
|
+
this.#matchedStyles.resetActiveProperties();
|
2127
2127
|
this.updatePane();
|
2128
2128
|
this.styleTextAppliedForTest();
|
2129
2129
|
}
|
@@ -2140,7 +2140,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2140
2140
|
return staticLonghandProperties;
|
2141
2141
|
}
|
2142
2142
|
|
2143
|
-
const parsedLonghands = await this.
|
2143
|
+
const parsedLonghands = await this.#parentPane.cssModel()?.agent.invoke_getLonghandProperties(
|
2144
2144
|
{shorthandName: this.property.name, value: parsedProperty});
|
2145
2145
|
if (!parsedLonghands || parsedLonghands.getError()) {
|
2146
2146
|
return staticLonghandProperties;
|
@@ -2173,7 +2173,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2173
2173
|
let overloaded = false;
|
2174
2174
|
|
2175
2175
|
inherited = this.#parentSection.isPropertyInherited(name);
|
2176
|
-
overloaded = this.
|
2176
|
+
overloaded = this.#matchedStyles.propertyState(property) === SDK.CSSMatchedStyles.PropertyState.OVERLOADED;
|
2177
2177
|
|
2178
2178
|
const leadingProperty = leadingProperties.find(property => property.name === name && property.activeInStyle());
|
2179
2179
|
if (leadingProperty) {
|
@@ -2181,9 +2181,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2181
2181
|
}
|
2182
2182
|
|
2183
2183
|
const item = new StylePropertyTreeElement({
|
2184
|
-
stylesPane: this
|
2184
|
+
stylesPane: this.#parentPane,
|
2185
2185
|
section: this.#parentSection,
|
2186
|
-
matchedStyles: this
|
2186
|
+
matchedStyles: this.#matchedStyles,
|
2187
2187
|
property,
|
2188
2188
|
isShorthand: false,
|
2189
2189
|
inherited,
|
@@ -2201,7 +2201,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2201
2201
|
|
2202
2202
|
this.listItemElement.addEventListener('mousedown', event => {
|
2203
2203
|
if (event.button === 0) {
|
2204
|
-
parentMap.set(this
|
2204
|
+
parentMap.set(this.#parentPane, this);
|
2205
2205
|
}
|
2206
2206
|
}, false);
|
2207
2207
|
this.listItemElement.addEventListener('mouseup', this.mouseUp.bind(this));
|
@@ -2248,9 +2248,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2248
2248
|
}
|
2249
2249
|
|
2250
2250
|
const matching: SDK.CSSPropertyParser.BottomUpTreeMatching = SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [
|
2251
|
-
new SDK.CSSPropertyParserMatchers.VariableMatcher(this
|
2252
|
-
new SDK.CSSPropertyParserMatchers.AttributeMatcher(this
|
2253
|
-
new SDK.CSSPropertyParserMatchers.EnvFunctionMatcher(this
|
2251
|
+
new SDK.CSSPropertyParserMatchers.VariableMatcher(this.#matchedStyles, style),
|
2252
|
+
new SDK.CSSPropertyParserMatchers.AttributeMatcher(this.#matchedStyles, style),
|
2253
|
+
new SDK.CSSPropertyParserMatchers.EnvFunctionMatcher(this.#matchedStyles),
|
2254
2254
|
]);
|
2255
2255
|
|
2256
2256
|
const decl = SDK.CSSPropertyParser.ASTUtils.siblings(SDK.CSSPropertyParser.ASTUtils.declValue(matching.ast.tree));
|
@@ -2282,8 +2282,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2282
2282
|
|
2283
2283
|
const renderers = this.property.parsedOk ?
|
2284
2284
|
getPropertyRenderers(
|
2285
|
-
this.name, this.style, this
|
2286
|
-
this.getComputedStyles() ?? new Map()) :
|
2285
|
+
this.name, this.style, this.#parentPane, this.#matchedStyles, this, this.getComputedStyles() ?? new Map()) :
|
2287
2286
|
[];
|
2288
2287
|
|
2289
2288
|
if (Root.Runtime.experiments.isEnabled('font-editor') && this.property.parsedOk) {
|
@@ -2306,9 +2305,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2306
2305
|
|
2307
2306
|
if (this.property.name.startsWith('--') &&
|
2308
2307
|
!(this.property.ownerStyle.parentRule instanceof SDK.CSSRule.CSSFunctionRule)) {
|
2309
|
-
const contents = this.
|
2308
|
+
const contents = this.#parentPane.getVariablePopoverContents(
|
2310
2309
|
this.matchedStyles(), this.property.name,
|
2311
|
-
this.
|
2310
|
+
this.#matchedStyles.computeCSSVariable(this.style, this.property.name)?.value ?? null);
|
2312
2311
|
const tooltipId = this.getTooltipId('custom-property-decl');
|
2313
2312
|
this.nameElement.setAttribute('aria-details', tooltipId);
|
2314
2313
|
const tooltip = new Tooltips.Tooltip.Tooltip(
|
@@ -2316,7 +2315,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2316
2315
|
tooltip.appendChild(contents);
|
2317
2316
|
tooltip.onbeforetoggle = (e: Event) => {
|
2318
2317
|
if ((e as ToggleEvent).newState === 'open') {
|
2319
|
-
contents.value = this.
|
2318
|
+
contents.value = this.#matchedStyles.computeCSSVariable(this.style, this.property.name)?.value;
|
2320
2319
|
}
|
2321
2320
|
};
|
2322
2321
|
this.listItemElement.appendChild(tooltip);
|
@@ -2339,7 +2338,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2339
2338
|
return;
|
2340
2339
|
}
|
2341
2340
|
|
2342
|
-
const cssProperty = this.
|
2341
|
+
const cssProperty = this.#parentPane.webCustomData?.findCssProperty(this.name);
|
2343
2342
|
if (!cssProperty) {
|
2344
2343
|
event.consume(true);
|
2345
2344
|
return;
|
@@ -2376,7 +2375,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2376
2375
|
// Add a separate exclamation mark IMG element with a tooltip.
|
2377
2376
|
this.listItemElement.insertBefore(
|
2378
2377
|
this.createExclamationMark(
|
2379
|
-
this.property, this.
|
2378
|
+
this.property, this.#parentPane.getVariableParserError(this.matchedStyles(), this.property.name)),
|
2380
2379
|
this.listItemElement.firstChild);
|
2381
2380
|
|
2382
2381
|
// When the property is valid but the property value is invalid,
|
@@ -2550,7 +2549,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2550
2549
|
return;
|
2551
2550
|
}
|
2552
2551
|
|
2553
|
-
const cssModel = this.
|
2552
|
+
const cssModel = this.#parentPane.cssModel();
|
2554
2553
|
const fontFaces = cssModel?.fontFaces() || [];
|
2555
2554
|
|
2556
2555
|
const localName = this.node()?.localName();
|
@@ -2580,8 +2579,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2580
2579
|
}
|
2581
2580
|
|
2582
2581
|
private mouseUp(event: MouseEvent): void {
|
2583
|
-
const activeTreeElement = parentMap.get(this
|
2584
|
-
parentMap.delete(this
|
2582
|
+
const activeTreeElement = parentMap.get(this.#parentPane);
|
2583
|
+
parentMap.delete(this.#parentPane);
|
2585
2584
|
if (!activeTreeElement) {
|
2586
2585
|
return;
|
2587
2586
|
}
|
@@ -2630,7 +2629,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2630
2629
|
private handleContextMenuEvent(context: Context, event: Event): void {
|
2631
2630
|
const contextMenu = new UI.ContextMenu.ContextMenu(event);
|
2632
2631
|
if (this.property.parsedOk && this.parent?.root) {
|
2633
|
-
const sectionIndex = this.
|
2632
|
+
const sectionIndex = this.#parentPane.focusedSectionIndex();
|
2634
2633
|
contextMenu.defaultSection().appendCheckboxItem(
|
2635
2634
|
i18nString(UIStrings.togglePropertyAndContinueEditing), async () => {
|
2636
2635
|
if (this.treeOutline) {
|
@@ -2639,7 +2638,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2639
2638
|
this.editingCancelled(context);
|
2640
2639
|
await this.toggleDisabled(!this.property.disabled);
|
2641
2640
|
event.consume();
|
2642
|
-
this.
|
2641
|
+
this.#parentPane.continueEditingElement(sectionIndex, propertyIndex);
|
2643
2642
|
}
|
2644
2643
|
}, {checked: !this.property.disabled, jslogContext: 'toggle-property-and-continue-editing'});
|
2645
2644
|
}
|
@@ -2854,7 +2853,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2854
2853
|
|
2855
2854
|
this.originalPropertyText = this.property.propertyText || '';
|
2856
2855
|
|
2857
|
-
this.
|
2856
|
+
this.#parentPane.setEditingStyle(true);
|
2858
2857
|
selectedElement.parentElement?.scrollIntoViewIfNeeded(false);
|
2859
2858
|
|
2860
2859
|
this.prompt = new CSSPropertyPrompt(this, context.isEditingName, Array.from(this.#gridNames ?? []));
|
@@ -2997,7 +2996,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
2997
2996
|
}
|
2998
2997
|
|
2999
2998
|
private async applyFreeFlowStyleTextEdit(context: Context): Promise<void> {
|
3000
|
-
if (!this.prompt || !this.
|
2999
|
+
if (!this.prompt || !this.#parentPane.node()) {
|
3001
3000
|
return;
|
3002
3001
|
}
|
3003
3002
|
|
@@ -3012,7 +3011,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
3012
3011
|
return;
|
3013
3012
|
}
|
3014
3013
|
// Prevent destructive side-effects during live-edit. crbug.com/433889
|
3015
|
-
const parentNode = this.
|
3014
|
+
const parentNode = this.#parentPane.node();
|
3016
3015
|
if (parentNode) {
|
3017
3016
|
const isPseudo = Boolean(parentNode.pseudoType());
|
3018
3017
|
if (isPseudo) {
|
@@ -3053,7 +3052,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
3053
3052
|
editedElement.parentElement.classList.remove('child-editing');
|
3054
3053
|
}
|
3055
3054
|
|
3056
|
-
this.
|
3055
|
+
this.#parentPane.setEditingStyle(false);
|
3057
3056
|
}
|
3058
3057
|
|
3059
3058
|
editingCancelled(context: Context): void {
|
@@ -3165,7 +3164,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
3165
3164
|
this: StylePropertyTreeElement, alreadyNew: boolean, valueChanged: boolean,
|
3166
3165
|
section: StylePropertiesSection): void {
|
3167
3166
|
if (!moveDirection) {
|
3168
|
-
this.
|
3167
|
+
this.#parentPane.resetFocus();
|
3169
3168
|
return;
|
3170
3169
|
}
|
3171
3170
|
|
@@ -3279,8 +3278,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
3279
3278
|
return;
|
3280
3279
|
}
|
3281
3280
|
|
3282
|
-
const currentNode = this.
|
3283
|
-
this.
|
3281
|
+
const currentNode = this.#parentPane.node();
|
3282
|
+
this.#parentPane.setUserOperation(true);
|
3284
3283
|
|
3285
3284
|
styleText += Platform.StringUtilities.findUnclosedCssQuote(styleText);
|
3286
3285
|
styleText += ')'.repeat(Platform.StringUtilities.countUnmatchedLeftParentheses(styleText));
|
@@ -3302,7 +3301,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
3302
3301
|
majorChange = false;
|
3303
3302
|
success = await this.property.setText(this.originalPropertyText, majorChange, overwriteProperty);
|
3304
3303
|
}
|
3305
|
-
this.
|
3304
|
+
this.#parentPane.setUserOperation(false);
|
3306
3305
|
|
3307
3306
|
// TODO: using this.property.index to access its containing StyleDeclaration's property will result in
|
3308
3307
|
// off-by-1 errors when the containing StyleDeclaration's respective property has already been deleted.
|
@@ -3322,7 +3321,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
|
|
3322
3321
|
return;
|
3323
3322
|
}
|
3324
3323
|
|
3325
|
-
this.
|
3324
|
+
this.#matchedStyles.resetActiveProperties();
|
3326
3325
|
this.hasBeenEditedIncrementally = true;
|
3327
3326
|
|
3328
3327
|
// null check for updatedProperty before setting this.property as the code never expects this.property to be undefined or null.
|
@@ -172,7 +172,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
|
|
172
172
|
private noMatchesElement: HTMLElement;
|
173
173
|
private sectionsContainer: UI.Widget.Widget;
|
174
174
|
sectionByElement = new WeakMap<Node, StylePropertiesSection>();
|
175
|
-
|
175
|
+
readonly #swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
|
176
176
|
readonly linkifier = new Components.Linkifier.Linkifier(MAX_LINK_LENGTH, /* useLinkDecorator */ true);
|
177
177
|
|
178
178
|
private readonly decorator: StylePropertyHighlighter;
|
@@ -180,7 +180,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
|
|
180
180
|
private lastRevealedProperty: SDK.CSSProperty.CSSProperty|null = null;
|
181
181
|
private userOperation = false;
|
182
182
|
isEditingStyle = false;
|
183
|
-
|
183
|
+
#filterRegex: RegExp|null = null;
|
184
184
|
private isActivePropertyHighlighted = false;
|
185
185
|
private initialUpdateCompleted = false;
|
186
186
|
hasMatchedStyles = false;
|
@@ -218,7 +218,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
|
|
218
218
|
this.sectionsContainer.contentElement.addEventListener(
|
219
219
|
'focusout', this.sectionsContainerFocusChanged.bind(this), false);
|
220
220
|
|
221
|
-
this.
|
221
|
+
this.#swatchPopoverHelper.addEventListener(
|
222
222
|
InlineEditor.SwatchPopoverHelper.Events.WILL_SHOW_POPOVER, this.hideAllPopovers, this);
|
223
223
|
this.decorator = new StylePropertyHighlighter(this);
|
224
224
|
this.contentElement.classList.add('styles-pane');
|
@@ -250,7 +250,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
|
|
250
250
|
}
|
251
251
|
|
252
252
|
swatchPopoverHelper(): InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper {
|
253
|
-
return this
|
253
|
+
return this.#swatchPopoverHelper;
|
254
254
|
}
|
255
255
|
|
256
256
|
setUserOperation(userOperation: boolean): void {
|
@@ -356,7 +356,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
|
|
356
356
|
|
357
357
|
forceUpdate(): void {
|
358
358
|
this.needsForceUpdate = true;
|
359
|
-
this.
|
359
|
+
this.#swatchPopoverHelper.hide();
|
360
360
|
this.#updateAbortController?.abort();
|
361
361
|
this.resetCache();
|
362
362
|
this.update();
|
@@ -398,7 +398,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
|
|
398
398
|
}
|
399
399
|
}
|
400
400
|
|
401
|
-
if (sectionToFocus && this
|
401
|
+
if (sectionToFocus && this.#filterRegex) {
|
402
402
|
sectionToFocus = sectionToFocus.findCurrentOrNextVisible(/* willIterateForward= */ willIterateForward);
|
403
403
|
}
|
404
404
|
if (sectionToFocus) {
|
@@ -476,7 +476,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
|
|
476
476
|
private onFilterChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
|
477
477
|
const regex = event.data ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.data), 'i') : null;
|
478
478
|
this.lastFilterChange = Date.now();
|
479
|
-
this
|
479
|
+
this.#filterRegex = regex;
|
480
480
|
this.updateFilter();
|
481
481
|
this.resetFocus();
|
482
482
|
setTimeout(() => {
|
@@ -516,7 +516,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
|
|
516
516
|
section.update(section === editedSection);
|
517
517
|
}
|
518
518
|
|
519
|
-
if (this
|
519
|
+
if (this.#filterRegex) {
|
520
520
|
this.updateFilter();
|
521
521
|
}
|
522
522
|
this.swatchPopoverHelper().reposition();
|
@@ -984,7 +984,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
|
|
984
984
|
|
985
985
|
this.sectionsContainerFocusChanged();
|
986
986
|
|
987
|
-
if (this
|
987
|
+
if (this.#filterRegex) {
|
988
988
|
this.updateFilter();
|
989
989
|
} else {
|
990
990
|
this.noMatchesElement.classList.toggle('hidden', this.sectionBlocks.length > 0);
|
@@ -1284,7 +1284,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
|
|
1284
1284
|
}
|
1285
1285
|
|
1286
1286
|
filterRegex(): RegExp|null {
|
1287
|
-
return this
|
1287
|
+
return this.#filterRegex;
|
1288
1288
|
}
|
1289
1289
|
|
1290
1290
|
private updateFilter(): void {
|
@@ -1311,7 +1311,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
|
|
1311
1311
|
}
|
1312
1312
|
|
1313
1313
|
hideAllPopovers(): void {
|
1314
|
-
this.
|
1314
|
+
this.#swatchPopoverHelper.hide();
|
1315
1315
|
this.imagePreviewPopover.hide();
|
1316
1316
|
if (this.activeCSSAngle) {
|
1317
1317
|
this.activeCSSAngle.minify();
|
@@ -1492,12 +1492,12 @@ export interface EventTypes {
|
|
1492
1492
|
const MAX_LINK_LENGTH = 23;
|
1493
1493
|
|
1494
1494
|
export class SectionBlock {
|
1495
|
-
|
1495
|
+
readonly #titleElement: Element|null;
|
1496
1496
|
sections: StylePropertiesSection[];
|
1497
1497
|
#expanded = false;
|
1498
1498
|
#icon: IconButton.Icon.Icon|undefined;
|
1499
1499
|
constructor(titleElement: Element|null, expandable?: boolean, expandedByDefault?: boolean) {
|
1500
|
-
this
|
1500
|
+
this.#titleElement = titleElement;
|
1501
1501
|
this.sections = [];
|
1502
1502
|
this.#expanded = expandedByDefault ?? false;
|
1503
1503
|
|
@@ -1514,12 +1514,12 @@ export class SectionBlock {
|
|
1514
1514
|
}
|
1515
1515
|
|
1516
1516
|
expand(expand: boolean): void {
|
1517
|
-
if (!this
|
1517
|
+
if (!this.#titleElement || !this.#icon) {
|
1518
1518
|
return;
|
1519
1519
|
}
|
1520
|
-
this.
|
1520
|
+
this.#titleElement.classList.toggle('empty-section', !expand);
|
1521
1521
|
this.#icon.name = expand ? 'triangle-down' : 'triangle-right';
|
1522
|
-
UI.ARIAUtils.setExpanded(this
|
1522
|
+
UI.ARIAUtils.setExpanded(this.#titleElement, expand);
|
1523
1523
|
this.#expanded = expand;
|
1524
1524
|
this.sections.forEach(section => section.element.classList.toggle('hidden', !expand));
|
1525
1525
|
}
|
@@ -1631,14 +1631,14 @@ export class SectionBlock {
|
|
1631
1631
|
numVisibleSections += section.updateFilter() ? 1 : 0;
|
1632
1632
|
hasAnyVisibleSection = section.updateFilter() || hasAnyVisibleSection;
|
1633
1633
|
}
|
1634
|
-
if (this
|
1635
|
-
this.
|
1634
|
+
if (this.#titleElement) {
|
1635
|
+
this.#titleElement.classList.toggle('hidden', !hasAnyVisibleSection);
|
1636
1636
|
}
|
1637
1637
|
return numVisibleSections;
|
1638
1638
|
}
|
1639
1639
|
|
1640
1640
|
titleElement(): Element|null {
|
1641
|
-
return this
|
1641
|
+
return this.#titleElement;
|
1642
1642
|
}
|
1643
1643
|
}
|
1644
1644
|
|
@@ -197,7 +197,7 @@ export class DeviceModeToolbar {
|
|
197
197
|
private readonly showUserAgentTypeSetting: Common.Settings.Setting<boolean>;
|
198
198
|
private autoAdjustScaleSetting: Common.Settings.Setting<boolean>;
|
199
199
|
private readonly lastMode: Map<EmulationModel.EmulatedDevices.EmulatedDevice, EmulationModel.EmulatedDevices.Mode>;
|
200
|
-
|
200
|
+
readonly #element: HTMLDivElement;
|
201
201
|
private readonly emulatedDevicesList: EmulationModel.EmulatedDevices.EmulatedDevicesList;
|
202
202
|
private readonly persistenceSetting: Common.Settings.Setting<{device: string, orientation: string, mode: string}>;
|
203
203
|
private spanButton!: UI.Toolbar.ToolbarButton;
|
@@ -240,11 +240,11 @@ export class DeviceModeToolbar {
|
|
240
240
|
|
241
241
|
this.lastMode = new Map();
|
242
242
|
|
243
|
-
this
|
244
|
-
this.
|
245
|
-
this.
|
243
|
+
this.#element = document.createElement('div');
|
244
|
+
this.#element.classList.add('device-mode-toolbar');
|
245
|
+
this.#element.setAttribute('jslog', `${VisualLogging.toolbar('device-mode').track({resize: true})}`);
|
246
246
|
|
247
|
-
const mainToolbar = this.
|
247
|
+
const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
|
248
248
|
this.appendDeviceSelectMenu(mainToolbar);
|
249
249
|
|
250
250
|
this.widthInput = new EmulationComponents.DeviceSizeInputElement.SizeInputElement(
|
@@ -269,7 +269,7 @@ export class DeviceModeToolbar {
|
|
269
269
|
|
270
270
|
this.appendDisplaySettings(mainToolbar);
|
271
271
|
this.appendDevicePositionItems(mainToolbar);
|
272
|
-
const optionsToolbar = this.
|
272
|
+
const optionsToolbar = this.#element.createChild('devtools-toolbar', 'device-mode-toolbar-options');
|
273
273
|
optionsToolbar.wrappable = true;
|
274
274
|
this.fillOptionsToolbar(optionsToolbar);
|
275
275
|
|
@@ -711,7 +711,7 @@ export class DeviceModeToolbar {
|
|
711
711
|
}
|
712
712
|
|
713
713
|
element(): Element {
|
714
|
-
return this
|
714
|
+
return this.#element;
|
715
715
|
}
|
716
716
|
|
717
717
|
update(): void {
|
@@ -566,7 +566,7 @@ export class DeviceModeView extends UI.Widget.VBox {
|
|
566
566
|
}
|
567
567
|
|
568
568
|
export class Ruler extends UI.Widget.VBox {
|
569
|
-
|
569
|
+
#contentElement: HTMLElement;
|
570
570
|
private readonly horizontal: boolean;
|
571
571
|
private scale: number;
|
572
572
|
private count: number;
|
@@ -577,7 +577,7 @@ export class Ruler extends UI.Widget.VBox {
|
|
577
577
|
constructor(horizontal: boolean, applyCallback: (arg0: number) => void) {
|
578
578
|
super({jslog: `${VisualLogging.deviceModeRuler().track({click: true})}`});
|
579
579
|
this.element.classList.add('device-mode-ruler');
|
580
|
-
this
|
580
|
+
this.#contentElement =
|
581
581
|
this.element.createChild('div', 'device-mode-ruler-content').createChild('div', 'device-mode-ruler-inner');
|
582
582
|
this.horizontal = horizontal;
|
583
583
|
this.scale = 1;
|
@@ -597,10 +597,10 @@ export class Ruler extends UI.Widget.VBox {
|
|
597
597
|
|
598
598
|
update(): void {
|
599
599
|
const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
|
600
|
-
const size = this.horizontal ? this.
|
600
|
+
const size = this.horizontal ? this.#contentElement.offsetWidth : this.#contentElement.offsetHeight;
|
601
601
|
|
602
602
|
if (this.scale !== this.renderedScale || zoomFactor !== this.renderedZoomFactor) {
|
603
|
-
this.
|
603
|
+
this.#contentElement.removeChildren();
|
604
604
|
this.count = 0;
|
605
605
|
this.renderedScale = this.scale;
|
606
606
|
this.renderedZoomFactor = zoomFactor;
|
@@ -627,7 +627,7 @@ export class Ruler extends UI.Widget.VBox {
|
|
627
627
|
|
628
628
|
for (let i = count; i < this.count; i++) {
|
629
629
|
if (!(i % step)) {
|
630
|
-
const lastChild = this.
|
630
|
+
const lastChild = this.#contentElement.lastChild;
|
631
631
|
if (lastChild) {
|
632
632
|
lastChild.remove();
|
633
633
|
}
|
@@ -638,7 +638,7 @@ export class Ruler extends UI.Widget.VBox {
|
|
638
638
|
if (i % step) {
|
639
639
|
continue;
|
640
640
|
}
|
641
|
-
const marker = this.
|
641
|
+
const marker = this.#contentElement.createChild('div', 'device-mode-ruler-marker');
|
642
642
|
if (i) {
|
643
643
|
if (this.horizontal) {
|
644
644
|
marker.style.left = (5 * i) * this.scale / zoomFactor + 'px';
|
@@ -355,24 +355,24 @@ export const enum Section {
|
|
355
355
|
|
356
356
|
export class MediaQueryUIModel {
|
357
357
|
private cssMedia: SDK.CSSMedia.CSSMedia;
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
358
|
+
readonly #minWidthExpression: SDK.CSSMedia.CSSMediaQueryExpression|null;
|
359
|
+
readonly #maxWidthExpression: SDK.CSSMedia.CSSMediaQueryExpression|null;
|
360
|
+
readonly #active: boolean;
|
361
|
+
readonly #section: Section;
|
362
|
+
#rawLocation?: SDK.CSSModel.CSSLocation|null;
|
363
363
|
constructor(
|
364
364
|
cssMedia: SDK.CSSMedia.CSSMedia, minWidthExpression: SDK.CSSMedia.CSSMediaQueryExpression|null,
|
365
365
|
maxWidthExpression: SDK.CSSMedia.CSSMediaQueryExpression|null, active: boolean) {
|
366
366
|
this.cssMedia = cssMedia;
|
367
|
-
this
|
368
|
-
this
|
369
|
-
this
|
367
|
+
this.#minWidthExpression = minWidthExpression;
|
368
|
+
this.#maxWidthExpression = maxWidthExpression;
|
369
|
+
this.#active = active;
|
370
370
|
if (maxWidthExpression && !minWidthExpression) {
|
371
|
-
this
|
371
|
+
this.#section = Section.MAX;
|
372
372
|
} else if (minWidthExpression && maxWidthExpression) {
|
373
|
-
this
|
373
|
+
this.#section = Section.MIN_MAX;
|
374
374
|
} else {
|
375
|
-
this
|
375
|
+
this.#section = Section.MIN;
|
376
376
|
}
|
377
377
|
}
|
378
378
|
|
@@ -480,7 +480,7 @@ export class MediaQueryUIModel {
|
|
480
480
|
}
|
481
481
|
|
482
482
|
section(): Section {
|
483
|
-
return this
|
483
|
+
return this.#section;
|
484
484
|
}
|
485
485
|
|
486
486
|
mediaText(): string {
|
@@ -488,21 +488,21 @@ export class MediaQueryUIModel {
|
|
488
488
|
}
|
489
489
|
|
490
490
|
rawLocation(): SDK.CSSModel.CSSLocation|null {
|
491
|
-
if (!this
|
492
|
-
this
|
491
|
+
if (!this.#rawLocation) {
|
492
|
+
this.#rawLocation = this.cssMedia.rawLocation();
|
493
493
|
}
|
494
|
-
return this
|
494
|
+
return this.#rawLocation;
|
495
495
|
}
|
496
496
|
|
497
497
|
minWidthExpression(): SDK.CSSMedia.CSSMediaQueryExpression|null {
|
498
|
-
return this
|
498
|
+
return this.#minWidthExpression;
|
499
499
|
}
|
500
500
|
|
501
501
|
maxWidthExpression(): SDK.CSSMedia.CSSMediaQueryExpression|null {
|
502
|
-
return this
|
502
|
+
return this.#maxWidthExpression;
|
503
503
|
}
|
504
504
|
|
505
505
|
active(): boolean {
|
506
|
-
return this
|
506
|
+
return this.#active;
|
507
507
|
}
|
508
508
|
}
|