mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-09 13:18:29 +08:00
James Lissiak
139ecb46a0
This patch adds a new setting to the Elements category which toggles showing the styles information on the overlay tooltip when the user is in inspect mode. You can see the difference enabled by the new setting in the following screenshot: https://imgur.com/a/BjQPwe9 This fixes #948417 Bug: 948417 Change-Id: If15bc5d73fb1571079697bfccd9e5a74e975bd59 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1553465 Commit-Queue: James Lissiak <jalissia@microsoft.com> Reviewed-by: Pavel Feldman <pfeldman@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#648345} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: 47e5d9a0f8f988e4d11d27a21dbf4c0414795f25
354 lines
11 KiB
JSON
354 lines
11 KiB
JSON
{
|
|
"extensions": [
|
|
{
|
|
"type": "view",
|
|
"location": "panel",
|
|
"id": "elements",
|
|
"title": "Elements",
|
|
"order": 10,
|
|
"className": "Elements.ElementsPanel"
|
|
},
|
|
{
|
|
"type": "@UI.ContextMenu.Provider",
|
|
"contextTypes": [
|
|
"SDK.RemoteObject",
|
|
"SDK.DOMNode",
|
|
"SDK.DeferredDOMNode"
|
|
],
|
|
"className": "Elements.ElementsPanel.ContextMenuProvider"
|
|
},
|
|
{
|
|
"type": "@UI.Renderer",
|
|
"contextTypes": [
|
|
"SDK.DOMNode",
|
|
"SDK.DeferredDOMNode"
|
|
],
|
|
"className": "Elements.ElementsTreeOutline.Renderer"
|
|
},
|
|
{
|
|
"type": "@Common.Revealer",
|
|
"contextTypes": [
|
|
"SDK.DOMNode",
|
|
"SDK.DeferredDOMNode",
|
|
"SDK.RemoteObject"
|
|
],
|
|
"destination": "Elements panel",
|
|
"className": "Elements.ElementsPanel.DOMNodeRevealer"
|
|
},
|
|
{
|
|
"type": "@Common.Linkifier",
|
|
"contextTypes": [
|
|
"SDK.DOMNode",
|
|
"SDK.DeferredDOMNode"
|
|
],
|
|
"className": "Elements.DOMLinkifier.Linkifier"
|
|
},
|
|
{
|
|
"type": "@Common.Revealer",
|
|
"contextTypes": [
|
|
"SDK.CSSProperty"
|
|
],
|
|
"destination": "styles sidebar",
|
|
"className": "Elements.ElementsPanel.CSSPropertyRevealer"
|
|
},
|
|
{
|
|
"type": "setting",
|
|
"category": "Elements",
|
|
"order": 0,
|
|
"title": "Color format:",
|
|
"settingName": "colorFormat",
|
|
"settingType": "enum",
|
|
"defaultValue": "original",
|
|
"options": [
|
|
{
|
|
"title": "Set color format as authored",
|
|
"text": "As authored",
|
|
"value": "original"
|
|
},
|
|
{
|
|
"title": "Set color format to HEX",
|
|
"text": "HEX: #dac0de",
|
|
"value": "hex",
|
|
"raw": true
|
|
},
|
|
{
|
|
"title": "Set color format to RGB",
|
|
"text": "RGB: rgb(128, 255, 255)",
|
|
"value": "rgb",
|
|
"raw": true
|
|
},
|
|
{
|
|
"title": "Set color format to HSL",
|
|
"text": "HSL: hsl(300, 80%, 90%)",
|
|
"value": "hsl",
|
|
"raw": true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "setting",
|
|
"category": "Elements",
|
|
"order": 1,
|
|
"title": "Show user agent shadow DOM",
|
|
"settingName": "showUAShadowDOM",
|
|
"settingType": "boolean",
|
|
"defaultValue": false
|
|
},
|
|
{
|
|
"type": "setting",
|
|
"category": "Elements",
|
|
"order": 2,
|
|
"title": "Word wrap",
|
|
"settingName": "domWordWrap",
|
|
"settingType": "boolean",
|
|
"defaultValue": true,
|
|
"options": [
|
|
{
|
|
"value": true,
|
|
"title": "Enable DOM word wrap"
|
|
},
|
|
{
|
|
"value": false,
|
|
"title": "Disable DOM word wrap"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "setting",
|
|
"category": "Elements",
|
|
"order": 3,
|
|
"title": "Show HTML comments",
|
|
"settingName": "showHTMLComments",
|
|
"settingType": "boolean",
|
|
"defaultValue": true,
|
|
"options": [
|
|
{
|
|
"value": true,
|
|
"title": "Show HTML comments"
|
|
},
|
|
{
|
|
"value": false,
|
|
"title": "Hide HTML comments"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "setting",
|
|
"category": "Elements",
|
|
"order": 4,
|
|
"title": "Reveal DOM node on hover",
|
|
"settingName": "highlightNodeOnHoverInOverlay",
|
|
"settingType": "boolean",
|
|
"defaultValue": true
|
|
},
|
|
{
|
|
"type": "setting",
|
|
"category": "Elements",
|
|
"order": 5,
|
|
"title": "Show detailed inspect tooltip",
|
|
"settingName": "showDetailedInspectTooltip",
|
|
"settingType": "boolean",
|
|
"defaultValue": true
|
|
},
|
|
{
|
|
"type": "setting",
|
|
"settingName": "showEventListenersForAncestors",
|
|
"settingType": "boolean",
|
|
"defaultValue": true
|
|
},
|
|
{
|
|
"type": "@UI.ToolbarItem.Provider",
|
|
"className": "Elements.ElementStatePaneWidget.ButtonProvider",
|
|
"order": 1,
|
|
"location": "styles-sidebarpane-toolbar"
|
|
},
|
|
{
|
|
"type": "@UI.ToolbarItem.Provider",
|
|
"className": "Elements.ClassesPaneWidget.ButtonProvider",
|
|
"order": 2,
|
|
"location": "styles-sidebarpane-toolbar"
|
|
},
|
|
{
|
|
"type": "@UI.ToolbarItem.Provider",
|
|
"className": "Elements.StylesSidebarPane.ButtonProvider",
|
|
"order": 100,
|
|
"location": "styles-sidebarpane-toolbar"
|
|
},
|
|
{
|
|
"type": "action",
|
|
"actionId": "elements.hide-element",
|
|
"contextTypes": [
|
|
"Elements.ElementsPanel"
|
|
],
|
|
"className": "Elements.ElementsActionDelegate",
|
|
"bindings": [
|
|
{
|
|
"shortcut": "H"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "action",
|
|
"actionId": "elements.edit-as-html",
|
|
"contextTypes": [
|
|
"Elements.ElementsPanel"
|
|
],
|
|
"className": "Elements.ElementsActionDelegate",
|
|
"bindings": [
|
|
{
|
|
"shortcut": "F2"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "action",
|
|
"actionId": "elements.undo",
|
|
"contextTypes": [
|
|
"Elements.ElementsPanel"
|
|
],
|
|
"className": "Elements.ElementsActionDelegate",
|
|
"bindings": [
|
|
{
|
|
"platform": "windows,linux",
|
|
"shortcut": "Ctrl+Z"
|
|
},
|
|
{
|
|
"platform": "mac",
|
|
"shortcut": "Meta+Z"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "action",
|
|
"actionId": "elements.redo",
|
|
"contextTypes": [
|
|
"Elements.ElementsPanel"
|
|
],
|
|
"className": "Elements.ElementsActionDelegate",
|
|
"bindings": [
|
|
{
|
|
"platform": "windows,linux",
|
|
"shortcut": "Ctrl+Y"
|
|
},
|
|
{
|
|
"platform": "mac",
|
|
"shortcut": "Meta+Shift+Z"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "@Elements.MarkerDecorator",
|
|
"className": "Elements.ElementsPanel.PseudoStateMarkerDecorator",
|
|
"marker": "pseudo-state-marker"
|
|
},
|
|
{
|
|
"type": "@Elements.MarkerDecorator",
|
|
"factoryName": "Elements.GenericDecorator",
|
|
"marker": "hidden-marker",
|
|
"title": "Element is hidden",
|
|
"color": "#555"
|
|
},
|
|
{
|
|
"type": "action",
|
|
"actionId": "elements.toggle-element-search",
|
|
"className": "Elements.InspectElementModeController.ToggleSearchActionDelegate",
|
|
"title": "Select an element in the page to inspect it",
|
|
"iconClass": "largeicon-node-search",
|
|
"bindings": [
|
|
{
|
|
"platform": "windows,linux",
|
|
"shortcut": "Ctrl+Shift+C"
|
|
},
|
|
{
|
|
"platform": "mac",
|
|
"shortcut": "Meta+Shift+C"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "action",
|
|
"actionId": "elements.capture-area-screenshot",
|
|
"className": "Elements.InspectElementModeController.ToggleSearchActionDelegate",
|
|
"title": "Capture area screenshot",
|
|
"category": "Screenshot"
|
|
},
|
|
{
|
|
"type": "@UI.ToolbarItem.Provider",
|
|
"actionId": "elements.toggle-element-search",
|
|
"location": "main-toolbar-left",
|
|
"order": 0
|
|
},
|
|
{
|
|
"type": "@UI.ViewLocationResolver",
|
|
"name": "elements-sidebar",
|
|
"category": "Elements",
|
|
"className": "Elements.ElementsPanel"
|
|
},
|
|
{
|
|
"type": "view",
|
|
"location": "elements-sidebar",
|
|
"id": "elements.eventListeners",
|
|
"title": "Event Listeners",
|
|
"order": 5,
|
|
"hasToolbar": true,
|
|
"persistence": "permanent",
|
|
"className": "Elements.EventListenersWidget"
|
|
},
|
|
{
|
|
"type": "view",
|
|
"location": "elements-sidebar",
|
|
"id": "elements.domProperties",
|
|
"title": "Properties",
|
|
"order": 7,
|
|
"persistence": "permanent",
|
|
"className": "Elements.PropertiesWidget"
|
|
}
|
|
],
|
|
"dependencies": [
|
|
"components",
|
|
"extensions",
|
|
"inline_editor",
|
|
"color_picker",
|
|
"event_listeners"
|
|
],
|
|
"scripts": [
|
|
"InspectElementModeController.js",
|
|
"ColorSwatchPopoverIcon.js",
|
|
"ComputedStyleModel.js",
|
|
"DOMLinkifier.js",
|
|
"DOMPath.js",
|
|
"ElementsBreadcrumbs.js",
|
|
"ElementsSidebarPane.js",
|
|
"ElementsTreeElement.js",
|
|
"ElementsTreeOutline.js",
|
|
"EventListenersWidget.js",
|
|
"MarkerDecorator.js",
|
|
"MetricsSidebarPane.js",
|
|
"PlatformFontsWidget.js",
|
|
"PropertiesWidget.js",
|
|
"StylePropertyHighlighter.js",
|
|
"StylesSidebarPane.js",
|
|
"StylePropertyTreeElement.js",
|
|
"ComputedStyleWidget.js",
|
|
"ElementsPanel.js",
|
|
"ClassesPaneWidget.js",
|
|
"ElementStatePaneWidget.js",
|
|
"ElementsTreeElementHighlighter.js"
|
|
],
|
|
"resources": [
|
|
"breadcrumbs.css",
|
|
"classesPaneWidget.css",
|
|
"computedStyleSidebarPane.css",
|
|
"computedStyleWidgetTree.css",
|
|
"domLinkifier.css",
|
|
"elementsPanel.css",
|
|
"elementStatePaneWidget.css",
|
|
"elementsTreeOutline.css",
|
|
"metricsSidebarPane.css",
|
|
"platformFontsWidget.css",
|
|
"propertiesWidget.css",
|
|
"stylesSectionTree.css",
|
|
"stylesSidebarPane.css"
|
|
]
|
|
}
|