Web Inspector: Add experimental feature to enable aggressive limits o…

…n the length of lines we let CodeMirror process/format

https://bugs.webkit.org/show_bug.cgi?id=251401
rdar://104840214

Reviewed by Devin Rousso and Justin Michaud.

In select cases, we are finding that Web Inspector is effectively unusable on some sites with many source files with
very longs lines of source code. The highlighting of very longs lines of code accounts for upwards of 30 seconds of
delay for very long lines of code. While we investigate further improvements we can make to solve this problem, we
are adding an experimental setting that enforces very low line limits for highlight, as well as for determining the
hovered token. These two changes will unblock developers encountering this issue when they enable the added experimental
setting.

* Source/WebInspectorUI/UserInterface/Base/Setting.js:
* Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTokenTrackingController.js:
(WI.CodeMirrorTokenTrackingController.prototype._updateHoveredTokenInfo):
* Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:
(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
* Source/WebInspectorUI/UserInterface/Views/TextEditor.js:
(WI.TextEditor):

Canonical link: https://commits.webkit.org/259603@main

Source/WebInspectorUI/UserInterface/Base/Setting.js

@@ -235,6 +235,7 @@ WI.settings = {
     experimentalAllowInspectingInspector: new WI.Setting("experimental-allow-inspecting-inspector", false),
     experimentalCSSSortPropertyNameAutocompletionByUsage: new WI.Setting("experimental-css-sort-property-name-autocompletion-by-usage", true),
     experimentalEnableNetworkEmulatedCondition: new WI.Setting("experimental-enable-network-emulated-condition", false),
+    experimentalLimitSourceCodeHighlighting: new WI.Setting("engineering-limit-source-code-highlighting", false),
 
     // Protocol
     protocolLogAsText: new WI.Setting("protocol-log-as-text", false),

Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTokenTrackingController.js

@@ -337,6 +337,9 @@ WI.CodeMirrorTokenTrackingController = class CodeMirrorTokenTrackingController e
     {
         // Get the position in the text and the token at that position.
         var position = this._codeMirror.coordsChar(mouseCoords);
+        if (WI.settings.experimentalLimitSourceCodeHighlighting.value && position.ch > 120)
+            return;
+
         var token = this._codeMirror.getTokenAt(position);
 
         if (!token || !token.type || !token.string) {

Source/WebInspectorUI/UserInterface/Views/CodeMirrorEditor.js

@@ -40,6 +40,9 @@ WI.CodeMirrorEditor = class CodeMirrorEditor
             tabSize: WI.settings.tabSize.value,
             lineWrapping: WI.settings.enableLineWrapping.value,
             showWhitespaceCharacters: WI.settings.showWhitespaceCharacters.value,
+            maxHighlightLength: WI.settings.experimentalLimitSourceCodeHighlighting.value ? 120 : 10000,
+            maxScanLineLength: WI.settings.experimentalLimitSourceCodeHighlighting.value ? 120 : 10000,
+            maxHighlightLineLength: WI.settings.experimentalLimitSourceCodeHighlighting.value ? 120 : 1000,
             ...options,
         });
 

Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js

@@ -414,6 +414,11 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
             experimentalSettingsView.addSeparator();
         }
 
+        let sourcesGroup = experimentalSettingsView.addGroup(WI.UIString("Sources:"));
+        sourcesGroup.addSetting(WI.settings.experimentalLimitSourceCodeHighlighting, WI.UIString("Limit syntax highlighting on long lines of code"));
+
+        experimentalSettingsView.addSeparator();
+
         let diagnosticsGroup = experimentalSettingsView.addGroup(WI.UIString("Diagnostics:", "Diagnostics: @ Experimental Settings", "Category label for experimental settings related to Web Inspector diagnostics."));
         diagnosticsGroup.addSetting(WI.settings.experimentalAllowInspectingInspector, WI.UIString("Allow Inspecting Web Inspector", "Allow Inspecting Web Inspector @ Experimental Settings", "Label for setting that allows the user to inspect the Web Inspector user interface."));
         experimentalSettingsView.addSeparator();
@@ -442,6 +447,8 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
         if (hasNetworkEmulatedCondition)
             listenForChange(WI.settings.experimentalEnableNetworkEmulatedCondition);
 
+        listenForChange(WI.settings.experimentalLimitSourceCodeHighlighting);
+
         this._createReferenceLink(experimentalSettingsView);
 
         this.addSettingsView(experimentalSettingsView);