mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-13 10:05:41 +08:00
Simon Zünd
eba79261ba
R=petermarshall@chromium.org Bug: chromium:1011811 Change-Id: I0fac447a7b3f03bf23c55933b1f4c74fc4890450 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2436734 Reviewed-by: Peter Marshall <petermarshall@chromium.org> Commit-Queue: Simon Zünd <szuend@chromium.org>
88 lines
3.2 KiB
JavaScript
88 lines
3.2 KiB
JavaScript
// Copyright 2014 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
import * as Common from '../common/common.js'; // eslint-disable-line no-unused-vars
|
|
import * as LayerViewer from '../layer_viewer/layer_viewer.js';
|
|
import * as SDK from '../sdk/sdk.js'; // eslint-disable-line no-unused-vars
|
|
import * as TimelineModel from '../timeline_model/timeline_model.js'; // eslint-disable-line no-unused-vars
|
|
import * as UI from '../ui/ui.js';
|
|
|
|
/**
|
|
* @unrestricted
|
|
*/
|
|
export class TimelineLayersView extends UI.SplitWidget.SplitWidget {
|
|
/**
|
|
* @param {!TimelineModel.TimelineModel.TimelineModelImpl} model
|
|
* @param {function(!SDK.PaintProfiler.PaintProfilerSnapshot):void} showPaintProfilerCallback
|
|
*/
|
|
constructor(model, showPaintProfilerCallback) {
|
|
super(true, false, 'timelineLayersView');
|
|
this._model = model;
|
|
this._showPaintProfilerCallback = showPaintProfilerCallback;
|
|
|
|
this.element.classList.add('timeline-layers-view');
|
|
this._rightSplitWidget = new UI.SplitWidget.SplitWidget(true, true, 'timelineLayersViewDetails');
|
|
this._rightSplitWidget.element.classList.add('timeline-layers-view-properties');
|
|
this.setMainWidget(this._rightSplitWidget);
|
|
|
|
const vbox = new UI.Widget.VBox();
|
|
this.setSidebarWidget(vbox);
|
|
|
|
this._layerViewHost = new LayerViewer.LayerViewHost.LayerViewHost();
|
|
|
|
const layerTreeOutline = new LayerViewer.LayerTreeOutline.LayerTreeOutline(this._layerViewHost);
|
|
vbox.element.appendChild(layerTreeOutline.element);
|
|
|
|
this._layers3DView = new LayerViewer.Layers3DView.Layers3DView(this._layerViewHost);
|
|
this._layers3DView.addEventListener(
|
|
LayerViewer.Layers3DView.Events.PaintProfilerRequested, this._onPaintProfilerRequested, this);
|
|
this._rightSplitWidget.setMainWidget(this._layers3DView);
|
|
|
|
const layerDetailsView = new LayerViewer.LayerDetailsView.LayerDetailsView(this._layerViewHost);
|
|
this._rightSplitWidget.setSidebarWidget(layerDetailsView);
|
|
layerDetailsView.addEventListener(
|
|
LayerViewer.LayerDetailsView.Events.PaintProfilerRequested, this._onPaintProfilerRequested, this);
|
|
}
|
|
|
|
/**
|
|
* @param {!TimelineModel.TimelineFrameModel.TracingFrameLayerTree} frameLayerTree
|
|
*/
|
|
showLayerTree(frameLayerTree) {
|
|
this._frameLayerTree = frameLayerTree;
|
|
if (this.isShowing()) {
|
|
this._update();
|
|
} else {
|
|
this._updateWhenVisible = true;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @override
|
|
*/
|
|
wasShown() {
|
|
if (this._updateWhenVisible) {
|
|
this._updateWhenVisible = false;
|
|
this._update();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {!Common.EventTarget.EventTargetEvent} event
|
|
*/
|
|
_onPaintProfilerRequested(event) {
|
|
const selection = /** @type {!LayerViewer.LayerViewHost.Selection} */ (event.data);
|
|
this._layers3DView.snapshotForSelection(selection).then(snapshotWithRect => {
|
|
if (snapshotWithRect) {
|
|
this._showPaintProfilerCallback(snapshotWithRect.snapshot);
|
|
}
|
|
});
|
|
}
|
|
|
|
_update() {
|
|
if (this._frameLayerTree) {
|
|
this._frameLayerTree.layerTreePromise().then(layerTree => this._layerViewHost.setLayerTree(layerTree));
|
|
}
|
|
}
|
|
}
|