mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-09 13:18:29 +08:00
Tim van der Lippe
054314154c
R=jacktfranklin@chromium.org Bug: 1101738 Change-Id: I98099c5cba48d3ae28711c7a9a432670f6025b8b Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2390626 Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
84 lines
3.1 KiB
JavaScript
84 lines
3.1 KiB
JavaScript
// Copyright (c) 2016 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.
|
|
|
|
// @ts-nocheck
|
|
// TODO(crbug.com/1011811): Enable TypeScript compiler checks
|
|
|
|
import * as Common from '../common/common.js';
|
|
import * as SDK from '../sdk/sdk.js';
|
|
import * as UI from '../ui/ui.js';
|
|
|
|
import {DeveloperResourcesListView} from './DeveloperResourcesListView.js';
|
|
|
|
export class DeveloperResourcesView extends UI.Widget.VBox {
|
|
constructor() {
|
|
super(true);
|
|
this.registerRequiredCSS('developer_resources/developerResourcesView.css');
|
|
|
|
const toolbarContainer = this.contentElement.createChild('div', 'developer-resource-view-toolbar-container');
|
|
const toolbar = new UI.Toolbar.Toolbar('developer-resource-view-toolbar', toolbarContainer);
|
|
|
|
/** @type {?RegExp} */
|
|
this._textFilterRegExp = null;
|
|
const accessiblePlaceholder = ''; // Indicates that ToobarInput should use the placeholder as ARIA label.
|
|
this._filterInput =
|
|
new UI.Toolbar.ToolbarInput(ls`Enter text to search the URL and Error columns`, accessiblePlaceholder, 1);
|
|
this._filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TextChanged, this._onFilterChanged, this);
|
|
toolbar.appendToolbarItem(this._filterInput);
|
|
|
|
this._coverageResultsElement = this.contentElement.createChild('div', 'developer-resource-view-results');
|
|
this._listView = new DeveloperResourcesListView(this._isVisible.bind(this));
|
|
this._listView.show(this._coverageResultsElement);
|
|
this._statusToolbarElement = this.contentElement.createChild('div', 'developer-resource-view-toolbar-summary');
|
|
this._statusMessageElement = this._statusToolbarElement.createChild('div', 'developer-resource-view-message');
|
|
|
|
this._throttler = new Common.Throttler.Throttler(100);
|
|
this._loader = SDK.PageResourceLoader.PageResourceLoader.instance();
|
|
this._loader.addEventListener(SDK.PageResourceLoader.Events.Update, this._onUpdate, this);
|
|
this._onUpdate();
|
|
}
|
|
|
|
_onUpdate() {
|
|
this._throttler.schedule(this._update.bind(this));
|
|
}
|
|
|
|
async _update() {
|
|
this._listView.reset();
|
|
this._listView.update(this._loader.getResourcesLoaded().values());
|
|
this._updateStats();
|
|
}
|
|
|
|
_updateStats() {
|
|
const {loading, resources} = this._loader.getNumberOfResources();
|
|
if (loading > 0) {
|
|
this._statusMessageElement.textContent = `${resources} resources, ${loading} currently loading`;
|
|
} else {
|
|
this._statusMessageElement.textContent = `${resources} resources`;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {!SDK.PageResourceLoader.PageResource} item
|
|
* @return {boolean}
|
|
*/
|
|
_isVisible(item) {
|
|
return !this._textFilterRegExp || this._textFilterRegExp.test(item.url) ||
|
|
this._textFilterRegExp.test(item.errorMessage || '');
|
|
}
|
|
|
|
/**
|
|
*
|
|
*/
|
|
_onFilterChanged() {
|
|
if (!this._listView) {
|
|
return;
|
|
}
|
|
|
|
const text = this._filterInput.value();
|
|
this._textFilterRegExp = text ? createPlainTextSearchRegex(text, 'i') : null;
|
|
this._listView.updateFilterAndHighlight(this._textFilterRegExp);
|
|
this._updateStats();
|
|
}
|
|
}
|