From 7946bbcb9544e28670da54b106e35d9cfa970aca Mon Sep 17 00:00:00 2001 From: Tim van der Lippe Date: Thu, 13 Feb 2020 13:58:42 +0000 Subject: [PATCH] Migrate css_overview/ to import cross-module Bug: 1006759 Change-Id: I2130d4ba17bb592090c202cfe2b97da2558e72ea Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2054544 Reviewed-by: Paul Lewis Commit-Queue: Tim van der Lippe --- .../css_overview/CSSOverviewCompletedView.js | 78 ++++++++++--------- .../css_overview/CSSOverviewController.js | 7 +- front_end/css_overview/CSSOverviewModel.js | 11 ++- front_end/css_overview/CSSOverviewPanel.js | 4 +- .../css_overview/CSSOverviewProcessingView.js | 8 +- .../css_overview/CSSOverviewSidebarPanel.js | 10 ++- .../css_overview/CSSOverviewStartView.js | 8 +- 7 files changed, 74 insertions(+), 52 deletions(-) diff --git a/front_end/css_overview/CSSOverviewCompletedView.js b/front_end/css_overview/CSSOverviewCompletedView.js index 428cb41777..80d06d171f 100644 --- a/front_end/css_overview/CSSOverviewCompletedView.js +++ b/front_end/css_overview/CSSOverviewCompletedView.js @@ -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`

${ls`Overview summary`}

@@ -298,7 +305,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {

${ls`Font info`}

${ fontInfo.size > 0 ? this._fontInfoToFragment(fontInfo) : - UI.Fragment.build`
${ls`There are no fonts.`}
`} + UI.Fragment.Fragment.build`
${ls`There are no fonts.`}
`}
@@ -306,7 +313,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar { ${ unusedDeclarations.size > 0 ? this._groupToFragment(unusedDeclarations, 'unused-declarations', 'declaration') : - UI.Fragment.build`
${ls`There are no unused declarations.`}
`} + UI.Fragment.Fragment.build`
${ls`There are no unused declarations.`}
`}
@@ -314,7 +321,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar { ${ mediaQueries.size > 0 ? this._groupToFragment(mediaQueries, 'media-queries', 'text') : - UI.Fragment.build`
${ls`There are no media queries.`}
`} + UI.Fragment.Fragment.build`
${ls`There are no media queries.`}
`}
`; @@ -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 `

${font}

${this._fontMetricsToFragment(font, fontMetrics)}
`; })} `; @@ -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`
${fontMetricInfo.map(([label, values]) => { const sanitizedPath = `${font}/${label}`; - return UI.Fragment.build` + return UI.Fragment.Fragment.build`

${label}

${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`
    + return UI.Fragment.Fragment.build`
      ${values.map(([title, nodes]) => { const width = 100 * nodes.length / total; const itemLabel = nodes.length === 1 ? ls`occurrence` : ls`occurrences`; - return UI.Fragment.build`
    • + return UI.Fragment.Fragment.build`
    • ${title}
      ${color}
      • `; @@ -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} 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); } } diff --git a/front_end/css_overview/CSSOverviewController.js b/front_end/css_overview/CSSOverviewController.js index e03e9cd15f..55473b4a74 100644 --- a/front_end/css_overview/CSSOverviewController.js +++ b/front_end/css_overview/CSSOverviewController.js @@ -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() { diff --git a/front_end/css_overview/CSSOverviewModel.js b/front_end/css_overview/CSSOverviewModel.js index bb22293586..a5443f81e8 100644 --- a/front_end/css_overview/CSSOverviewModel.js +++ b/front_end/css_overview/CSSOverviewModel.js @@ -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); diff --git a/front_end/css_overview/CSSOverviewPanel.js b/front_end/css_overview/CSSOverviewPanel.js index 7b38a727df..4e0795026b 100644 --- a/front_end/css_overview/CSSOverviewPanel.js +++ b/front_end/css_overview/CSSOverviewPanel.js @@ -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'); diff --git a/front_end/css_overview/CSSOverviewProcessingView.js b/front_end/css_overview/CSSOverviewProcessingView.js index 7df91f8d27..70e39584cd 100644 --- a/front_end/css_overview/CSSOverviewProcessingView.js +++ b/front_end/css_overview/CSSOverviewProcessingView.js @@ -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`

      Processing page

      ${cancelButton}
      diff --git a/front_end/css_overview/CSSOverviewSidebarPanel.js b/front_end/css_overview/CSSOverviewSidebarPanel.js index c135809f7a..8c627a7fae 100644 --- a/front_end/css_overview/CSSOverviewSidebarPanel.js +++ b/front_end/css_overview/CSSOverviewSidebarPanel.js @@ -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); } diff --git a/front_end/css_overview/CSSOverviewStartView.js b/front_end/css_overview/CSSOverviewStartView.js index b06f5e6e43..59e38a3062 100644 --- a/front_end/css_overview/CSSOverviewStartView.js +++ b/front_end/css_overview/CSSOverviewStartView.js @@ -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`

      ${ls`CSS Overview`}

      ${startButton}