-
-
Notifications
You must be signed in to change notification settings - Fork 129
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c3ec0bc
commit d1e3a00
Showing
23 changed files
with
581 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
107 changes: 107 additions & 0 deletions
107
packages/client/src/components/timeline/TimelineLayers.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| <script setup lang="ts"> | ||
| import { rpc, useDevToolsState } from '@vue/devtools-core' | ||
| import { useDevToolsColorMode, vTooltip, VueIcIcon } from '@vue/devtools-ui' | ||
| import { defineModel } from 'vue' | ||
| defineProps<{ data: { | ||
| id: string | ||
| label: string | ||
| }[] }>() | ||
| const emit = defineEmits(['select', 'clear']) | ||
| const devtoolsState = useDevToolsState() | ||
| const recordingState = computed(() => devtoolsState.timelineLayersState.value.recordingState) | ||
| const timelineLayersState = computed(() => devtoolsState.timelineLayersState.value) | ||
| const recordingTooltip = computed(() => recordingState.value ? 'Stop recording' : 'Start recording') | ||
| const { colorMode } = useDevToolsColorMode() | ||
| const isDark = computed(() => colorMode.value === 'dark') | ||
| const selected = defineModel() | ||
| function select(id: string) { | ||
| selected.value = id | ||
| emit('select', id) | ||
| rpc.value.updateTimelineLayersState({ | ||
| selected: id, | ||
| }) | ||
| } | ||
| watch(() => timelineLayersState.value.selected, (state: string) => { | ||
| selected.value = state | ||
| }, { | ||
| immediate: true, | ||
| }) | ||
| function getTimelineLayerEnabled(id: string) { | ||
| return { | ||
| 'mouse': timelineLayersState.value.mouseEventEnabled, | ||
| 'keyboard': timelineLayersState.value.keyboardEventEnabled, | ||
| 'component-event': timelineLayersState.value.componentEventEnabled, | ||
| 'performance': timelineLayersState.value.performanceEventEnabled, | ||
| }[id] | ||
| } | ||
| function toggleRecordingState() { | ||
| rpc.value.updateTimelineLayersState({ | ||
| recordingState: !recordingState.value, | ||
| }) | ||
| } | ||
| function toggleTimelineLayerEnabled(id: string) { | ||
| const normalizedId = { | ||
| 'mouse': 'mouseEventEnabled', | ||
| 'keyboard': 'keyboardEventEnabled', | ||
| 'component-event': 'componentEventEnabled', | ||
| 'performance': 'performanceEventEnabled', | ||
| }[id] | ||
| rpc.value.updateTimelineLayersState({ | ||
| [normalizedId]: !getTimelineLayerEnabled(id), | ||
| }) | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div h-full flex flex-col p2> | ||
| <div class="mb-1 flex justify-end pb-1" border="b dashed base"> | ||
| <div class="flex items-center gap-2 px-1"> | ||
| <div v-tooltip.bottom-end="{ content: recordingTooltip }" class="flex items-center gap1" @click="toggleRecordingState"> | ||
| <span v-if="recordingState" class="recording recording-btn bg-[#ef4444]" /> | ||
| <span v-else class="recording-btn bg-black op70 dark:(bg-white) hover:op100" /> | ||
| </div> | ||
| <div v-tooltip.bottom-end="{ content: 'Clear all timelines' }" class="flex items-center gap1" @click="emit('clear')"> | ||
| <VueIcIcon name="baseline-delete" cursor-pointer text-xl op70 hover:op100 /> | ||
| </div> | ||
| <div v-tooltip.bottom-end="{ content: '<p style=\'width: 285px\'>Timeline events can cause significant performance overhead in large applications, so we recommend enabling it only when needed and on-demand. </p>', html: true }" class="flex items-center gap1"> | ||
| <VueIcIcon name="baseline-tips-and-updates" cursor-pointer text-xl op70 hover:op100 /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <ul class="p2"> | ||
| <li | ||
| v-for="item in data" :key="item.id" | ||
| class="group relative selectable-item" | ||
| :class="{ active: item.id === selected }" | ||
| @click="select(item.id)" | ||
| > | ||
| {{ item.label }} | ||
| <span class="absolute right-2 rounded-1 bg-primary-500 px1 text-3 text-white op0 [.active_&]:(bg-primary-400 dark:bg-gray-600) group-hover:op80 hover:op100!" @click.stop="toggleTimelineLayerEnabled(item.id)"> | ||
| {{ getTimelineLayerEnabled(item.id) ? 'Disabled' : 'Enabled' }} | ||
| </span> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| @keyframes pulse { | ||
| 50% { | ||
| opacity: 0.5; | ||
| } | ||
| } | ||
| .recording-btn { | ||
| --at-apply: w-3.5 h-3.5 inline-flex cursor-pointer rounded-50%; | ||
| } | ||
| .recording { | ||
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | ||
| transition-duration: 1s; | ||
| box-shadow: #ef4444 0 0 8px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| <script setup lang="ts"> | ||
| import { SelectiveList, Timeline } from '@vue/devtools-applet' | ||
| import { | ||
| rpc, | ||
| useDevToolsState, | ||
| } from '@vue/devtools-core' | ||
| import { Pane, Splitpanes } from 'splitpanes' | ||
| const timelineRef = ref() | ||
| // responsive layout | ||
| const splitpanesRef = ref<HTMLDivElement>() | ||
| const splitpanesReady = ref(false) | ||
| const { width: splitpanesWidth } = useElementSize(splitpanesRef) | ||
| // prevent `Splitpanes` layout from being changed before it ready | ||
| const horizontal = computed(() => splitpanesReady.value ? splitpanesWidth.value < 700 : false) | ||
| // #region toggle app | ||
| const devtoolsState = useDevToolsState() | ||
| const appRecords = computed(() => devtoolsState.appRecords.value.map(app => ({ | ||
| label: app.name + (app.version ? ` (${app.version})` : ''), | ||
| value: app.id, | ||
| }))) | ||
| const normalizedAppRecords = computed(() => appRecords.value.map(app => ({ | ||
| label: app.label, | ||
| id: app.value, | ||
| }))) | ||
| const activeAppRecordId = ref(devtoolsState.activeAppRecordId.value) | ||
| watchEffect(() => { | ||
| activeAppRecordId.value = devtoolsState.activeAppRecordId.value | ||
| }) | ||
| function toggleApp(id: string) { | ||
| rpc.value.toggleApp(id).then(() => { | ||
| clearTimelineEvents() | ||
| }) | ||
| } | ||
| // #endregion | ||
| const activeTimelineLayer = ref('') | ||
| const timelineLayers = [ | ||
| { | ||
| label: 'Mouse', | ||
| id: 'mouse', | ||
| }, | ||
| { | ||
| label: 'Keyboard', | ||
| id: 'keyboard', | ||
| }, | ||
| { | ||
| label: 'Component events', | ||
| id: 'component-event', | ||
| }, | ||
| { | ||
| label: 'Performance', | ||
| id: 'performance', | ||
| }, | ||
| ] | ||
| function clearTimelineEvents() { | ||
| timelineRef.value?.clear() | ||
| } | ||
| function toggleTimelineLayer() { | ||
| clearTimelineEvents() | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="h-full w-full"> | ||
| <Splitpanes ref="splitpanesRef" class="flex-1 overflow-auto" :horizontal="horizontal" @ready="splitpanesReady = true"> | ||
| <Pane v-if="appRecords.length > 1" border="base h-full" size="20"> | ||
| <div class="no-scrollbar h-full flex select-none gap-2 overflow-scroll"> | ||
| <SelectiveList v-model="activeAppRecordId" :data="normalizedAppRecords" class="w-full" @select="toggleApp" /> | ||
| </div> | ||
| </Pane> | ||
| <Pane border="base" h-full> | ||
| <div class="h-full flex flex-col"> | ||
| <div class="no-scrollbar h-full flex select-none gap-2 overflow-scroll"> | ||
| <TimelineLayers v-model="activeTimelineLayer" :data="timelineLayers" class="w-full" @select="toggleTimelineLayer" @clear="clearTimelineEvents" /> | ||
| </div> | ||
| </div> | ||
| </Pane> | ||
| <Pane relative h-full size="65"> | ||
| <div class="h-full flex flex-col p2"> | ||
| <Timeline ref="timelineRef" :layer-ids="[activeTimelineLayer]" :header-visible="false" doc-link="" /> | ||
| </div> | ||
| </Pane> | ||
| </Splitpanes> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.