[webkit-changes] [WebKit/WebKit] 218530: Web Inspector: Reorganize Web Inspector-scoped dev...

[Razvan Caliman - Apple]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: 218530454da476df1d7d2a2c20c5fd58e880b105
      https://github.com/WebKit/WebKit/commit/218530454da476df1d7d2a2c20c5fd58e880b105
  Author: Razvan Caliman <rcaliman at apple.com>
  Date:   2023-02-23 (Thu, 23 Feb 2023)

  Changed paths:
    M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
    M Source/WebInspectorUI/UserInterface/Base/Main.js
    A Source/WebInspectorUI/UserInterface/Controllers/DeviceSettingsManager.js
    M Source/WebInspectorUI/UserInterface/Main.html
    M Source/WebInspectorUI/UserInterface/Test.html
    M Source/WebInspectorUI/UserInterface/Views/Main.css
    A Source/WebInspectorUI/UserInterface/Views/OverrideDeviceSettingsPopover.css
    A Source/WebInspectorUI/UserInterface/Views/OverrideDeviceSettingsPopover.js
    M Source/WebInspectorUI/UserInterface/Views/OverrideUserPreferencesPopover.css
    M Source/WebInspectorUI/UserInterface/Views/OverrideUserPreferencesPopover.js
    A Source/WebInspectorUI/UserInterface/Views/SettingsPopover.css
    A Source/WebInspectorUI/UserInterface/Views/SettingsPopover.js

  Log Message:
  -----------
  Web Inspector: Reorganize Web Inspector-scoped device settings
https://bugs.webkit.org/show_bug.cgi?id=252440

Reviewed by Devin Rousso.

Reorganizes the device settings popover to show settings appropriate
to the inspected target. Reuses styles from the popover for user preferences overrides.

Settings are copied verbatim from `Main.js`, organized into groups,
and moved to the new `WI.OverrideDeviceSettingsPopover`. Labels are updated.

A new `WI.DeviceSettingsManager` is introduced to manage the collection of
device settings, user agent, and screen size overrides, previously kept in `Main.js`.
It also holds the responsibility to apply overrides on target initalization.

