zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-01 01:38:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

Migrate css_overview/ to import cross-module

Browse Source 
Bug: 1006759
Change-Id: I2130d4ba17bb592090c202cfe2b97da2558e72ea
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2054544
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
This commit is contained in:
Tim van der Lippe
2020-02-13 17:06:10 +00:00
committed by Commit Bot
parent 7e8667ea17
commit 7946bbcb95
7 changed files with 74 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front_end/css_overview/CSSOverviewCompletedView.js
+43 -35
View File
@@ -2,13 +2,20 @@
// 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';
import * as Components from '../components/components.js';
import * as DataGrid from '../data_grid/data_grid.js';
import * as SDK from '../sdk/sdk.js';
import * as TextUtils from '../text_utils/text_utils.js';
import * as UI from '../ui/ui.js';
import {Events} from './CSSOverviewController.js';
import {CSSOverviewSidebarPanel, SidebarEvents} from './CSSOverviewSidebarPanel.js';
/**
* @unrestricted
*/
export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
constructor(controller, target) {
super('css_overview_completed_view');
this.registerRequiredCSS('css_overview/cssOverviewCompletedView.css');
@@ -16,8 +23,8 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
this._controller = controller;
this._formatter = new Intl.NumberFormat('en-US');
this._mainContainer = new UI.SplitWidget(true, true);
this._resultsContainer = new UI.VBox();
this._mainContainer = new UI.SplitWidget.SplitWidget(true, true);
this._resultsContainer = new UI.Widget.VBox();
this._elementContainer = new DetailsView();
// If closing the last tab, collapse the sidebar.
@@ -40,10 +47,10 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
this.splitWidget().setSidebarWidget(this._sideBar);
this.splitWidget().setMainWidget(this._mainContainer);
this._cssModel = target.model(SDK.CSSModel);
this._domModel = target.model(SDK.DOMModel);
this._cssModel = target.model(SDK.CSSModel.CSSModel);
this._domModel = target.model(SDK.DOMModel.DOMModel);
this._domAgent = target.domAgent();
this._linkifier = new Components.Linkifier(/* maxLinkLength */ 20, /* useLinkDecorator */ true);
this._linkifier = new Components.Linkifier.Linkifier(/* maxLinkLength */ 20, /* useLinkDecorator */ true);
this._viewMap = new Map();
@@ -218,7 +225,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
const sortedFillColors = this._sortColorsByLuminance(fillColors);
const sortedBorderColors = this._sortColorsByLuminance(borderColors);
this._fragment = UI.Fragment.build`
this._fragment = UI.Fragment.Fragment.build`
<div class="vbox overview-completed-view">
<div $="summary" class="results-section horizontally-padded summary">
<h1>${ls`Overview summary`}</h1>
@@ -298,7 +305,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
<h1>${ls`Font info`}</h1>
${
fontInfo.size > 0 ? this._fontInfoToFragment(fontInfo) :
UI.Fragment.build`<div>${ls`There are no fonts.`}</div>`}
UI.Fragment.Fragment.build`<div>${ls`There are no fonts.`}</div>`}
</div>
<div $="unused-declarations" class="results-section unused-declarations">
@@ -306,7 +313,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
${
unusedDeclarations.size > 0 ?
this._groupToFragment(unusedDeclarations, 'unused-declarations', 'declaration') :
UI.Fragment.build`<div class="horizontally-padded">${ls`There are no unused declarations.`}</div>`}
UI.Fragment.Fragment.build`<div class="horizontally-padded">${ls`There are no unused declarations.`}</div>`}
</div>
<div $="media-queries" class="results-section media-queries">
@@ -314,7 +321,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
${
mediaQueries.size > 0 ?
this._groupToFragment(mediaQueries, 'media-queries', 'text') :
UI.Fragment.build`<div class="horizontally-padded">${ls`There are no media queries.`}</div>`}
UI.Fragment.Fragment.build`<div class="horizontally-padded">${ls`There are no media queries.`}</div>`}
</div>
</div>`;
@@ -365,9 +372,9 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
_fontInfoToFragment(fontInfo) {
const fonts = Array.from(fontInfo.entries());
return UI.Fragment.build`
return UI.Fragment.Fragment.build`
${fonts.map(([font, fontMetrics]) => {
return UI.Fragment.build
return UI.Fragment.Fragment.build
`<section class="font-family"><h2>${font}</h2> ${this._fontMetricsToFragment(font, fontMetrics)}</section>`;
})}
`;
@@ -376,11 +383,11 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
_fontMetricsToFragment(font, fontMetrics) {
const fontMetricInfo = Array.from(fontMetrics.entries());
return UI.Fragment.build`
return UI.Fragment.Fragment.build`
<div class="font-metric">
${fontMetricInfo.map(([label, values]) => {
const sanitizedPath = `${font}/${label}`;
return UI.Fragment.build`
return UI.Fragment.Fragment.build`
<div>
<h3>${label}</h3>
${this._groupToFragment(values, 'font-info', 'value', sanitizedPath)}
@@ -399,12 +406,12 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
const total = values.reduce((prev, curr) => prev + curr[1].length, 0);
return UI.Fragment.build`<ul>
return UI.Fragment.Fragment.build`<ul>
${values.map(([title, nodes]) => {
const width = 100 * nodes.length / total;
const itemLabel = nodes.length === 1 ? ls`occurrence` : ls`occurrences`;
return UI.Fragment.build`<li>
return UI.Fragment.Fragment.build`<li>
<div class="title">${title}</div>
<button data-type="${type}" data-path="${path}" data-${dataLabel}="${title}">
<div class="details">${ls`${nodes.length} ${itemLabel}`}</div>
@@ -418,7 +425,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
}
_colorsToFragment(section, color) {
const blockFragment = UI.Fragment.build`<li>
const blockFragment = UI.Fragment.Fragment.build`<li>
<button data-type="color" data-color="${color}" data-section="${section}" class="block" $="color"></button>
<div class="block-title">${color}</div>
</li>`;
@@ -426,7 +433,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
const block = blockFragment.$('color');
block.style.backgroundColor = color;
const borderColor = Common.Color.parse(color);
const borderColor = Common.Color.Color.parse(color);
let [h, s, l] = borderColor.hsla();
h = Math.round(h * 360);
s = Math.round(s * 100);
@@ -443,9 +450,9 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
_sortColorsByLuminance(srcColors) {
return Array.from(srcColors.keys()).sort((colA, colB) => {
const colorA = Common.Color.parse(colA);
const colorB = Common.Color.parse(colB);
return Common.Color.luminance(colorB.rgba()) - Common.Color.luminance(colorA.rgba());
const colorA = Common.Color.Color.parse(colA);
const colorB = Common.Color.Color.parse(colB);
return Common.Color.Color.luminance(colorB.rgba()) - Common.Color.Color.luminance(colorA.rgba());
});
}
@@ -456,11 +463,11 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
CSSOverviewCompletedView.pushedNodes = new Set();
export class DetailsView extends UI.VBox {
export class DetailsView extends UI.Widget.VBox {
constructor() {
super();
this._tabbedPane = new UI.TabbedPane();
this._tabbedPane = new UI.TabbedPane.TabbedPane();
this._tabbedPane.show(this.element);
this._tabbedPane.addEventListener(UI.TabbedPane.Events.TabClosed, () => {
this.dispatchEventToListeners(UI.TabbedPane.Events.TabClosed, this._tabbedPane.tabIds().length);
@@ -470,7 +477,7 @@ export class DetailsView extends UI.VBox {
/**
* @param {string} id
* @param {string} tabTitle
* @param {!UI.Widget} view
* @param {!UI.Widget.Widget} view
* @param {boolean=} isCloseable
*/
appendTab(id, tabTitle, view, isCloseable) {
@@ -486,7 +493,7 @@ export class DetailsView extends UI.VBox {
}
}
export class ElementDetailsView extends UI.Widget {
export class ElementDetailsView extends UI.Widget.Widget {
constructor(controller, domModel, cssModel, linkifier) {
super();
@@ -501,8 +508,8 @@ export class ElementDetailsView extends UI.Widget {
{id: 'sourceURL', title: ls`Source`, visible: true, sortable: false, hideable: true, weight: 100}
];
this._elementGrid =
new DataGrid.SortableDataGrid({displayName: ls`CSS Overview Elements`, columns: this._elementGridColumns});
this._elementGrid = new DataGrid.SortableDataGrid.SortableDataGrid(
{displayName: ls`CSS Overview Elements`, columns: this._elementGridColumns});
this._elementGrid.element.classList.add('element-grid');
this._elementGrid.element.addEventListener('mouseover', this._onMouseOver.bind(this));
this._elementGrid.setStriped(true);
@@ -518,7 +525,7 @@ export class ElementDetailsView extends UI.Widget {
return;
}
const comparator = DataGrid.SortableDataGrid.StringComparator.bind(null, sortColumnId);
const comparator = DataGrid.SortableDataGrid.SortableDataGrid.StringComparator.bind(null, sortColumnId);
this._elementGrid.sortNodes(comparator, !this._elementGrid.isSortOrderAscending());
}
@@ -584,12 +591,12 @@ export class ElementDetailsView extends UI.Widget {
}
}
export class ElementNode extends DataGrid.SortableDataGridNode {
export class ElementNode extends DataGrid.SortableDataGrid.SortableDataGridNode {
/**
* @param {!DataGrid.SortableDataGrid} dataGrid
* @param {!DataGrid.SortableDataGrid.SortableDataGrid} dataGrid
* @param {!Object<string,*>} data
* @param {!Components.Linkifier} linkifier
* @param {!SDK.CSSModel} cssModel
* @param {!Components.Linkifier.Linkifier} linkifier
* @param {!SDK.CSSModel.CSSModel} cssModel
*/
constructor(dataGrid, data, linkifier, cssModel) {
super(dataGrid, data.hasChildren);
@@ -610,7 +617,7 @@ export class ElementNode extends DataGrid.SortableDataGridNode {
const cell = this.createTD(columnId);
cell.textContent = '...';
Common.Linkifier.linkify(this.data.node).then(link => {
Common.Linkifier.Linkifier.linkify(this.data.node).then(link => {
cell.textContent = '';
link.dataset.backendNodeId = this.data.node.backendNodeId();
cell.appendChild(link);
@@ -624,7 +631,8 @@ export class ElementNode extends DataGrid.SortableDataGridNode {
if (this.data.range) {
const link = this._linkifyRuleLocation(
this._cssModel, this._linkifier, this.data.styleSheetId, TextUtils.TextRange.fromObject(this.data.range));
this._cssModel, this._linkifier, this.data.styleSheetId,
TextUtils.TextRange.TextRange.fromObject(this.data.range));
if (link.textContent !== '') {
cell.appendChild(link);
@@ -644,7 +652,7 @@ export class ElementNode extends DataGrid.SortableDataGridNode {
const styleSheetHeader = cssModel.styleSheetHeaderForId(styleSheetId);
const lineNumber = styleSheetHeader.lineNumberInSource(ruleLocation.startLine);
const columnNumber = styleSheetHeader.columnNumberInSource(ruleLocation.startLine, ruleLocation.startColumn);
const matchingSelectorLocation = new SDK.CSSLocation(styleSheetHeader, lineNumber, columnNumber);
const matchingSelectorLocation = new SDK.CSSModel.CSSLocation(styleSheetHeader, lineNumber, columnNumber);
return linkifier.linkifyCSSLocation(matchingSelectorLocation);
}
}
front_end/css_overview/CSSOverviewController.js
+5 -2
View File
@@ -2,16 +2,19 @@
// 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';
import * as SDK from '../sdk/sdk.js';
/**
* @unrestricted
*/
export class OverviewController extends Common.Object {
export class OverviewController extends Common.ObjectWrapper.ObjectWrapper {
constructor() {
super();
this.currentUrl = self.SDK.targetManager.inspectedURL();
self.SDK.targetManager.addEventListener(
SDK.TargetManager.Events.InspectedURLChanged, this._checkUrlAndResetIfChanged, this);
SDK.SDKModel.Events.InspectedURLChanged, this._checkUrlAndResetIfChanged, this);
}
_checkUrlAndResetIfChanged() {
front_end/css_overview/CSSOverviewModel.js
+7 -4
View File
@@ -2,14 +2,17 @@
// 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';
import * as SDK from '../sdk/sdk.js';
import {CSSOverviewUnusedDeclarations} from './CSSOverviewUnusedDeclarations.js';
/**
* @unrestricted
*/
export class CSSOverviewModel extends SDK.SDKModel {
export class CSSOverviewModel extends SDK.SDKModel.SDKModel {
/**
* @param {!SDK.Target} target
* @param {!SDK.SDKModel.Target} target
*/
constructor(target) {
super(target);
@@ -71,7 +74,7 @@ export class CSSOverviewModel extends SDK.SDKModel {
// Parse the color, discard transparent ones.
const colorText = strings[id];
const color = Common.Color.parse(colorText);
const color = Common.Color.Color.parse(colorText);
if (!color || color.rgba()[3] === 0) {
return;
}
@@ -337,4 +340,4 @@ export class CSSOverviewModel extends SDK.SDKModel {
}
}
SDK.SDKModel.register(CSSOverviewModel, SDK.Target.Capability.DOM, false);
SDK.SDKModel.SDKModel.register(CSSOverviewModel, SDK.SDKModel.Capability.DOM, false);
front_end/css_overview/CSSOverviewPanel.js
+3 -1
View File
@@ -2,6 +2,8 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import * as UI from '../ui/ui.js';
import {CSSOverviewCompletedView} from './CSSOverviewCompletedView.js';
import {Events, OverviewController} from './CSSOverviewController.js';
import {CSSOverviewModel} from './CSSOverviewModel.js';
@@ -11,7 +13,7 @@ import {CSSOverviewStartView} from './CSSOverviewStartView.js';
/**
* @unrestricted
*/
export class CSSOverviewPanel extends UI.Panel {
export class CSSOverviewPanel extends UI.Panel.Panel {
constructor() {
super('css_overview');
this.registerRequiredCSS('css_overview/cssOverview.css');
front_end/css_overview/CSSOverviewProcessingView.js
+5 -3
View File
@@ -2,12 +2,14 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import * as UI from '../ui/ui.js';
import {Events} from './CSSOverviewController.js';
/**
* @unrestricted
*/
export class CSSOverviewProcessingView extends UI.Widget {
export class CSSOverviewProcessingView extends UI.Widget.Widget {
constructor(controller) {
super();
this.registerRequiredCSS('css_overview/cssOverviewProcessingView.css');
@@ -18,12 +20,12 @@ export class CSSOverviewProcessingView extends UI.Widget {
}
_render() {
const cancelButton = UI.createTextButton(
const cancelButton = UI.UIUtils.createTextButton(
ls`Cancel`, () => this._controller.dispatchEventToListeners(Events.RequestOverviewCancel), '',
true /* primary */);
this.setDefaultFocusedElement(cancelButton);
this.fragment = UI.Fragment.build`
this.fragment = UI.Fragment.Fragment.build`
<div class="vbox overview-processing-view">
<h1>Processing page</h1>
<div>${cancelButton}</div>
front_end/css_overview/CSSOverviewSidebarPanel.js
+6 -4
View File
@@ -2,7 +2,9 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
export class CSSOverviewSidebarPanel extends UI.VBox {
import * as UI from '../ui/ui.js';
export class CSSOverviewSidebarPanel extends UI.Widget.VBox {
static get ITEM_CLASS_NAME() {
return 'overview-sidebar-panel-item';
}
@@ -19,12 +21,12 @@ export class CSSOverviewSidebarPanel extends UI.VBox {
this.contentElement.addEventListener('click', this._onItemClick.bind(this));
// Clear overview.
const clearResultsButton = new UI.ToolbarButton(ls`Clear overview`, 'largeicon-clear');
clearResultsButton.addEventListener(UI.ToolbarButton.Events.Click, this._reset, this);
const clearResultsButton = new UI.Toolbar.ToolbarButton(ls`Clear overview`, 'largeicon-clear');
clearResultsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this._reset, this);
// Toolbar.
const toolbarElement = this.contentElement.createChild('div', 'overview-toolbar');
const toolbar = new UI.Toolbar('', toolbarElement);
const toolbar = new UI.Toolbar.Toolbar('', toolbarElement);
toolbar.appendToolbarItem(clearResultsButton);
}
front_end/css_overview/CSSOverviewStartView.js
+5 -3
View File
@@ -2,12 +2,14 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import * as UI from '../ui/ui.js';
import {Events} from './CSSOverviewController.js';
/**
* @unrestricted
*/
export class CSSOverviewStartView extends UI.Widget {
export class CSSOverviewStartView extends UI.Widget.Widget {
constructor(controller) {
super();
this.registerRequiredCSS('css_overview/cssOverviewStartView.css');
@@ -17,13 +19,13 @@ export class CSSOverviewStartView extends UI.Widget {
}
_render() {
const startButton = UI.createTextButton(
const startButton = UI.UIUtils.createTextButton(
ls`Capture overview`, () => this._controller.dispatchEventToListeners(Events.RequestOverviewStart), '',
true /* primary */);
this.setDefaultFocusedElement(startButton);
const fragment = UI.Fragment.build`
const fragment = UI.Fragment.Fragment.build`
<div class="vbox overview-start-view">
<h1>${ls`CSS Overview`}</h1>
<div>${startButton}</div>