mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-02 02:08:24 +08:00
Paul Lewis
8cddf9931f
Creates a panel that steps through the page to build statistics on CSS used, such as colors, fonts, specificity, and other items of note. Note: this is a DevTools experiment. Bug: 1007284 Change-Id: Ib8d8b2af6bb65d6ff4816ca23b48b76980cd80db Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1806736 Commit-Queue: Paul Lewis <aerotwist@chromium.org> Reviewed-by: Yang Guo <yangguo@chromium.org> Reviewed-by: Mathias Bynens <mathias@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#700745} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: 0e4a3c81f343d15e2121280d332659778ad07323
45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
// Copyright 2019 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.
|
|
|
|
/**
|
|
* @unrestricted
|
|
*/
|
|
CssOverview.CSSOverviewProcessingView = class extends UI.Widget {
|
|
constructor(controller) {
|
|
super();
|
|
this.registerRequiredCSS('css_overview/cssOverviewProcessingView.css');
|
|
|
|
this._formatter = new Intl.NumberFormat('en-US');
|
|
this._controller = controller;
|
|
this._render();
|
|
}
|
|
|
|
_render() {
|
|
const cancelButton = UI.createTextButton(
|
|
ls`Cancel`, () => this._controller.dispatchEventToListeners(CssOverview.Events.RequestOverviewCancel), '',
|
|
true /* primary */);
|
|
this.setDefaultFocusedElement(cancelButton);
|
|
|
|
this.fragment = UI.Fragment.build`
|
|
<div class="vbox overview-processing-view">
|
|
<h1>Processing page</h1>
|
|
<div>${cancelButton}</div>
|
|
|
|
<h2 $="processed"></h2>
|
|
</div>
|
|
`;
|
|
|
|
this.contentElement.appendChild(this.fragment.element());
|
|
this.contentElement.style.overflow = 'auto';
|
|
}
|
|
|
|
setElementsHandled(handled = 0, total = 0) {
|
|
// TODO(aerotwist): We might want to switch this to using Intl.PluralRules in the future
|
|
// @see https://v8.dev/features/intl-pluralrules
|
|
const elementsTotal = total > 0 ? ls`document elements` : ls`document element`;
|
|
this.fragment.$('processed').textContent =
|
|
ls`Processed ${this._formatter.format(handled)} of ${this._formatter.format(total)} ${elementsTotal}.`;
|
|
}
|
|
};
|