The methods to set overrides are moved mostly unchanged
from `Main.js` to WI.DeviceSettingsManager`:

```
function applyOverriddenUserAgent() -> DeviceSettingsManager.overrideUserAgent()
function applyOverriddenSetting()   -> DeviceSettingsManager.overrideSetting()
function applyOverriddenScreenSize() -> DeviceSettingsManager.overrideScreenSize()
```

A generalized `WI.SettingsPopover` is extracted from `WI.OverrideUserPreferencesPopover`
to handle showing and positioning the popover. The content is provided by subclasses.

A new `WI.OverrideDeviceSettingsPopover` is introduced to show settings
appropriate to the inspected target. More settings are shown in the popover
for remote targets. For local inspection, most of these settings are available
in the develop menu.

The capability to override screen sizes is available only for non-Cocoa platforms.
The code for setting this override is copied verbatim and adapted slightly to
use the new `WI.DeviceSettingsManager`.

* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:
* Source/WebInspectorUI/UserInterface/Base/Main.js:
(WI.loaded):
(WI.initializeTarget):

Most of the code from `Main.js` has moved to `WI.DeviceSettingsManager`
and `WI.OverrideDeviceSettingsPopover` according to responsibilites (controller or view).

* Source/WebInspectorUI/UserInterface/Controllers/DeviceSettingsManager.js: Added.
(WI.DeviceSettingsManager):
(WI.DeviceSettingsManager.prototype.initializeTarget):
(WI.DeviceSettingsManager.supportsSetScreenSizeOverride):
(WI.DeviceSettingsManager.prototype.get defaultSettingsChanged):
(WI.DeviceSettingsManager.prototype.get overridenDeviceUserAgent):
(WI.DeviceSettingsManager.prototype.get overridenDeviceScreenSize):
(WI.DeviceSettingsManager.prototype.get overridenDeviceSettings):
(WI.DeviceSettingsManager.prototype.overrideDeviceSetting):
(WI.DeviceSettingsManager.prototype.overrideUserAgent):
(WI.DeviceSettingsManager.prototype.overrideScreenSize):

* Source/WebInspectorUI/UserInterface/Main.html:
* Source/WebInspectorUI/UserInterface/Test.html:
* Source/WebInspectorUI/UserInterface/Views/Main.css:
(.device-settings-content): Deleted.
(.device-settings-content > table): Deleted.
(.device-settings-content > table > tr > td:first-child): Deleted.
(.device-settings-content .container): Deleted.
(.device-settings-content .container > * + *): Deleted.
(.device-settings-content .column): Deleted.
(.device-settings-content .user-agent select): Deleted.
(.device-settings-content .user-agent input): Deleted.
(.device-settings-content label + label): Deleted.
(.device-settings-content label > input): Deleted.
(.device-settings-content > .reference-page-link-container): Deleted.

Removed styles for device settings popover from `Main.css`
and replaced with streamlined styles in `SettingsPopover.css`
and `OverrideDeviceSettingsPopover.css`.

* Source/WebInspectorUI/UserInterface/Views/OverrideDeviceSettingsPopover.css: Copied from Source/WebInspectorUI/UserInterface/Views/OverrideUserPreferencesPopover.css.
(.popover .settings-content:is(.device-settings-content) > label):
(.popover .settings-content:is(.device-settings-content) > label > input):
(.popover .settings-content:is(.device-settings-content) > .select-with-input-container):
(.popover .settings-content:is(.device-settings-content) > .reference-page-link-container):
* Source/WebInspectorUI/UserInterface/Views/OverrideDeviceSettingsPopover.js: Added.
(WI.OverrideDeviceSettingsPopover):
(WI.OverrideDeviceSettingsPopover.prototype.createContentElement):
(WI.OverrideDeviceSettingsPopover.prototype._createSettingsSection):
(WI.OverrideDeviceSettingsPopover.prototype._createUserAgentSection):
(WI.OverrideDeviceSettingsPopover.prototype._createScreenSizeSection):
* Source/WebInspectorUI/UserInterface/Views/OverrideUserPreferencesPopover.css:
(.popover .settings-content:is(.user-preferences-content)):
(.popover .settings-content:is(.user-preferences-content) > h1):
(.popover .settings-content:is(.user-preferences-content) > label):
(.popover .settings-content:is(.user-preferences-content) > select):
(.popover .user-preferences-content): Deleted.
(.popover .user-preferences-content > h1): Deleted.
(.popover .user-preferences-content > h1:not(:first-child)): Deleted.
(.popover .user-preferences-content > label): Deleted.
(.popover .user-preferences-content > select): Deleted.

Generalized styles for settings popovers in `SettingsPopover.css`
and adapted `OverrideDeviceSettingsPopover.css` to build on them.

* Source/WebInspectorUI/UserInterface/Views/OverrideUserPreferencesPopover.js:
(WI.OverrideUserPreferencesPopover):
(WI.OverrideUserPreferencesPopover.prototype.show):
(WI.OverrideUserPreferencesPopover.prototype._createSelectElement):
(WI.OverrideUserPreferencesPopover.prototype._presentOverTargetElement): Deleted.
(WI.OverrideUserPreferencesPopover.prototype._createContentElement): Deleted.
* Source/WebInspectorUI/UserInterface/Views/SettingsPopover.css: Copied from Source/WebInspectorUI/UserInterface/Views/OverrideUserPreferencesPopover.css.
(.popover .settings-content):
(.popover .settings-content > h1):
(.popover .settings-content > h1:not(:first-child)):
* Source/WebInspectorUI/UserInterface/Views/SettingsPopover.js: Copied from Source/WebInspectorUI/UserInterface/Views/OverrideUserPreferencesPopover.css.
(WI.SettingsPopover):
(WI.SettingsPopover.prototype.show):
(WI.SettingsPopover.prototype.set content):
(WI.SettingsPopover.prototype.createContentElement):
(WI.SettingsPopover.prototype._presentOverTargetElement):

`WI.SettingsPopover` handles showing a popover at the correct position on screen,
and wrapping the content provided by subclasses with the `settings-content` CSS
class name which provides basic styling.

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