Merge "ui: TabsV2 panel starts closed" into main
diff --git a/ui/src/frontend/details_panel.ts b/ui/src/frontend/details_panel.ts
index 3edce5d..3aabbf1 100644
--- a/ui/src/frontend/details_panel.ts
+++ b/ui/src/frontend/details_panel.ts
@@ -26,8 +26,7 @@
import {ChromeSliceDetailsTab} from './chrome_slice_details_tab';
import {CounterDetailsPanel} from './counter_panel';
import {CpuProfileDetailsPanel} from './cpu_profile_panel';
-import {DEFAULT_DETAILS_CONTENT_HEIGHT} from './css_constants';
-import {DragHandle} from './drag_handle';
+import {DragHandle, getDefaultDetailsHeight} from './drag_handle';
import {FlamegraphDetailsPanel} from './flamegraph_panel';
import {
FlowEventsAreaSelectedPanel,
@@ -41,16 +40,8 @@
import {SliceDetailsPanel} from './slice_details_panel';
import {ThreadStateTab} from './thread_state_tab';
-const DRAG_HANDLE_HEIGHT_PX = 28;
-
export const CURRENT_SELECTION_TAG = 'current_selection';
-function getDetailsHeight() {
- // This needs to be a function instead of a const to ensure the CSS constants
- // have been initialized by the time we perform this calculation;
- return DEFAULT_DETAILS_CONTENT_HEIGHT + DRAG_HANDLE_HEIGHT_PX;
-}
-
function hasLogs(): boolean {
const data =
globals.trackDataStore.get(LogExistsKey) as LogExists | undefined;
@@ -126,7 +117,7 @@
addSelectionChangeObserver(handleSelectionChange);
export class DetailsPanel implements m.ClassComponent {
- private detailsHeight = getDetailsHeight();
+ private detailsHeight = getDefaultDetailsHeight();
view() {
interface DetailsPanel {
diff --git a/ui/src/frontend/drag_handle.ts b/ui/src/frontend/drag_handle.ts
index 5176039..21f044b 100644
--- a/ui/src/frontend/drag_handle.ts
+++ b/ui/src/frontend/drag_handle.ts
@@ -76,19 +76,19 @@
onTabClose?: (key: string) => void;
}
-export function getDetailsHeight() {
+export function getDefaultDetailsHeight() {
// This needs to be a function instead of a const to ensure the CSS constants
// have been initialized by the time we perform this calculation;
- return DEFAULT_DETAILS_CONTENT_HEIGHT + DRAG_HANDLE_HEIGHT_PX;
+ return DRAG_HANDLE_HEIGHT_PX + DEFAULT_DETAILS_CONTENT_HEIGHT;
}
function getFullScreenHeight() {
- const panelContainer =
- document.querySelector('.pan-and-zoom-content') as HTMLElement;
- if (panelContainer !== null) {
- return panelContainer.clientHeight;
+ const page = document.querySelector('.page') as HTMLElement;
+ if (page === null) {
+ // Fall back to at least partially open.
+ return getDefaultDetailsHeight();
} else {
- return getDetailsHeight();
+ return page.clientHeight;
}
}
@@ -99,8 +99,9 @@
private resize: (height: number) => void = () => {};
private isClosed = this.height <= 0;
private isFullscreen = false;
- // We can't get real fullscreen height until the pan_and_zoom_handler exists.
- private fullscreenHeight = getDetailsHeight();
+ // We can't get real fullscreen height until the pan_and_zoom_handler
+ // exists.
+ private fullscreenHeight = 0;
private trash: Trash = new Trash();
oncreate({dom, attrs}: m.CVnodeDOM<DragHandleAttrs>) {
@@ -191,6 +192,8 @@
onclick: () => {
this.isClosed = false;
this.isFullscreen = true;
+ // Ensure fullscreenHeight is up to date.
+ this.fullscreenHeight = getFullScreenHeight();
this.resize(this.fullscreenHeight);
raf.scheduleFullRedraw();
},
@@ -208,7 +211,7 @@
if (this.height === 0) {
this.isClosed = false;
if (this.previousHeight === 0) {
- this.previousHeight = getDetailsHeight();
+ this.previousHeight = getDefaultDetailsHeight();
}
this.resize(this.previousHeight);
} else {
diff --git a/ui/src/frontend/tab_panel.ts b/ui/src/frontend/tab_panel.ts
index 6e5fda5..53ba2e7 100644
--- a/ui/src/frontend/tab_panel.ts
+++ b/ui/src/frontend/tab_panel.ts
@@ -21,7 +21,6 @@
import {
DragHandle,
- getDetailsHeight,
Tab,
TabDropdownEntry,
} from './drag_handle';
@@ -32,7 +31,8 @@
}
export class TabPanel implements m.ClassComponent {
- private detailsHeight = getDetailsHeight();
+ // Tabs panel starts collapsed.
+ private detailsHeight = 0;
view() {
const tabMan = globals.tabManager;
