Move component_helpers to ui/components/helpers

R=jacktfranklin@chromium.org

Bug: 1187573
Change-Id: If6067534c72445c00878b1a90e3fd99abfb09d87
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2826291
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>

config/gni/all_devtools_modules.gni

@@ -8,10 +8,6 @@ generated_typescript_modules = []
 
 all_typescript_module_sources = [
   "browser_sdk/LogManager.js",
-  "component_helpers/component-server-setup.js",
-  "component_helpers/directives.js",
-  "component_helpers/get-stylesheet.js",
-  "component_helpers/set-css-property.js",
   "components/ImagePreview.js",
   "components/JSPresentationUtils.js",
   "components/Linkifier.js",
@@ -695,6 +691,10 @@ all_typescript_module_sources = [
   "ui/components/data_grid/DataGridRenderers.js",
   "ui/components/data_grid/DataGridUtils.js",
   "ui/components/expandable_list/ExpandableList.js",
+  "ui/components/helpers/component-server-setup.js",
+  "ui/components/helpers/directives.js",
+  "ui/components/helpers/get-stylesheet.js",
+  "ui/components/helpers/set-css-property.js",
   "ui/components/icon_button/Icon.js",
   "ui/components/icon_button/IconButton.js",
   "ui/components/linear_memory_inspector/LinearMemoryInspector.js",

config/gni/devtools_grd_files.gni

@@ -120,7 +120,6 @@ grd_files_release_sources = [
   "front_end/browser_sdk/browser_sdk.js",
   "front_end/cm/cm.js",
   "front_end/cm/cm_module.js",
-  "front_end/component_helpers/component_helpers.js",
   "front_end/components/components-legacy.js",
   "front_end/components/components.js",
   "front_end/core/common/common-legacy.js",
@@ -376,6 +375,7 @@ grd_files_release_sources = [
   "front_end/toolbox.html",
   "front_end/ui/components/data_grid/data_grid.js",
   "front_end/ui/components/expandable_list/expandable_list.js",
+  "front_end/ui/components/helpers/helpers.js",
   "front_end/ui/components/icon_button/icon_button.js",
   "front_end/ui/components/linear_memory_inspector/linear_memory_inspector-meta.js",
   "front_end/ui/components/linear_memory_inspector/linear_memory_inspector.js",
@@ -431,10 +431,6 @@ grd_files_release_sources = [
 
 grd_files_debug_sources = [
   "front_end/browser_sdk/LogManager.js",
-  "front_end/component_helpers/component-server-setup.js",
-  "front_end/component_helpers/directives.js",
-  "front_end/component_helpers/get-stylesheet.js",
-  "front_end/component_helpers/set-css-property.js",
   "front_end/components/ImagePreview.js",
   "front_end/components/JSPresentationUtils.js",
   "front_end/components/Linkifier.js",
@@ -1117,6 +1113,10 @@ grd_files_debug_sources = [
   "front_end/ui/components/data_grid/DataGridRenderers.js",
   "front_end/ui/components/data_grid/DataGridUtils.js",
   "front_end/ui/components/expandable_list/ExpandableList.js",
+  "front_end/ui/components/helpers/component-server-setup.js",
+  "front_end/ui/components/helpers/directives.js",
+  "front_end/ui/components/helpers/get-stylesheet.js",
+  "front_end/ui/components/helpers/set-css-property.js",
   "front_end/ui/components/icon_button/Icon.js",
   "front_end/ui/components/icon_button/IconButton.js",
   "front_end/ui/components/linear_memory_inspector/LinearMemoryInspector.js",

config/gni/devtools_module_entrypoints.gni

@@ -9,7 +9,6 @@ devtools_module_entrypoint_sources = [
   "browser_sdk/browser_sdk-meta.js",
   "browser_sdk/browser_sdk.js",
   "cm/cm.js",
-  "component_helpers/component_helpers.js",
   "components/components-legacy.js",
   "components/components.js",
   "core/common/common-legacy.js",
@@ -178,6 +177,7 @@ devtools_module_entrypoint_sources = [
   "timeline/timeline.js",
   "ui/components/data_grid/data_grid.js",
   "ui/components/expandable_list/expandable_list.js",
+  "ui/components/helpers/helpers.js",
   "ui/components/icon_button/icon_button.js",
   "ui/components/linear_memory_inspector/linear_memory_inspector-meta.js",
   "ui/components/linear_memory_inspector/linear_memory_inspector.js",

front_end/BUILD.gn

@@ -16,7 +16,6 @@ group("front_end") {
     ":legacy_css",
     ":legacy_entrypoints",
     ":ts_library-verification",
-    "component_helpers:bundle",
     "components:bundle",
     "core/common:bundle",
     "core/i18n:bundle",
@@ -56,6 +55,7 @@ group("front_end") {
     "theme_support:bundle",
     "third_party/lighthouse",
     "third_party/puppeteer:bundle",
+    "ui/components/helpers:bundle",
     "ui/components/render_coordinator:bundle",
     "ui/legacy:bundle",
     "ui/legacy/components/color_picker:bundle",

front_end/component_helpers/BUILD.gn

@@ -1,30 +0,0 @@
-# Copyright 2020 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.
-
-import("../../scripts/build/ninja/devtools_entrypoint.gni")
-import("../../scripts/build/ninja/devtools_module.gni")
-import("../../scripts/build/ninja/devtools_pre_built.gni")
-import("../../third_party/typescript/typescript.gni")
-
-devtools_module("component_helpers") {
-  sources = [
-    "component-server-setup.ts",
-    "directives.ts",
-    "get-stylesheet.ts",
-    "set-css-property.ts",
-  ]
-
-  deps = [
-    "../core/common:bundle",
-    "../core/root:bundle",
-    "../theme_support:bundle",
-    "../third_party/lit-html:bundle",
-  ]
-}
-
-devtools_entrypoint("bundle") {
-  entrypoint = "component_helpers.ts"
-
-  deps = [ ":component_helpers" ]
-}

front_end/inline_editor/BUILD.gn

@@ -26,7 +26,6 @@ devtools_module("inline_editor") {
   ]
 
   deps = [
-    "../component_helpers:bundle",
     "../components:bundle",
     "../core/common:bundle",
     "../core/i18n:bundle",
@@ -36,6 +35,7 @@ devtools_module("inline_editor") {
     "../models/text_utils:bundle",
     "../panels/css_overview:bundle",
     "../third_party/lit-html:bundle",
+    "../ui/components/helpers:bundle",
     "../ui/legacy:bundle",
   ]
 

front_end/inline_editor/CSSAngleEditor.ts

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../component_helpers/component_helpers.js';
 import * as Common from '../core/common/common.js';
 import * as LitHtml from '../third_party/lit-html/lit-html.js';
+import * as ComponentHelpers from '../ui/components/helpers/helpers.js';
 
 import {Angle, AngleUnit, get2DTranslationsForAngle, getAngleFromRadians, getNewAngleFromEvent, getRadiansFromAngle} from './CSSAngleUtils.js';
 

front_end/inline_editor/ColorSwatch.ts

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../component_helpers/component_helpers.js';
 import * as Common from '../core/common/common.js';
 import * as i18n from '../core/i18n/i18n.js';
 import * as LitHtml from '../third_party/lit-html/lit-html.js';
+import * as ComponentHelpers from '../ui/components/helpers/helpers.js';
 
 const UIStrings = {
   /**

front_end/panels/elements/LayoutPane.ts

@@ -5,10 +5,10 @@
 import './NodeText.js';
 import '../../ui/components/survey_link/survey_link.js';
 
-import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as LitHtml from '../../third_party/lit-html/lit-html.js';
+import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
 import * as SurveyLink from '../../ui/components/survey_link/survey_link.js';
 
 import {BooleanSetting, EnumSetting, LayoutElement, Setting} from './LayoutPaneUtils.js';

front_end/ui/components/data_grid/BUILD.gn

@@ -15,12 +15,12 @@ devtools_module("data_grid") {
     "DataGridUtils.ts",
   ]
   deps = [
-    "../../../component_helpers:bundle",
     "../../../core/common:bundle",
     "../../../core/host:bundle",
     "../../../core/platform:bundle",
     "../../../models/text_utils:bundle",
     "../../../third_party/lit-html:bundle",
+    "../../../ui/components/helpers:bundle",
     "../../../ui/components/render_coordinator:bundle",
     "../../../ui/legacy:bundle",
   ]

front_end/ui/components/data_grid/DataGrid.ts

@@ -2,11 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../component_helpers/component_helpers.js';
 import * as Host from '../../../core/host/host.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as LitHtml from '../../../third_party/lit-html/lit-html.js';
 import * as UI from '../../legacy/legacy.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
 import * as Coordinator from '../render_coordinator/render_coordinator.js';
 
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();

front_end/ui/components/docs/color_swatch/basic.ts

@@ -3,8 +3,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as InlineEditor from '../../../../inline_editor/inline_editor.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 

front_end/ui/components/docs/color_swatch/change-color.ts

@@ -3,8 +3,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as InlineEditor from '../../../../inline_editor/inline_editor.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 const container = document.querySelector('#container');
 const picker = document.querySelector<HTMLInputElement>('#picker');

front_end/ui/components/docs/data_grid/BUILD.gn

@@ -19,8 +19,8 @@ ts_library("ts") {
 
   deps = [
     "../../../../../test/unittests/front_end/helpers",
-    "../../../../component_helpers:bundle",
     "../../../../ui/components/data_grid:bundle",
+    "../../../../ui/components/helpers:bundle",
   ]
 }
 

front_end/ui/components/docs/data_grid/adding-data.ts

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as DataGrid from '../../data_grid/data_grid.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 

front_end/ui/components/docs/data_grid/basic.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as DataGrid from '../../data_grid/data_grid.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();

front_end/ui/components/docs/data_grid/empty.ts

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as DataGrid from '../../data_grid/data_grid.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 

front_end/ui/components/docs/data_grid/hide-cols.ts

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as DataGrid from '../../data_grid/data_grid.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 

front_end/ui/components/docs/data_grid/large-data.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as DataGrid from '../../data_grid/data_grid.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();

front_end/ui/components/docs/data_grid/sticky-headers.ts

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as DataGrid from '../../data_grid/data_grid.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 

front_end/ui/components/docs/data_grid/three_columns.ts

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as DataGrid from '../../data_grid/data_grid.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 

front_end/ui/components/docs/data_grid_controller/BUILD.gn

@@ -15,9 +15,9 @@ ts_library("ts") {
 
   deps = [
     "../../../../../test/unittests/front_end/helpers",
-    "../../../../component_helpers:bundle",
     "../../../../models/text_utils:bundle",
     "../../../../ui/components/data_grid:bundle",
+    "../../../../ui/components/helpers:bundle",
   ]
 }
 

front_end/ui/components/docs/data_grid_controller/basic.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as EnvironmentHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as DataGrid from '../../data_grid/data_grid.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await EnvironmentHelpers.initializeGlobalVars();
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/data_grid_controller/custom-context-menu-items.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as EnvironmentHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as DataGrid from '../../data_grid/data_grid.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await EnvironmentHelpers.initializeGlobalVars();
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/data_grid_controller/filter.ts

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as DataGrid from '../../data_grid/data_grid.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 

front_end/ui/components/docs/elements_breadcrumbs/basic.ts

@@ -2,8 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as Elements from '../../../../panels/elements/elements.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+
 import {makeCrumb} from './helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/elements_breadcrumbs/scroll-to-active-element.ts

@@ -2,8 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as Elements from '../../../../panels/elements/elements.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+
 import {makeCrumb} from './helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/elements_breadcrumbs/scroll.ts

@@ -2,8 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as Elements from '../../../../panels/elements/elements.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+
 import {makeCrumb} from './helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/flexbox_editor/BUILD.gn

@@ -11,8 +11,8 @@ ts_library("ts") {
 
   deps = [
     "../../../../../test/unittests/front_end/helpers",
-    "../../../../component_helpers:bundle",
     "../../../../panels/elements:bundle",
+    "../../../../ui/components/helpers:bundle",
   ]
 }
 

front_end/ui/components/docs/flexbox_editor/basic.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as Elements from '../../../../panels/elements/elements.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();

front_end/ui/components/docs/icon_button/BUILD.gn

@@ -11,7 +11,7 @@ ts_library("ts") {
 
   deps = [
     "../../../../../test/unittests/front_end/helpers",
-    "../../../../component_helpers:bundle",
+    "../../../../ui/components/helpers:bundle",
     "../../../../ui/components/icon_button:bundle",
   ]
 }

front_end/ui/components/docs/icon_button/basic.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 import * as IconButton from '../../icon_button/icon_button.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/icon_component/BUILD.gn

@@ -10,7 +10,7 @@ ts_library("ts") {
   sources = [ "basic.ts" ]
 
   deps = [
-    "../../../../component_helpers:bundle",
+    "../../../../ui/components/helpers:bundle",
     "../../../../ui/components/icon_button:bundle",
   ]
 }

front_end/ui/components/docs/icon_component/basic.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 import * as IconButton from '../../icon_button/icon_button.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/issue_counter/BUILD.gn

@@ -11,9 +11,9 @@ ts_library("ts") {
 
   deps = [
     "../../../../../test/unittests/front_end/helpers",
-    "../../../../component_helpers:bundle",
     "../../../../models/issues_manager:bundle",
     "../../../../panels/console_counters:bundle",
+    "../../../../ui/components/helpers:bundle",
   ]
 }
 

front_end/ui/components/docs/issue_counter/basic.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 import type * as ConsoleCountersModule from '../../../../panels/console_counters/console_counters.js';
 import type * as IssuesManager from '../../../../models/issues_manager/issues_manager.js';
 

front_end/ui/components/docs/layout_pane/basic.ts

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as Common from '../../../../core/common/common.js';
 import * as Elements from '../../../../panels/elements/elements.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 

front_end/ui/components/docs/linear_memory_inspector/BUILD.gn

@@ -10,7 +10,7 @@ ts_library("ts") {
   sources = [ "basic.ts" ]
 
   deps = [
-    "../../../../component_helpers:bundle",
+    "../../../../ui/components/helpers:bundle",
     "../../../../ui/components/linear_memory_inspector:bundle",
   ]
 }

front_end/ui/components/docs/linear_memory_inspector/basic.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 import * as LinearMemoryInspector from '../../linear_memory_inspector/linear_memory_inspector.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/linkifier/BUILD.gn

@@ -10,7 +10,7 @@ ts_library("ts") {
   sources = [ "simple-url.ts" ]
 
   deps = [
-    "../../../../component_helpers:bundle",
+    "../../../../ui/components/helpers:bundle",
     "../../../../ui/components/linkifier:bundle",
   ]
 }

front_end/ui/components/docs/linkifier/simple-url.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 import * as Linkifier from '../../linkifier/linkifier.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/markdown_image/BUILD.gn

@@ -7,7 +7,7 @@ ts_library("ts") {
 
   deps = [
     "../../../../../test/unittests/front_end/helpers",
-    "../../../../component_helpers:bundle",
+    "../../../../ui/components/helpers:bundle",
     "../../../../ui/components/markdown_view:bundle",
   ]
 }

front_end/ui/components/docs/markdown_image/basic.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 import * as MarkdownView from '../../markdown_view/markdown_view.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/markdown_link/BUILD.gn

@@ -7,7 +7,7 @@ ts_library("ts") {
 
   deps = [
     "../../../../../test/unittests/front_end/helpers",
-    "../../../../component_helpers:bundle",
+    "../../../../ui/components/helpers:bundle",
     "../../../../ui/components/markdown_view:bundle",
   ]
 }

front_end/ui/components/docs/markdown_link/basic.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 import * as MarkdownView from '../../markdown_view/markdown_view.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/markdown_view/BUILD.gn

@@ -7,8 +7,8 @@ ts_library("ts") {
 
   deps = [
     "../../../../../test/unittests/front_end/helpers",
-    "../../../../component_helpers:bundle",
     "../../../../third_party/marked:bundle",
+    "../../../../ui/components/helpers:bundle",
     "../../../../ui/components/markdown_view:bundle",
   ]
 }

front_end/ui/components/docs/markdown_view/basic.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as Marked from '../../../../third_party/marked/marked.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 import * as MarkdownView from '../../markdown_view/markdown_view.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/report/BUILD.gn

@@ -10,8 +10,8 @@ ts_library("ts") {
   sources = [ "basic.ts" ]
 
   deps = [
-    "../../../../component_helpers:bundle",
     "../../../../third_party/lit-html:bundle",
+    "../../../../ui/components/helpers:bundle",
     "../../../../ui/components/report_view:bundle",
   ]
 }

front_end/ui/components/docs/report/basic.ts

@@ -4,8 +4,8 @@
 
 import '../../report_view/report_view.js';
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as LitHtml from '../../../../third_party/lit-html/lit-html.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 import type * as ReportView from '../../report_view/report_view.js';
 

front_end/ui/components/docs/survey_link/BUILD.gn

@@ -11,8 +11,8 @@ ts_library("ts") {
 
   deps = [
     "../../../../../test/unittests/front_end/helpers",
-    "../../../../component_helpers:bundle",
     "../../../../core/common:bundle",
+    "../../../../ui/components/helpers:bundle",
     "../../../../ui/components/survey_link:bundle",
   ]
 }

front_end/ui/components/docs/survey_link/basic.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as Common from '../../../../core/common/common.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 import * as SurveyLink from '../../survey_link/survey_link.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/theme_colors/BUILD.gn

@@ -10,8 +10,8 @@ ts_library("ts") {
   sources = [ "basic.ts" ]
 
   deps = [
-    "../../../../component_helpers:bundle",
     "../../../../third_party/lit-html:bundle",
+    "../../../../ui/components/helpers:bundle",
   ]
 }
 

front_end/ui/components/docs/theme_colors/basic.ts

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as LitHtml from '../../../../third_party/lit-html/lit-html.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 

front_end/ui/components/docs/tree_outline/BUILD.gn

@@ -16,8 +16,8 @@ ts_library("ts") {
 
   deps = [
     "../../../../../test/unittests/front_end/helpers",
-    "../../../../component_helpers:bundle",
     "../../../../third_party/lit-html:bundle",
+    "../../../../ui/components/helpers:bundle",
     "../../../../ui/components/tree_outline:bundle",
   ]
 }

front_end/ui/components/docs/tree_outline/basic.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 import * as TreeOutline from '../../tree_outline/tree_outline.js';
 
 import {belgraveHouse, officesAndProductsData} from './sample-data.js';

front_end/ui/components/docs/tree_outline/custom-renderers.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as LitHtml from '../../../../third_party/lit-html/lit-html.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 import * as TreeOutline from '../../tree_outline/tree_outline.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/tree_outline/lazy-children.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 import * as TreeOutline from '../../tree_outline/tree_outline.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/docs/webvitals/BUILD.gn

@@ -11,8 +11,8 @@ ts_library("ts") {
 
   deps = [
     "../../../../../test/unittests/front_end/helpers",
-    "../../../../component_helpers:bundle",
     "../../../../timeline:bundle",
+    "../../../../ui/components/helpers:bundle",
     "../../../../ui/legacy:bundle",
   ]
 }

front_end/ui/components/docs/webvitals/webvitals.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../../../component_helpers/component_helpers.js';
 import * as Timeline from '../../../../timeline/timeline.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 
 await FrontendHelpers.initializeGlobalVars();
 await ComponentHelpers.ComponentServerSetup.setup();

front_end/ui/components/helpers/BUILD.gn

@@ -0,0 +1,30 @@
+# Copyright 2020 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.
+
+import("../../../../scripts/build/ninja/devtools_entrypoint.gni")
+import("../../../../scripts/build/ninja/devtools_module.gni")
+import("../../../../scripts/build/ninja/devtools_pre_built.gni")
+import("../../../../third_party/typescript/typescript.gni")
+
+devtools_module("helpers") {
+  sources = [
+    "component-server-setup.ts",
+    "directives.ts",
+    "get-stylesheet.ts",
+    "set-css-property.ts",
+  ]
+
+  deps = [
+    "../../../core/common:bundle",
+    "../../../core/root:bundle",
+    "../../../theme_support:bundle",
+    "../../../third_party/lit-html:bundle",
+  ]
+}
+
+devtools_entrypoint("bundle") {
+  entrypoint = "helpers.ts"
+
+  deps = [ ":helpers" ]
+}

front_end/ui/components/helpers/component-server-setup.ts

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../core/common/common.js';
-import * as Root from '../core/root/root.js';
-import * as ThemeSupport from '../theme_support/theme_support.js';
+import * as Common from '../../../core/common/common.js';
+import * as Root from '../../../core/root/root.js';
+import * as ThemeSupport from '../../../theme_support/theme_support.js';
 
 import {CSS_RESOURCES_TO_LOAD_INTO_RUNTIME} from './get-stylesheet.js';
 

front_end/ui/components/helpers/directives.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as LitHtml from '../third_party/lit-html/lit-html.js';
+import * as LitHtml from '../../../third_party/lit-html/lit-html.js';
 
 /**
  * Provides a hook to get a callback when a LitHtml node is rendered into the DOM:

front_end/ui/components/helpers/get-stylesheet.ts

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../core/root/root.js';
-import * as ThemeSupport from '../theme_support/theme_support.js';
+import * as Root from '../../../core/root/root.js';
+import * as ThemeSupport from '../../../theme_support/theme_support.js';
 
 const sheetsCache = new Map<string, {sheets: CSSStyleSheet[], enableLegacyPatching: boolean}>();
 

front_end/ui/components/linear_memory_inspector/BUILD.gn

@@ -20,11 +20,11 @@ devtools_module("linear_memory_inspector") {
   ]
 
   deps = [
-    "../../../component_helpers:bundle",
     "../../../components:bundle",
     "../../../core/common:bundle",
     "../../../core/i18n:bundle",
     "../../../third_party/lit-html:bundle",
+    "../../../ui/components/helpers:bundle",
     "../../../ui/components/icon_button:bundle",
   ]
 

front_end/ui/components/linear_memory_inspector/LinearMemoryValueInterpreter.ts

@@ -5,8 +5,8 @@
 import './ValueInterpreterDisplay.js';
 import './ValueInterpreterSettings.js';
 
-import * as ComponentHelpers from '../../../component_helpers/component_helpers.js';
 import * as LitHtml from '../../../third_party/lit-html/lit-html.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
 import * as IconButton from '../icon_button/icon_button.js';
 
 import type {ValueDisplayData} from './ValueInterpreterDisplay.js';

front_end/ui/components/linear_memory_inspector/LinearMemoryViewer.ts

@@ -1,8 +1,8 @@
 // Copyright (c) 2020 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.
-import * as ComponentHelpers from '../../../component_helpers/component_helpers.js';
 import * as LitHtml from '../../../third_party/lit-html/lit-html.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
 
 import {toHexString} from './LinearMemoryInspectorUtils.js';
 

front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplay.ts

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../component_helpers/component_helpers.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as LitHtml from '../../../third_party/lit-html/lit-html.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
 import * as IconButton from '../icon_button/icon_button.js';
 
 import {Endianness, format, getDefaultValueTypeMapping, getPointerAddress, isNumber, isPointer, isValidMode, VALUE_TYPE_MODE_LIST, ValueType, ValueTypeMode, valueTypeModeToLocalizedString, valueTypeToLocalizedString} from './ValueInterpreterDisplayUtils.js';

front_end/ui/components/markdown_view/BUILD.gn

@@ -14,12 +14,12 @@ devtools_module("markdown_view") {
     "MarkdownView.ts",
   ]
   deps = [
-    "../../../component_helpers:bundle",
     "../../../core/common:bundle",
     "../../../core/host:bundle",
     "../../../core/platform:bundle",
     "../../../models/text_utils:bundle",
     "../../../third_party/lit-html:bundle",
+    "../../../ui/components/helpers:bundle",
     "../../../ui/components/icon_button:bundle",
     "../../../ui/components/render_coordinator:bundle",
     "../../../ui/legacy:bundle",

front_end/ui/components/tree_outline/BUILD.gn

@@ -11,9 +11,9 @@ devtools_module("tree_outline") {
     "TreeOutlineUtils.ts",
   ]
   deps = [
-    "../../../component_helpers:bundle",
     "../../../core/platform:bundle",
     "../../../third_party/lit-html:bundle",
+    "../../../ui/components/helpers:bundle",
     "../../../ui/components/render_coordinator:bundle",
   ]
 

front_end/ui/components/tree_outline/TreeOutline.ts

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../component_helpers/component_helpers.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as LitHtml from '../../../third_party/lit-html/lit-html.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
 import * as Coordinator from '../render_coordinator/render_coordinator.js';
 
 import {findNextNodeForTreeOutlineKeyboardNavigation, getNodeChildren, getPathToTreeNode, isExpandableNode, trackDOMNodeToTreeNode, TreeNode, TreeNodeWithChildren} from './TreeOutlineUtils.js';

test/unittests/front_end/component_helpers/BUILD.gn

@@ -5,8 +5,8 @@ ts_library("component_helpers") {
   sources = [ "component_helpers_test.ts" ]
 
   deps = [
-    "../../../../front_end/component_helpers:bundle",
     "../../../../front_end/theme_support:bundle",
     "../../../../front_end/third_party/lit-html:bundle",
+    "../../../../front_end/ui/components/helpers:bundle",
   ]
 }

test/unittests/front_end/component_helpers/component_helpers_test.ts

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../../front_end/component_helpers/component_helpers.js';
 import * as ThemeSupport from '../../../../front_end/theme_support/theme_support.js';
 import * as LitHtml from '../../../../front_end/third_party/lit-html/lit-html.js';
+import * as ComponentHelpers from '../../../../front_end/ui/components/helpers/helpers.js';
 
 const {assert} = chai;
 

test/unittests/front_end/test_setup/BUILD.gn

@@ -5,9 +5,9 @@ ts_library("test_setup") {
   sources = [ "test_setup.ts" ]
 
   deps = [
-    "../../../../front_end/component_helpers:bundle",
     "../../../../front_end/core/common:bundle",
     "../../../../front_end/theme_support:bundle",
+    "../../../../front_end/ui/components/helpers:bundle",
     "../helpers",
   ]
 }

test/unittests/front_end/test_setup/test_setup.ts

@@ -6,10 +6,10 @@
  * This file is automatically loaded and run by Karma because it automatically
  * loads and injects all *.js files it finds.
  */
-import * as ComponentHelpers from '../../../../front_end/component_helpers/component_helpers.js';
 import * as Common from '../../../../front_end/core/common/common.js';
 import * as Root from '../../../../front_end/core/root/root.js';
 import * as ThemeSupport from '../../../../front_end/theme_support/theme_support.js';
+import * as ComponentHelpers from '../../../../front_end/ui/components/helpers/helpers.js';
 import {resetTestDOM} from '../helpers/DOMHelpers.js';
 
 beforeEach(resetTestDOM);