refactor: remove DevTools legacy UI patching (#40409)

* refactor: remove DevTools legacy UI patching

* chore: update patches

---------

Co-authored-by: PatchUp <73610968+patchup[bot]@users.noreply.github.com>

patches/devtools_frontend/.patches

@@ -1 +1 @@
-fix_expose_globals_to_allow_patching_devtools_dock.patch
+chore_expose_ui_to_allow_electron_to_set_dock_side.patch

patches/devtools_frontend/chore_expose_ui_to_allow_electron_to_set_dock_side.patch

@@ -0,0 +1,24 @@
+From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
+From: Shelley Vohr <[email protected]>
+Date: Wed, 25 Oct 2023 11:48:21 -0400
+Subject: chore: expose UI to allow Electron to set dock side
+
+This patch allows Electron to set the dock side via `webContents.openDevTools({ mode })`.
+
+It also allows us to test certain aspects of devtools extensions. We should look for a way
+to handle this without patching, but this is fairly clean for now and no longer requires
+patching legacy devtools code.
+
+diff --git a/front_end/entrypoints/main/MainImpl.ts b/front_end/entrypoints/main/MainImpl.ts
+index 23fd311406cae02bf95b06a5241ed7d3df3ba28d..b4b681522fc02e939bf6e24c15992c6c750ffbf4 100644
+--- a/front_end/entrypoints/main/MainImpl.ts
++++ b/front_end/entrypoints/main/MainImpl.ts
+@@ -793,6 +793,8 @@ export class MainImpl {
+ globalThis.Main = globalThis.Main || {};
+ // @ts-ignore Exported for Tests.js
+ globalThis.Main.Main = MainImpl;
++// @ts-ignore Exported for Electron
++globalThis.EUI = UI || {};
+ 
+ let zoomActionDelegateInstance: ZoomActionDelegate;
+ 

patches/devtools_frontend/fix_expose_globals_to_allow_patching_devtools_dock.patch

@@ -1,319 +0,0 @@
-From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
-From: Shelley Vohr <[email protected]>
-Date: Wed, 9 Feb 2022 10:55:54 +0100
-Subject: fix: expose globals to allow patching Devtools dock
-
-Electron calls into UI.DockController.instance().setDockSide(side) in
-order to allow users to set the devtools dock position via
-webContents.openDevTools({ mode }). In https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3310870
-the globals which we used to enable this were removed, and so we need to
-re-expose them to fix this broken functionality. We should look to
-upstream a more durable approach to allowing us to do this, at which
-point this patch can be removed.
-
-diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni
-index 884afd2a45b4afb68b3b88124eecb4c674dad7c1..de3ed466805c5cf0badb1c98775f9c39c65aa421 100644
---- a/config/gni/devtools_grd_files.gni
-+++ b/config/gni/devtools_grd_files.gni
-@@ -658,6 +658,7 @@ grd_files_release_sources = [
-   "front_end/ui/legacy/components/source_frame/source_frame.js",
-   "front_end/ui/legacy/components/utils/utils-legacy.js",
-   "front_end/ui/legacy/components/utils/utils.js",
-+  "front_end/ui/legacy/legacy-legacy.js",
-   "front_end/ui/legacy/legacy.js",
-   "front_end/ui/legacy/theme_support/theme_support.js",
-   "front_end/ui/legacy/utils/utils.js",
-diff --git a/front_end/entrypoints/shell/BUILD.gn b/front_end/entrypoints/shell/BUILD.gn
-index 9b7c4251dde44c7e2ce76637515bb193a63427d8..76c2f924967df85d01ed41616609273adfad1342 100644
---- a/front_end/entrypoints/shell/BUILD.gn
-+++ b/front_end/entrypoints/shell/BUILD.gn
-@@ -30,6 +30,7 @@ devtools_entrypoint("shell") {
-     "../../ui/legacy/components/perf_ui:meta",
-     "../../ui/legacy/components/quick_open:meta",
-     "../../ui/legacy/components/source_frame:meta",
-+    "../../ui/legacy:legacy",
-   ]
- 
-   visibility = [
-diff --git a/front_end/entrypoints/shell/shell.ts b/front_end/entrypoints/shell/shell.ts
-index b1f0db6afb29188e4e69c5dd899523e836f9d253..4290e626fd875a50740bbd668ca11a4fef6ef8b5 100644
---- a/front_end/entrypoints/shell/shell.ts
-+++ b/front_end/entrypoints/shell/shell.ts
-@@ -18,6 +18,7 @@ import '../../models/logs/logs-meta.js';
- import '../main/main-meta.js';
- import '../../ui/legacy/components/perf_ui/perf_ui-meta.js';
- import '../../ui/legacy/components/quick_open/quick_open-meta.js';
-+import '../../ui/legacy/legacy-legacy.js';
- import '../../core/sdk/sdk-meta.js';
- import '../../ui/legacy/components/source_frame/source_frame-meta.js';
- import '../../panels/console_counters/console_counters-meta.js';
-diff --git a/front_end/ui/legacy/BUILD.gn b/front_end/ui/legacy/BUILD.gn
-index 2985b61e9b346709022202b3858a8138003b4439..f4fc031e4ccb988731913f0b3603a3169c54a57f 100644
---- a/front_end/ui/legacy/BUILD.gn
-+++ b/front_end/ui/legacy/BUILD.gn
-@@ -179,3 +179,15 @@ devtools_entrypoint("bundle") {
- 
-   visibility += devtools_ui_legacy_visibility
- }
-+
-+devtools_entrypoint("legacy") {
-+  entrypoint = "legacy-legacy.ts"
-+
-+  deps = [ ":bundle" ]
-+
-+  visibility = [
-+    "../..:legacy_entrypoints",
-+    "../../legacy_test_runner/*",
-+    "../../entrypoints/shell/*",
-+  ]
-+}
-diff --git a/front_end/ui/legacy/legacy-legacy.ts b/front_end/ui/legacy/legacy-legacy.ts
-new file mode 100644
-index 0000000000000000000000000000000000000000..9ca383ccdb044f22fe75c8f9326cb0c75ac3a19a
---- /dev/null
-+++ b/front_end/ui/legacy/legacy-legacy.ts
-@@ -0,0 +1,244 @@
-+// Copyright 2019 The Chromium Authors. All rights reserved.
-+// Use of this source code is governed by a BSD-style license that can be
-+// found in the LICENSE file.
-+
-+// @ts-nocheck
-+
-+import * as UIModule from './legacy.js';
-+
-+self.UI = self.UI || {};
-+UI = UI || {};
-+
-+/** @constructor */
-+UI.DockController = UIModule.DockController.DockController;
-+
-+/** @enum {symbol} */
-+UI.DockController.Events = UIModule.DockController.Events;
-+
-+/** @constructor */
-+UI.DockController.ToggleDockActionDelegate = UIModule.DockController.ToggleDockActionDelegate;
-+
-+/** @constructor */
-+UI.DockController.CloseButtonProvider = UIModule.DockController.CloseButtonProvider;
-+
-+/** @constructor */
-+UI.Context = UIModule.Context.Context;
-+
-+/** @interface */
-+UI.ContextFlavorListener = UIModule.ContextFlavorListener.ContextFlavorListener;
-+
-+/** @constructor */
-+UI.ContextMenu = UIModule.ContextMenu.ContextMenu;
-+
-+/**
-+ * @interface
-+ */
-+UI.ContextMenu.Provider = UIModule.ContextMenu.Provider;
-+
-+/** @constructor */
-+UI.Dialog = UIModule.Dialog.Dialog;
-+
-+/** @constructor */
-+UI.EmptyWidget = UIModule.EmptyWidget.EmptyWidget;
-+
-+/** @constructor */
-+UI.Fragment = UIModule.Fragment.Fragment;
-+
-+UI.html = UIModule.Fragment.html;
-+
-+UI.Geometry = {};
-+
-+/**
-+ * @constructor
-+ */
-+UI.Geometry.Vector = UIModule.Geometry.Vector;
-+
-+/**
-+ * @constructor
-+ */
-+UI.Geometry.CubicBezier = UIModule.Geometry.CubicBezier;
-+
-+/**
-+ * @constructor
-+ */
-+UI.Geometry.EulerAngles = UIModule.Geometry.EulerAngles;
-+
-+/**
-+ * @param {!UIModule.Geometry.Vector} u
-+ * @param {!UIModule.Geometry.Vector} v
-+ * @return {number}
-+ */
-+UI.Geometry.scalarProduct = UIModule.Geometry.scalarProduct;
-+
-+/**
-+ * @param {!UIModule.Geometry.Vector} u
-+ * @param {!UIModule.Geometry.Vector} v
-+ * @return {!UIModule.Geometry.Vector}
-+ */
-+UI.Geometry.crossProduct = UIModule.Geometry.crossProduct;
-+
-+/**
-+ * @param {!UIModule.Geometry.Vector} u
-+ * @param {!UIModule.Geometry.Vector} v
-+ * @return {number}
-+ */
-+UI.Geometry.calculateAngle = UIModule.Geometry.calculateAngle;
-+
-+/**
-+ * @param {number} deg
-+ * @return {number}
-+ */
-+UI.Geometry.degreesToRadians = UIModule.Geometry.degreesToRadians;
-+
-+/**
-+ * @param {number} rad
-+ * @return {number}
-+ */
-+UI.Geometry.radiansToDegrees = UIModule.Geometry.radiansToDegrees;
-+
-+/** @constructor */
-+UI.Size = UIModule.Geometry.Size;
-+
-+/** @constructor */
-+UI.GlassPane = UIModule.GlassPane.GlassPane;
-+
-+// Exported for layout tests.
-+UI.GlassPane._panes = UIModule.GlassPane.GlassPanePanes;
-+
-+/** @constructor */
-+UI.InspectorView = UIModule.InspectorView.InspectorView;
-+
-+/**
-+ * @implements {UI.ActionDelegate}
-+ */
-+UI.InspectorView.ActionDelegate = UIModule.InspectorView.ActionDelegate;
-+
-+/** @constructor */
-+UI.ListControl = UIModule.ListControl.ListControl;
-+
-+UI.ListMode = UIModule.ListControl.ListMode;
-+
-+/** @constructor */
-+UI.ListModel = UIModule.ListModel.ListModel;
-+
-+/** @constructor */
-+UI.Panel = UIModule.Panel.Panel;
-+
-+// For testing.
-+UI.panels = {};
-+
-+/** @constructor */
-+UI.SearchableView = UIModule.SearchableView.SearchableView;
-+
-+/**
-+ * @constructor
-+ */
-+UI.SearchableView.SearchConfig = UIModule.SearchableView.SearchConfig;
-+
-+/** @interface */
-+UI.Searchable = UIModule.SearchableView.Searchable;
-+
-+/**
-+ * @interface
-+ */
-+UI.SettingUI = UIModule.SettingsUI.SettingUI;
-+
-+/** @constructor */
-+UI.ShortcutRegistry = UIModule.ShortcutRegistry.ShortcutRegistry;
-+
-+UI.ShortcutRegistry.ForwardedShortcut = UIModule.ShortcutRegistry.ForwardedShortcut;
-+
-+/** @constructor */
-+UI.SoftContextMenu = UIModule.SoftContextMenu.SoftContextMenu;
-+
-+/** @constructor */
-+UI.SoftDropDown = UIModule.SoftDropDown.SoftDropDown;
-+
-+/** @constructor */
-+UI.SplitWidget = UIModule.SplitWidget.SplitWidget;
-+
-+/** @constructor */
-+UI.SuggestBox = UIModule.SuggestBox.SuggestBox;
-+
-+/** @constructor */
-+UI.TabbedPane = UIModule.TabbedPane.TabbedPane;
-+
-+/** @enum {symbol} */
-+UI.TabbedPane.Events = UIModule.TabbedPane.Events;
-+
-+/** @constructor */
-+UI.TextPrompt = UIModule.TextPrompt.TextPrompt;
-+
-+/** @constructor */
-+UI.Toolbar = UIModule.Toolbar.Toolbar;
-+
-+/** @constructor */
-+UI.ToolbarItem = UIModule.Toolbar.ToolbarItem;
-+
-+/** @interface */
-+UI.ToolbarItem.Provider = UIModule.Toolbar.Provider;
-+
-+/** @constructor */
-+UI.Tooltip = UIModule.Tooltip.Tooltip;
-+
-+// Exported for layout tests.
-+UI.Tooltip._symbol = UIModule.Tooltip.TooltipSymbol;
-+
-+/** @constructor */
-+UI.TreeOutline = UIModule.TreeOutline.TreeOutline;
-+
-+UI.TreeOutline.Events = UIModule.TreeOutline.Events;
-+
-+/** @constructor */
-+UI.TreeElement = UIModule.TreeOutline.TreeElement;
-+
-+/** @constructor */
-+UI.TreeOutlineInShadow = UIModule.TreeOutline.TreeOutlineInShadow;
-+
-+/** @interface */
-+UI.Renderer = UIModule.UIUtils.Renderer;
-+
-+UI.isBeingEdited = UIModule.UIUtils.isBeingEdited;
-+UI.isEditing = UIModule.UIUtils.isEditing;
-+UI.highlightRangesWithStyleClass = UIModule.UIUtils.highlightRangesWithStyleClass;
-+UI.applyDomChanges = UIModule.UIUtils.applyDomChanges;
-+UI.revertDomChanges = UIModule.UIUtils.revertDomChanges;
-+UI.beautifyFunctionName = UIModule.UIUtils.beautifyFunctionName;
-+
-+/** @interface */
-+UI.View = UIModule.View.View;
-+
-+/** @constructor */
-+UI.SimpleView = UIModule.View.SimpleView;
-+
-+/** @interface */
-+UI.ViewLocation = UIModule.View.ViewLocation;
-+
-+/** @interface */
-+UI.ViewLocationResolver = UIModule.View.ViewLocationResolver;
-+
-+/** @constructor */
-+UI.ViewManager = UIModule.ViewManager.ViewManager;
-+
-+/** @constructor */
-+UI.ViewManager._ContainerWidget = UIModule.ViewManager.ContainerWidget;
-+
-+/** @constructor */
-+UI.Widget = UIModule.Widget.Widget;
-+
-+/** @constructor */
-+UI.XLink = UIModule.XLink.XLink;
-+
-+/**
-+ * @implements {UI.ContextMenu.Provider}
-+ */
-+UI.XLink.ContextMenuProvider = UIModule.XLink.ContextMenuProvider;
-+
-+/** @type {!UIModule.Context.Context} */
-+self.UI.context = UIModule.Context.Context.instance();
-+
-+/**
-+ * @type {!UI.DockController}
-+ */
-+UI.dockController;
-+

shell/browser/ui/inspectable_web_contents.cc

@@ -605,7 +605,8 @@ void InspectableWebContents::LoadCompleted() {
     }
 #endif
     std::u16string javascript = base::UTF8ToUTF16(
-        "UI.DockController.instance().setDockSide(\"" + dock_state_ + "\");");
+        "EUI.DockController.DockController.instance().setDockSide(\"" +
+        dock_state_ + "\");");
     GetDevToolsWebContents()->GetPrimaryMainFrame()->ExecuteJavaScript(
         javascript, base::NullCallback());
   }

spec/extensions-spec.ts

@@ -573,10 +573,11 @@ describe('chrome extensions', () => {
 
           const showLastPanel = () => {
             // this is executed in the devtools context, where UI is a global
-            const { UI } = (window as any);
-            const tabs = UI.inspectorView.tabbedPane.tabs;
+            const { EUI } = (window as any);
+            const instance = EUI.InspectorView.InspectorView.instance();
+            const tabs = instance.tabbedPane.tabs;
             const lastPanelId = tabs[tabs.length - 1].id;
-            UI.inspectorView.showPanel(lastPanelId);
+            instance.showPanel(lastPanelId);
           };
           devToolsWebContents.executeJavaScript(`(${showLastPanel})()`, false).then(() => {
             showPanelTimeoutId = setTimeout(show, 100);

spec/webview-spec.ts

@@ -297,10 +297,11 @@ describe('<webview> tag', function () {
           const showPanelIntervalId = setInterval(function () {
             if (!webContents.isDestroyed() && webContents.devToolsWebContents) {
               webContents.devToolsWebContents.executeJavaScript('(' + function () {
-                const { UI } = (window as any);
-                const tabs = UI.inspectorView.tabbedPane.tabs;
+                const { EUI } = (window as any);
+                const instance = EUI.InspectorView.InspectorView.instance();
+                const tabs = instance.tabbedPane.tabs;
                 const lastPanelId: any = tabs[tabs.length - 1].id;
-                UI.inspectorView.showPanel(lastPanelId);
+                instance.showPanel(lastPanelId);
               }.toString() + ')()');
             } else {
               clearInterval(showPanelIntervalId);