diff --git a/config/gni/all_devtools_modules.gni b/config/gni/all_devtools_modules.gni
index 5b040f0814..aa0ba7f754 100644
--- a/config/gni/all_devtools_modules.gni
+++ b/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",
diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni
index e572ac8e71..cc0a680c92 100644
--- a/config/gni/devtools_grd_files.gni
+++ b/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",
diff --git a/config/gni/devtools_module_entrypoints.gni b/config/gni/devtools_module_entrypoints.gni
index de21dcdc8a..04d89fd7ba 100644
--- a/config/gni/devtools_module_entrypoints.gni
+++ b/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",
diff --git a/front_end/BUILD.gn b/front_end/BUILD.gn
index 7fe5919555..70f70a06d9 100644
--- a/front_end/BUILD.gn
+++ b/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",
diff --git a/front_end/component_helpers/BUILD.gn b/front_end/component_helpers/BUILD.gn
deleted file mode 100644
index 91ace37685..0000000000
--- a/front_end/component_helpers/BUILD.gn
+++ /dev/null
@@ -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" ]
-}
diff --git a/front_end/inline_editor/BUILD.gn b/front_end/inline_editor/BUILD.gn
index 8416610442..868e8d3e33 100644
--- a/front_end/inline_editor/BUILD.gn
+++ b/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",
   ]
 
diff --git a/front_end/inline_editor/CSSAngleEditor.ts b/front_end/inline_editor/CSSAngleEditor.ts
index 26fd3a6a08..d62a14a8c9 100644
--- a/front_end/inline_editor/CSSAngleEditor.ts
+++ b/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';
 
