| Index: third_party/WebKit/Source/devtools/front_end/layers/LayersPanel.js
|
| diff --git a/third_party/WebKit/Source/devtools/front_end/layers/LayersPanel.js b/third_party/WebKit/Source/devtools/front_end/layers/LayersPanel.js
|
| index 183c31232015053452a5282117ffde6940e5002f..61a64d7fd0e842e39fba2f472971fed33742ef10 100644
|
| --- a/third_party/WebKit/Source/devtools/front_end/layers/LayersPanel.js
|
| +++ b/third_party/WebKit/Source/devtools/front_end/layers/LayersPanel.js
|
| @@ -27,15 +27,13 @@
|
| * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
| * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
| */
|
| -
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.PanelWithSidebar}
|
| * @implements {WebInspector.TargetManager.Observer}
|
| + * @unrestricted
|
| */
|
| -WebInspector.LayersPanel = function()
|
| -{
|
| - WebInspector.PanelWithSidebar.call(this, "layers", 225);
|
| +WebInspector.LayersPanel = class extends WebInspector.PanelWithSidebar {
|
| + constructor() {
|
| + super('layers', 225);
|
|
|
| /** @type {?WebInspector.LayerTreeModel} */
|
| this._model = null;
|
| @@ -46,154 +44,154 @@ WebInspector.LayersPanel = function()
|
| this.panelSidebarElement().appendChild(this._layerTreeOutline.element);
|
| this.setDefaultFocusedElement(this._layerTreeOutline.element);
|
|
|
| - this._rightSplitWidget = new WebInspector.SplitWidget(false, true, "layerDetailsSplitViewState");
|
| + this._rightSplitWidget = new WebInspector.SplitWidget(false, true, 'layerDetailsSplitViewState');
|
| this.splitWidget().setMainWidget(this._rightSplitWidget);
|
|
|
| this._layers3DView = new WebInspector.Layers3DView(this._layerViewHost);
|
| this._rightSplitWidget.setMainWidget(this._layers3DView);
|
| - this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.PaintProfilerRequested, this._onPaintProfileRequested, this);
|
| + this._layers3DView.addEventListener(
|
| + WebInspector.Layers3DView.Events.PaintProfilerRequested, this._onPaintProfileRequested, this);
|
| this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.ScaleChanged, this._onScaleChanged, this);
|
|
|
| this._tabbedPane = new WebInspector.TabbedPane();
|
| this._rightSplitWidget.setSidebarWidget(this._tabbedPane);
|
|
|
| this._layerDetailsView = new WebInspector.LayerDetailsView(this._layerViewHost);
|
| - this._layerDetailsView.addEventListener(WebInspector.LayerDetailsView.Events.PaintProfilerRequested, this._onPaintProfileRequested, this);
|
| - this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Details, WebInspector.UIString("Details"), this._layerDetailsView);
|
| + this._layerDetailsView.addEventListener(
|
| + WebInspector.LayerDetailsView.Events.PaintProfilerRequested, this._onPaintProfileRequested, this);
|
| + this._tabbedPane.appendTab(
|
| + WebInspector.LayersPanel.DetailsViewTabs.Details, WebInspector.UIString('Details'), this._layerDetailsView);
|
|
|
| this._paintProfilerView = new WebInspector.LayerPaintProfilerView(this._showImage.bind(this));
|
| this._tabbedPane.addEventListener(WebInspector.TabbedPane.Events.TabClosed, this._onTabClosed, this);
|
| this._updateThrottler = new WebInspector.Throttler(100);
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + */
|
| + focus() {
|
| + this._layerTreeOutline.focus();
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + */
|
| + wasShown() {
|
| + super.wasShown();
|
| + if (this._model)
|
| + this._model.enable();
|
| + this._layerTreeOutline.focus();
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + */
|
| + willHide() {
|
| + if (this._model)
|
| + this._model.disable();
|
| + super.willHide();
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + * @param {!WebInspector.Target} target
|
| + */
|
| + targetAdded(target) {
|
| + if (this._model)
|
| + return;
|
| + this._model = WebInspector.LayerTreeModel.fromTarget(target);
|
| + if (!this._model)
|
| + return;
|
| + this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._onLayerTreeUpdated, this);
|
| + this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerPainted, this._onLayerPainted, this);
|
| + if (this.isShowing())
|
| + this._model.enable();
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + * @param {!WebInspector.Target} target
|
| + */
|
| + targetRemoved(target) {
|
| + if (!this._model || this._model.target() !== target)
|
| + return;
|
| + this._model.removeEventListener(
|
| + WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._onLayerTreeUpdated, this);
|
| + this._model.removeEventListener(WebInspector.LayerTreeModel.Events.LayerPainted, this._onLayerPainted, this);
|
| + this._model.disable();
|
| + this._model = null;
|
| + }
|
| +
|
| + _onLayerTreeUpdated() {
|
| + this._updateThrottler.schedule(this._update.bind(this));
|
| + }
|
| +
|
| + /**
|
| + * @return {!Promise<*>}
|
| + */
|
| + _update() {
|
| + if (this._model)
|
| + this._layerViewHost.setLayerTree(this._model.layerTree());
|
| + return Promise.resolve();
|
| + }
|
| +
|
| + /**
|
| + * @param {!WebInspector.Event} event
|
| + */
|
| + _onLayerPainted(event) {
|
| + if (!this._model)
|
| + return;
|
| + var layer = /** @type {!WebInspector.Layer} */ (event.data);
|
| + if (this._layerViewHost.selection() && this._layerViewHost.selection().layer() === layer)
|
| + this._layerDetailsView.update();
|
| + this._layers3DView.updateLayerSnapshot(layer);
|
| + }
|
| +
|
| + /**
|
| + * @param {!WebInspector.Event} event
|
| + */
|
| + _onPaintProfileRequested(event) {
|
| + var selection = /** @type {!WebInspector.LayerView.Selection} */ (event.data);
|
| + this._layers3DView.snapshotForSelection(selection).then(snapshotWithRect => {
|
| + if (!snapshotWithRect)
|
| + return;
|
| + this._layerBeingProfiled = selection.layer();
|
| + this._tabbedPane.appendTab(
|
| + WebInspector.LayersPanel.DetailsViewTabs.Profiler, WebInspector.UIString('Profiler'), this._paintProfilerView,
|
| + undefined, true, true);
|
| + this._tabbedPane.selectTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler);
|
| + this._paintProfilerView.profile(snapshotWithRect.snapshot);
|
| + });
|
| + }
|
| +
|
| + /**
|
| + * @param {!WebInspector.Event} event
|
| + */
|
| + _onTabClosed(event) {
|
| + if (event.data.tabId !== WebInspector.LayersPanel.DetailsViewTabs.Profiler || !this._layerBeingProfiled)
|
| + return;
|
| + this._paintProfilerView.reset();
|
| + this._layers3DView.showImageForLayer(this._layerBeingProfiled, undefined);
|
| + this._layerBeingProfiled = null;
|
| + }
|
| +
|
| + /**
|
| + * @param {string=} imageURL
|
| + */
|
| + _showImage(imageURL) {
|
| + this._layers3DView.showImageForLayer(this._layerBeingProfiled, imageURL);
|
| + }
|
| +
|
| + /**
|
| + * @param {!WebInspector.Event} event
|
| + */
|
| + _onScaleChanged(event) {
|
| + this._paintProfilerView.setScale(/** @type {number} */ (event.data));
|
| + }
|
| };
|
|
|
| WebInspector.LayersPanel.DetailsViewTabs = {
|
| - Details: "details",
|
| - Profiler: "profiler"
|
| -};
|
| -
|
| -WebInspector.LayersPanel.prototype = {
|
| - focus: function()
|
| - {
|
| - this._layerTreeOutline.focus();
|
| - },
|
| -
|
| - wasShown: function()
|
| - {
|
| - WebInspector.Panel.prototype.wasShown.call(this);
|
| - if (this._model)
|
| - this._model.enable();
|
| - this._layerTreeOutline.focus();
|
| - },
|
| -
|
| - willHide: function()
|
| - {
|
| - if (this._model)
|
| - this._model.disable();
|
| - WebInspector.Panel.prototype.willHide.call(this);
|
| - },
|
| -
|
| - /**
|
| - * @override
|
| - * @param {!WebInspector.Target} target
|
| - */
|
| - targetAdded: function(target)
|
| - {
|
| - if (this._model)
|
| - return;
|
| - this._model = WebInspector.LayerTreeModel.fromTarget(target);
|
| - if (!this._model)
|
| - return;
|
| - this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._onLayerTreeUpdated, this);
|
| - this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerPainted, this._onLayerPainted, this);
|
| - if (this.isShowing())
|
| - this._model.enable();
|
| - },
|
| -
|
| - /**
|
| - * @override
|
| - * @param {!WebInspector.Target} target
|
| - */
|
| - targetRemoved: function(target)
|
| - {
|
| - if (!this._model || this._model.target() !== target)
|
| - return;
|
| - this._model.removeEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._onLayerTreeUpdated, this);
|
| - this._model.removeEventListener(WebInspector.LayerTreeModel.Events.LayerPainted, this._onLayerPainted, this);
|
| - this._model.disable();
|
| - this._model = null;
|
| - },
|
| -
|
| - _onLayerTreeUpdated: function()
|
| - {
|
| - this._updateThrottler.schedule(this._update.bind(this));
|
| - },
|
| -
|
| - /**
|
| - * @return {!Promise<*>}
|
| - */
|
| - _update: function()
|
| - {
|
| - if (this._model)
|
| - this._layerViewHost.setLayerTree(this._model.layerTree());
|
| - return Promise.resolve();
|
| - },
|
| -
|
| - /**
|
| - * @param {!WebInspector.Event} event
|
| - */
|
| - _onLayerPainted: function(event)
|
| - {
|
| - if (!this._model)
|
| - return;
|
| - var layer = /** @type {!WebInspector.Layer} */ (event.data);
|
| - if (this._layerViewHost.selection() && this._layerViewHost.selection().layer() === layer)
|
| - this._layerDetailsView.update();
|
| - this._layers3DView.updateLayerSnapshot(layer);
|
| - },
|
| -
|
| - /**
|
| - * @param {!WebInspector.Event} event
|
| - */
|
| - _onPaintProfileRequested: function(event)
|
| - {
|
| - var selection = /** @type {!WebInspector.LayerView.Selection} */ (event.data);
|
| - this._layers3DView.snapshotForSelection(selection).then(snapshotWithRect => {
|
| - if (!snapshotWithRect)
|
| - return;
|
| - this._layerBeingProfiled = selection.layer();
|
| - this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler, WebInspector.UIString("Profiler"), this._paintProfilerView, undefined, true, true);
|
| - this._tabbedPane.selectTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler);
|
| - this._paintProfilerView.profile(snapshotWithRect.snapshot);
|
| - });
|
| - },
|
| -
|
| - /**
|
| - * @param {!WebInspector.Event} event
|
| - */
|
| - _onTabClosed: function(event)
|
| - {
|
| - if (event.data.tabId !== WebInspector.LayersPanel.DetailsViewTabs.Profiler || !this._layerBeingProfiled)
|
| - return;
|
| - this._paintProfilerView.reset();
|
| - this._layers3DView.showImageForLayer(this._layerBeingProfiled, undefined);
|
| - this._layerBeingProfiled = null;
|
| - },
|
| -
|
| - /**
|
| - * @param {string=} imageURL
|
| - */
|
| - _showImage: function(imageURL)
|
| - {
|
| - this._layers3DView.showImageForLayer(this._layerBeingProfiled, imageURL);
|
| - },
|
| -
|
| - /**
|
| - * @param {!WebInspector.Event} event
|
| - */
|
| - _onScaleChanged: function(event)
|
| - {
|
| - this._paintProfilerView.setScale(/** @type {number} */(event.data));
|
| - },
|
| -
|
| - __proto__: WebInspector.PanelWithSidebar.prototype
|
| + Details: 'details',
|
| + Profiler: 'profiler'
|
| };
|
|
|