diff --git a/front_end/inline_editor/ColorSwatch.ts b/front_end/inline_editor/ColorSwatch.ts
index 34f6dd6830..aa55c4e1fd 100644
--- a/front_end/inline_editor/ColorSwatch.ts
+++ b/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 = {
   /**
diff --git a/front_end/panels/elements/LayoutPane.ts b/front_end/panels/elements/LayoutPane.ts
index f48278a78d..b25d6365d5 100644
--- a/front_end/panels/elements/LayoutPane.ts
+++ b/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';
diff --git a/front_end/ui/components/data_grid/BUILD.gn b/front_end/ui/components/data_grid/BUILD.gn
index a51d9c63bb..49b080a66c 100644
--- a/front_end/ui/components/data_grid/BUILD.gn
+++ b/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",
   ]
diff --git a/front_end/ui/components/data_grid/DataGrid.ts b/front_end/ui/components/data_grid/DataGrid.ts
index f957d544a1..30219a57e8 100644
--- a/front_end/ui/components/data_grid/DataGrid.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/color_swatch/basic.ts b/front_end/ui/components/docs/color_swatch/basic.ts
index 597e4ac141..e7a0f0c588 100644
--- a/front_end/ui/components/docs/color_swatch/basic.ts
+++ b/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();
 
diff --git a/front_end/ui/components/docs/color_swatch/change-color.ts b/front_end/ui/components/docs/color_swatch/change-color.ts
index 2a0d243704..ec9d4f4c75 100644
--- a/front_end/ui/components/docs/color_swatch/change-color.ts
+++ b/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');
diff --git a/front_end/ui/components/docs/data_grid/BUILD.gn b/front_end/ui/components/docs/data_grid/BUILD.gn
index a6092d4cd2..10093b4ce0 100644
--- a/front_end/ui/components/docs/data_grid/BUILD.gn
+++ b/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",
   ]
 }
 
diff --git a/front_end/ui/components/docs/data_grid/adding-data.ts b/front_end/ui/components/docs/data_grid/adding-data.ts
index 854ca12839..6e432c50de 100644
--- a/front_end/ui/components/docs/data_grid/adding-data.ts
+++ b/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();
 
diff --git a/front_end/ui/components/docs/data_grid/basic.ts b/front_end/ui/components/docs/data_grid/basic.ts
index ff46eb54f4..dbbbdcc382 100644
--- a/front_end/ui/components/docs/data_grid/basic.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/data_grid/empty.ts b/front_end/ui/components/docs/data_grid/empty.ts
index aa22849ba2..8adb2e3f18 100644
--- a/front_end/ui/components/docs/data_grid/empty.ts
+++ b/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();
 
diff --git a/front_end/ui/components/docs/data_grid/hide-cols.ts b/front_end/ui/components/docs/data_grid/hide-cols.ts
index 7fa9c29e5d..5841c679b0 100644
--- a/front_end/ui/components/docs/data_grid/hide-cols.ts
+++ b/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();
 
diff --git a/front_end/ui/components/docs/data_grid/large-data.ts b/front_end/ui/components/docs/data_grid/large-data.ts
index 4a83232f8b..00ff5e1a2f 100644
--- a/front_end/ui/components/docs/data_grid/large-data.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/data_grid/sticky-headers.ts b/front_end/ui/components/docs/data_grid/sticky-headers.ts
index f8bbbca58f..aa9f0cbb9b 100644
--- a/front_end/ui/components/docs/data_grid/sticky-headers.ts
+++ b/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();
 
diff --git a/front_end/ui/components/docs/data_grid/three_columns.ts b/front_end/ui/components/docs/data_grid/three_columns.ts
index 5d5c195945..4fa38680d1 100644
--- a/front_end/ui/components/docs/data_grid/three_columns.ts
+++ b/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();
 
diff --git a/front_end/ui/components/docs/data_grid_controller/BUILD.gn b/front_end/ui/components/docs/data_grid_controller/BUILD.gn
index 81c6d8c64a..fada76a461 100644
--- a/front_end/ui/components/docs/data_grid_controller/BUILD.gn
+++ b/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",
   ]
 }
 
diff --git a/front_end/ui/components/docs/data_grid_controller/basic.ts b/front_end/ui/components/docs/data_grid_controller/basic.ts
index eb46163fe7..43494285a7 100644
--- a/front_end/ui/components/docs/data_grid_controller/basic.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/data_grid_controller/custom-context-menu-items.ts b/front_end/ui/components/docs/data_grid_controller/custom-context-menu-items.ts
index 71b10c8f64..d6f4b956b0 100644
--- a/front_end/ui/components/docs/data_grid_controller/custom-context-menu-items.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/data_grid_controller/filter.ts b/front_end/ui/components/docs/data_grid_controller/filter.ts
index d48e7a1d78..7b0595cd81 100644
--- a/front_end/ui/components/docs/data_grid_controller/filter.ts
+++ b/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();
 
diff --git a/front_end/ui/components/docs/elements_breadcrumbs/basic.ts b/front_end/ui/components/docs/elements_breadcrumbs/basic.ts
index acd47d3002..ad046cbe4b 100644
--- a/front_end/ui/components/docs/elements_breadcrumbs/basic.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/elements_breadcrumbs/scroll-to-active-element.ts b/front_end/ui/components/docs/elements_breadcrumbs/scroll-to-active-element.ts
index 6a4b22547f..7b4bc8105b 100644
--- a/front_end/ui/components/docs/elements_breadcrumbs/scroll-to-active-element.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/elements_breadcrumbs/scroll.ts b/front_end/ui/components/docs/elements_breadcrumbs/scroll.ts
index 54f6e0d0dc..4b9d0c92e9 100644
--- a/front_end/ui/components/docs/elements_breadcrumbs/scroll.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/flexbox_editor/BUILD.gn b/front_end/ui/components/docs/flexbox_editor/BUILD.gn
index c8a6a977e5..8812c13b8c 100644
--- a/front_end/ui/components/docs/flexbox_editor/BUILD.gn
+++ b/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",
   ]
 }
 
diff --git a/front_end/ui/components/docs/flexbox_editor/basic.ts b/front_end/ui/components/docs/flexbox_editor/basic.ts
index 12c09f82e1..9dba79b3b2 100644
--- a/front_end/ui/components/docs/flexbox_editor/basic.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/icon_button/BUILD.gn b/front_end/ui/components/docs/icon_button/BUILD.gn
index 7d004695f5..e875583338 100644
--- a/front_end/ui/components/docs/icon_button/BUILD.gn
+++ b/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",
   ]
 }
diff --git a/front_end/ui/components/docs/icon_button/basic.ts b/front_end/ui/components/docs/icon_button/basic.ts
index 7e007be502..ea3a36e12b 100644
--- a/front_end/ui/components/docs/icon_button/basic.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/icon_component/BUILD.gn b/front_end/ui/components/docs/icon_component/BUILD.gn
index 1c21d5d262..e14a48e87e 100644
--- a/front_end/ui/components/docs/icon_component/BUILD.gn
+++ b/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",
   ]
 }
diff --git a/front_end/ui/components/docs/icon_component/basic.ts b/front_end/ui/components/docs/icon_component/basic.ts
index f63146889a..69dd76137b 100644
--- a/front_end/ui/components/docs/icon_component/basic.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/issue_counter/BUILD.gn b/front_end/ui/components/docs/issue_counter/BUILD.gn
index 846eacbc03..dda2d23838 100644
--- a/front_end/ui/components/docs/issue_counter/BUILD.gn
+++ b/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",
   ]
 }
 
diff --git a/front_end/ui/components/docs/issue_counter/basic.ts b/front_end/ui/components/docs/issue_counter/basic.ts
index ddcd8830b4..471998e72b 100644
--- a/front_end/ui/components/docs/issue_counter/basic.ts
+++ b/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';
 
diff --git a/front_end/ui/components/docs/layout_pane/basic.ts b/front_end/ui/components/docs/layout_pane/basic.ts
index a7eacda308..ab0969043a 100644
--- a/front_end/ui/components/docs/layout_pane/basic.ts
+++ b/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();
 
diff --git a/front_end/ui/components/docs/linear_memory_inspector/BUILD.gn b/front_end/ui/components/docs/linear_memory_inspector/BUILD.gn
index 48df4cee26..5a4dfe9816 100644
--- a/front_end/ui/components/docs/linear_memory_inspector/BUILD.gn
+++ b/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",
   ]
 }
diff --git a/front_end/ui/components/docs/linear_memory_inspector/basic.ts b/front_end/ui/components/docs/linear_memory_inspector/basic.ts
index 3d54e27f79..3732257a38 100644
--- a/front_end/ui/components/docs/linear_memory_inspector/basic.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/linkifier/BUILD.gn b/front_end/ui/components/docs/linkifier/BUILD.gn
index 96d01b4b61..dbbdbff97f 100644
--- a/front_end/ui/components/docs/linkifier/BUILD.gn
+++ b/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",
   ]
 }
diff --git a/front_end/ui/components/docs/linkifier/simple-url.ts b/front_end/ui/components/docs/linkifier/simple-url.ts
index 807f070bcc..2da02a7329 100644
--- a/front_end/ui/components/docs/linkifier/simple-url.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/markdown_image/BUILD.gn b/front_end/ui/components/docs/markdown_image/BUILD.gn
index 1c93e72a5f..4c3b3f9176 100644
--- a/front_end/ui/components/docs/markdown_image/BUILD.gn
+++ b/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",
   ]
 }
diff --git a/front_end/ui/components/docs/markdown_image/basic.ts b/front_end/ui/components/docs/markdown_image/basic.ts
index 6b73533834..cc78993dfa 100644
--- a/front_end/ui/components/docs/markdown_image/basic.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/markdown_link/BUILD.gn b/front_end/ui/components/docs/markdown_link/BUILD.gn
index 022d844e04..e0076576e1 100644
--- a/front_end/ui/components/docs/markdown_link/BUILD.gn
+++ b/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",
   ]
 }
diff --git a/front_end/ui/components/docs/markdown_link/basic.ts b/front_end/ui/components/docs/markdown_link/basic.ts
index 3d7bd90927..9db6abbf77 100644
--- a/front_end/ui/components/docs/markdown_link/basic.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/markdown_view/BUILD.gn b/front_end/ui/components/docs/markdown_view/BUILD.gn
index 1d6ee4df01..c583192a77 100644
--- a/front_end/ui/components/docs/markdown_view/BUILD.gn
+++ b/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",
   ]
 }
diff --git a/front_end/ui/components/docs/markdown_view/basic.ts b/front_end/ui/components/docs/markdown_view/basic.ts
index 38a4a32ba8..ea357b6716 100644
--- a/front_end/ui/components/docs/markdown_view/basic.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/report/BUILD.gn b/front_end/ui/components/docs/report/BUILD.gn
index c812d53496..608d55c6f7 100644
--- a/front_end/ui/components/docs/report/BUILD.gn
+++ b/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",
   ]
 }
diff --git a/front_end/ui/components/docs/report/basic.ts b/front_end/ui/components/docs/report/basic.ts
index 2db11f966d..b619b7955b 100644
--- a/front_end/ui/components/docs/report/basic.ts
+++ b/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';
 
diff --git a/front_end/ui/components/docs/survey_link/BUILD.gn b/front_end/ui/components/docs/survey_link/BUILD.gn
index 24fc072b3a..4cc0a7d03a 100644
--- a/front_end/ui/components/docs/survey_link/BUILD.gn
+++ b/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",
   ]
 }
diff --git a/front_end/ui/components/docs/survey_link/basic.ts b/front_end/ui/components/docs/survey_link/basic.ts
index 908612a073..f67139339e 100644
--- a/front_end/ui/components/docs/survey_link/basic.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/theme_colors/BUILD.gn b/front_end/ui/components/docs/theme_colors/BUILD.gn
index bc01fb972c..2178e07b88 100644
--- a/front_end/ui/components/docs/theme_colors/BUILD.gn
+++ b/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",
   ]
 }
 
diff --git a/front_end/ui/components/docs/theme_colors/basic.ts b/front_end/ui/components/docs/theme_colors/basic.ts
index 6aa6905780..c38474352d 100644
--- a/front_end/ui/components/docs/theme_colors/basic.ts
+++ b/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();
 
diff --git a/front_end/ui/components/docs/tree_outline/BUILD.gn b/front_end/ui/components/docs/tree_outline/BUILD.gn
index ebf9ef6972..19d5505db1 100644
--- a/front_end/ui/components/docs/tree_outline/BUILD.gn
+++ b/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",
   ]
 }
diff --git a/front_end/ui/components/docs/tree_outline/basic.ts b/front_end/ui/components/docs/tree_outline/basic.ts
index 6fa05f8569..a8ddc3e73e 100644
--- a/front_end/ui/components/docs/tree_outline/basic.ts
+++ b/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';
diff --git a/front_end/ui/components/docs/tree_outline/custom-renderers.ts b/front_end/ui/components/docs/tree_outline/custom-renderers.ts
index 742491b0ed..54941f1e5a 100644
--- a/front_end/ui/components/docs/tree_outline/custom-renderers.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/tree_outline/lazy-children.ts b/front_end/ui/components/docs/tree_outline/lazy-children.ts
index 5bcc6bf839..da078d709c 100644
--- a/front_end/ui/components/docs/tree_outline/lazy-children.ts
+++ b/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();
diff --git a/front_end/ui/components/docs/webvitals/BUILD.gn b/front_end/ui/components/docs/webvitals/BUILD.gn
index cad4fad755..fd736be2c7 100644
--- a/front_end/ui/components/docs/webvitals/BUILD.gn
+++ b/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",
   ]
 }
diff --git a/front_end/ui/components/docs/webvitals/webvitals.ts b/front_end/ui/components/docs/webvitals/webvitals.ts
index 249309250c..dfafef2054 100644
--- a/front_end/ui/components/docs/webvitals/webvitals.ts
+++ b/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();
diff --git a/front_end/ui/components/helpers/BUILD.gn b/front_end/ui/components/helpers/BUILD.gn
new file mode 100644
index 0000000000..c9ea628d3f
--- /dev/null
+++ b/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" ]
+}
diff --git a/front_end/component_helpers/component-server-setup.ts b/front_end/ui/components/helpers/component-server-setup.ts
similarity index 83%
rename from front_end/component_helpers/component-server-setup.ts
rename to front_end/ui/components/helpers/component-server-setup.ts
index 100936679a..da5ce652ab 100644
--- a/front_end/component_helpers/component-server-setup.ts
+++ b/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';
 
diff --git a/front_end/component_helpers/directives.ts b/front_end/ui/components/helpers/directives.ts
similarity index 90%
rename from front_end/component_helpers/directives.ts
rename to front_end/ui/components/helpers/directives.ts
index 1089487d6a..ed0026f237 100644
--- a/front_end/component_helpers/directives.ts
+++ b/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:
diff --git a/front_end/component_helpers/get-stylesheet.ts b/front_end/ui/components/helpers/get-stylesheet.ts
similarity index 97%
rename from front_end/component_helpers/get-stylesheet.ts
rename to front_end/ui/components/helpers/get-stylesheet.ts
index e935c2554d..9297c96b5c 100644
--- a/front_end/component_helpers/get-stylesheet.ts
+++ b/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}>();
 
diff --git a/front_end/component_helpers/component_helpers.ts b/front_end/ui/components/helpers/helpers.ts
similarity index 100%
rename from front_end/component_helpers/component_helpers.ts
rename to front_end/ui/components/helpers/helpers.ts
diff --git a/front_end/component_helpers/set-css-property.ts b/front_end/ui/components/helpers/set-css-property.ts
similarity index 100%
rename from front_end/component_helpers/set-css-property.ts
rename to front_end/ui/components/helpers/set-css-property.ts
diff --git a/front_end/ui/components/linear_memory_inspector/BUILD.gn b/front_end/ui/components/linear_memory_inspector/BUILD.gn
index 3e78540158..94bedcba70 100644
--- a/front_end/ui/components/linear_memory_inspector/BUILD.gn
+++ b/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",
   ]
 
diff --git a/front_end/ui/components/linear_memory_inspector/LinearMemoryValueInterpreter.ts b/front_end/ui/components/linear_memory_inspector/LinearMemoryValueInterpreter.ts
index b03c369b6b..2c2e8d193e 100644
--- a/front_end/ui/components/linear_memory_inspector/LinearMemoryValueInterpreter.ts
+++ b/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';
diff --git a/front_end/ui/components/linear_memory_inspector/LinearMemoryViewer.ts b/front_end/ui/components/linear_memory_inspector/LinearMemoryViewer.ts
index 07b6053b11..aa1ada27a8 100644
--- a/front_end/ui/components/linear_memory_inspector/LinearMemoryViewer.ts
+++ b/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';
 
diff --git a/front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplay.ts b/front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplay.ts
index 25c82996bf..4104917a47 100644
--- a/front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplay.ts
+++ b/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';
diff --git a/front_end/ui/components/markdown_view/BUILD.gn b/front_end/ui/components/markdown_view/BUILD.gn
index 6c84a38dc1..83fdf21f5d 100644
--- a/front_end/ui/components/markdown_view/BUILD.gn
+++ b/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",
diff --git a/front_end/ui/components/tree_outline/BUILD.gn b/front_end/ui/components/tree_outline/BUILD.gn
index 6524778fe1..865610ad83 100644
--- a/front_end/ui/components/tree_outline/BUILD.gn
+++ b/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",
   ]
 
diff --git a/front_end/ui/components/tree_outline/TreeOutline.ts b/front_end/ui/components/tree_outline/TreeOutline.ts
index 767a86cbf8..b4b9d2139e 100644
--- a/front_end/ui/components/tree_outline/TreeOutline.ts
+++ b/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';
diff --git a/test/unittests/front_end/component_helpers/BUILD.gn b/test/unittests/front_end/component_helpers/BUILD.gn
index 661dd44970..a8ce9fcc18 100644
--- a/test/unittests/front_end/component_helpers/BUILD.gn
+++ b/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",
   ]
 }
diff --git a/test/unittests/front_end/component_helpers/component_helpers_test.ts b/test/unittests/front_end/component_helpers/component_helpers_test.ts
index 9f1b67d46f..15a6224c8b 100644
--- a/test/unittests/front_end/component_helpers/component_helpers_test.ts
+++ b/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;
 
diff --git a/test/unittests/front_end/test_setup/BUILD.gn b/test/unittests/front_end/test_setup/BUILD.gn
index 33cf019323..17dc5adca5 100644
--- a/test/unittests/front_end/test_setup/BUILD.gn
+++ b/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",
   ]
 }
diff --git a/test/unittests/front_end/test_setup/test_setup.ts b/test/unittests/front_end/test_setup/test_setup.ts
index c468bfd405..8a984876c5 100644
--- a/test/unittests/front_end/test_setup/test_setup.ts
+++ b/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);