CDPotion.Domain.Overlay (cdpotion v0.1.4)

Summary

Types

Style information for drawing a box.

description not provided :(

description not provided :(

description not provided :(

description not provided :(

Configuration data for the highlighting of Flex container elements.

Configuration data for the highlighting of Flex item elements.

description not provided :(

Configuration data for the highlighting of Grid elements.

Configurations for Persistent Grid Highlight

Configuration data for the highlighting of page elements.

Configuration for dual screen hinge

description not provided :(

description not provided :(

description not provided :(

Style information for drawing a line.

description not provided :(

description not provided :(

Configuration data for drawing the source order of an elements children.

Functions

Disables domain notifications.

Enables domain notifications.

For Persistent Grid testing.

For Source Order Viewer testing.

Hides any highlight.

Highlights owner element of the frame with given id. Deprecated: Doesn't work reliablity and cannot be fixed due to process separatation (the owner node might be in a different process). Determine the owner node in the client and use highlightNode.

Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified.

Highlights given quad. Coordinates are absolute with respect to the main frame viewport.

Highlights given rectangle. Coordinates are absolute with respect to the main frame viewport.

Highlights the source order of the children of the DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified.

Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspectNodeRequested' event upon element selection.

Parameters:

  • (Optional) message: The message to display, also triggers resume and step over controls.

Highlights owner element of all frames detected to be ads.

Parameters:

  • (Required) container_query_highlight_configs: An array of node identifiers and descriptors for the highlight appearance.

Requests that backend shows debug borders on layers

Parameters:

  • (Required) flex_node_highlight_configs: An array of node identifiers and descriptors for the highlight appearance.

Requests that backend shows the FPS counter

Highlight multiple elements with the CSS Grid overlay.

Add a dual screen device hinge

Deprecated, no longer has any effect.

Show elements in isolation mode with overlays.

Requests that backend shows layout shift regions

Requests that backend shows paint rectangles

Requests that backend shows scroll bottleneck rects

Parameters:

  • (Required) scroll_snap_highlight_configs: An array of node identifiers and descriptors for the highlight appearance.

Paints viewport size upon main frame resize.

Request that backend shows an overlay with web vital metrics.

Types

@type box_style() :: %{
  fillColor: CDPotion.Domain.DOM.rgba() | nil,
  hatchColor: CDPotion.Domain.DOM.rgba() | nil
}

Style information for drawing a box.

Link to this type

color_format()

@type color_format() :: :rgb | :hsl | :hwb | :hex

description not provided :(

Link to this type

container_query_container_highlight_config()

@type container_query_container_highlight_config() :: %{
  containerBorder: line_style() | nil,
  descendantBorder: line_style() | nil
}

description not provided :(

Link to this type

container_query_highlight_config()

@type container_query_highlight_config() :: %{
  containerQueryContainerHighlightConfig:
    container_query_container_highlight_config(),
  nodeId: CDPotion.Domain.DOM.node_id()
}

description not provided :(

Link to this type

contrast_algorithm()

@type contrast_algorithm() :: :aa | :aaa | :apca

description not provided :(

Link to this type

flex_container_highlight_config()

@type flex_container_highlight_config() :: %{
  columnGapSpace: box_style() | nil,
  containerBorder: line_style() | nil,
  crossAlignment: line_style() | nil,
  crossDistributedSpace: box_style() | nil,
  itemSeparator: line_style() | nil,
  lineSeparator: line_style() | nil,
  mainDistributedSpace: box_style() | nil,
  rowGapSpace: box_style() | nil
}

Configuration data for the highlighting of Flex container elements.

Link to this type

flex_item_highlight_config()

@type flex_item_highlight_config() :: %{
  baseSizeBorder: line_style() | nil,
  baseSizeBox: box_style() | nil,
  flexibilityArrow: line_style() | nil
}

Configuration data for the highlighting of Flex item elements.

Link to this type

flex_node_highlight_config()

@type flex_node_highlight_config() :: %{
  flexContainerHighlightConfig: flex_container_highlight_config(),
  nodeId: CDPotion.Domain.DOM.node_id()
}

description not provided :(

Link to this type

grid_highlight_config()

@type grid_highlight_config() :: %{
  areaBorderColor: CDPotion.Domain.DOM.rgba() | nil,
  cellBorderColor: CDPotion.Domain.DOM.rgba() | nil,
  cellBorderDash: boolean() | nil,
  columnGapColor: CDPotion.Domain.DOM.rgba() | nil,
  columnHatchColor: CDPotion.Domain.DOM.rgba() | nil,
  columnLineColor: CDPotion.Domain.DOM.rgba() | nil,
  columnLineDash: boolean() | nil,
  gridBackgroundColor: CDPotion.Domain.DOM.rgba() | nil,
  gridBorderColor: CDPotion.Domain.DOM.rgba() | nil,
  gridBorderDash: boolean() | nil,
  rowGapColor: CDPotion.Domain.DOM.rgba() | nil,
  rowHatchColor: CDPotion.Domain.DOM.rgba() | nil,
  rowLineColor: CDPotion.Domain.DOM.rgba() | nil,
  rowLineDash: boolean() | nil,
  showAreaNames: boolean() | nil,
  showGridExtensionLines: boolean() | nil,
  showLineNames: boolean() | nil,
  showNegativeLineNumbers: boolean() | nil,
  showPositiveLineNumbers: boolean() | nil,
  showTrackSizes: boolean() | nil
}

Configuration data for the highlighting of Grid elements.

Link to this type

grid_node_highlight_config()

@type grid_node_highlight_config() :: %{
  gridHighlightConfig: grid_highlight_config(),
  nodeId: CDPotion.Domain.DOM.node_id()
}

Configurations for Persistent Grid Highlight

Link to this type

highlight_config()

@type highlight_config() :: %{
  borderColor: CDPotion.Domain.DOM.rgba() | nil,
  colorFormat: color_format() | nil,
  containerQueryContainerHighlightConfig:
    container_query_container_highlight_config() | nil,
  contentColor: CDPotion.Domain.DOM.rgba() | nil,
  contrastAlgorithm: contrast_algorithm() | nil,
  cssGridColor: CDPotion.Domain.DOM.rgba() | nil,
  eventTargetColor: CDPotion.Domain.DOM.rgba() | nil,
  flexContainerHighlightConfig: flex_container_highlight_config() | nil,
  flexItemHighlightConfig: flex_item_highlight_config() | nil,
  gridHighlightConfig: grid_highlight_config() | nil,
  marginColor: CDPotion.Domain.DOM.rgba() | nil,
  paddingColor: CDPotion.Domain.DOM.rgba() | nil,
  shapeColor: CDPotion.Domain.DOM.rgba() | nil,
  shapeMarginColor: CDPotion.Domain.DOM.rgba() | nil,
  showAccessibilityInfo: boolean() | nil,
  showExtensionLines: boolean() | nil,
  showInfo: boolean() | nil,
  showRulers: boolean() | nil,
  showStyles: boolean() | nil
}

Configuration data for the highlighting of page elements.

Link to this type

hinge_config()

@type hinge_config() :: %{
  contentColor: CDPotion.Domain.DOM.rgba() | nil,
  outlineColor: CDPotion.Domain.DOM.rgba() | nil,
  rect: CDPotion.Domain.DOM.rect()
}

Configuration for dual screen hinge

Link to this type

inspect_mode()

@type inspect_mode() ::
  :searchForNode
  | :searchForUAShadowDOM
  | :captureAreaScreenshot
  | :showDistances
  | :none

description not provided :(

Link to this type

isolated_element_highlight_config()

@type isolated_element_highlight_config() :: %{
  isolationModeHighlightConfig: isolation_mode_highlight_config(),
  nodeId: CDPotion.Domain.DOM.node_id()
}

description not provided :(

Link to this type

isolation_mode_highlight_config()

@type isolation_mode_highlight_config() :: %{
  maskColor: CDPotion.Domain.DOM.rgba() | nil,
  resizerColor: CDPotion.Domain.DOM.rgba() | nil,
  resizerHandleColor: CDPotion.Domain.DOM.rgba() | nil
}

description not provided :(

Link to this type

line_style()

@type line_style() :: %{
  color: CDPotion.Domain.DOM.rgba() | nil,
  pattern: :dashed | :dotted | nil
}

Style information for drawing a line.

Link to this type

scroll_snap_container_highlight_config()

@type scroll_snap_container_highlight_config() :: %{
  scrollMarginColor: CDPotion.Domain.DOM.rgba() | nil,
  scrollPaddingColor: CDPotion.Domain.DOM.rgba() | nil,
  snapAreaBorder: line_style() | nil,
  snapportBorder: line_style() | nil
}

description not provided :(

Link to this type

scroll_snap_highlight_config()

@type scroll_snap_highlight_config() :: %{
  nodeId: CDPotion.Domain.DOM.node_id(),
  scrollSnapContainerHighlightConfig: scroll_snap_container_highlight_config()
}

description not provided :(

Link to this type

source_order_config()

@type source_order_config() :: %{
  childOutlineColor: CDPotion.Domain.DOM.rgba(),
  parentOutlineColor: CDPotion.Domain.DOM.rgba()
}

Configuration data for drawing the source order of an elements children.

Functions

@spec disable() :: {String.t(), map()}

Disables domain notifications.

@spec enable() :: {String.t(), map()}

Enables domain notifications.

Link to this function

get_grid_highlight_objects_for_test(node_ids)

@spec get_grid_highlight_objects_for_test([CDPotion.Domain.DOM.node_id()]) ::
  {String.t(), map()}

For Persistent Grid testing.

Parameters:

  • (Required) node_ids: Ids of the node to get highlight object for.
Link to this function

get_highlight_object_for_test(node_id, include_distance \\ nil, include_style \\ nil, color_format \\ nil, show_accessibility_info \\ nil)

@spec get_highlight_object_for_test(
  CDPotion.Domain.DOM.node_id(),
  boolean(),
  boolean(),
  color_format(),
  boolean()
) :: {String.t(), map()}

For testing.

Parameters:

  • (Required) node_id: Id of the node to get highlight object for.
  • (Optional) include_distance: Whether to include distance info.
  • (Optional) include_style: Whether to include style info.
  • (Optional) color_format: The color format to get config with (default: hex).
  • (Optional) show_accessibility_info: Whether to show accessibility info (default: true).
Link to this function

get_source_order_highlight_object_for_test(node_id)

@spec get_source_order_highlight_object_for_test(CDPotion.Domain.DOM.node_id()) ::
  {String.t(), map()}

For Source Order Viewer testing.

Parameters:

  • (Required) node_id: Id of the node to highlight.
Link to this function

hide_highlight()

@spec hide_highlight() :: {String.t(), map()}

Hides any highlight.

Link to this function

highlight_frame(frame_id, content_color \\ nil, content_outline_color \\ nil)

Highlights owner element of the frame with given id. Deprecated: Doesn't work reliablity and cannot be fixed due to process separatation (the owner node might be in a different process). Determine the owner node in the client and use highlightNode.

Parameters:

  • (Required) frame_id: Identifier of the frame to highlight.
  • (Optional) content_color: The content box highlight fill color (default: transparent).
  • (Optional) content_outline_color: The content box highlight outline color (default: transparent).
Link to this function

highlight_node(highlight_config, node_id \\ nil, backend_node_id \\ nil, object_id \\ nil, selector \\ nil)

Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified.

Parameters:

  • (Required) highlight_config: A descriptor for the highlight appearance.
  • (Optional) node_id: Identifier of the node to highlight.
  • (Optional) backend_node_id: Identifier of the backend node to highlight.
  • (Optional) object_id: JavaScript object id of the node to be highlighted.
  • (Optional) selector: Selectors to highlight relevant nodes.
Link to this function

highlight_quad(quad, color \\ nil, outline_color \\ nil)

Highlights given quad. Coordinates are absolute with respect to the main frame viewport.

Parameters:

  • (Required) quad: Quad to highlight
  • (Optional) color: The highlight fill color (default: transparent).
  • (Optional) outline_color: The highlight outline color (default: transparent).
Link to this function

highlight_rect(x, y, width, height, color \\ nil, outline_color \\ nil)

@spec highlight_rect(
  integer(),
  integer(),
  integer(),
  integer(),
  CDPotion.Domain.DOM.rgba(),
  CDPotion.Domain.DOM.rgba()
) :: {String.t(), map()}

Highlights given rectangle. Coordinates are absolute with respect to the main frame viewport.

Parameters:

  • (Required) x: X coordinate
  • (Required) y: Y coordinate
  • (Required) width: Rectangle width
  • (Required) height: Rectangle height
  • (Optional) color: The highlight fill color (default: transparent).
  • (Optional) outline_color: The highlight outline color (default: transparent).
Link to this function

highlight_source_order(source_order_config, node_id \\ nil, backend_node_id \\ nil, object_id \\ nil)

Highlights the source order of the children of the DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified.

Parameters:

  • (Required) source_order_config: A descriptor for the appearance of the overlay drawing.
  • (Optional) node_id: Identifier of the node to highlight.
  • (Optional) backend_node_id: Identifier of the backend node to highlight.
  • (Optional) object_id: JavaScript object id of the node to be highlighted.
Link to this function

set_inspect_mode(mode, highlight_config \\ nil)

@spec set_inspect_mode(
  inspect_mode(),
  highlight_config()
) :: {String.t(), map()}

Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspectNodeRequested' event upon element selection.

Parameters:

  • (Required) mode: Set an inspection mode.
  • (Optional) highlight_config: A descriptor for the highlight appearance of hovered-over nodes. May be omitted if enabled == false.
Link to this function

set_paused_in_debugger_message(message \\ nil)

@spec set_paused_in_debugger_message(String.t()) :: {String.t(), map()}

Parameters:

  • (Optional) message: The message to display, also triggers resume and step over controls.
Link to this function

set_show_ad_highlights(show)

@spec set_show_ad_highlights(boolean()) :: {String.t(), map()}

Highlights owner element of all frames detected to be ads.

Parameters:

  • (Required) show: True for showing ad highlights
Link to this function

set_show_container_query_overlays(container_query_highlight_configs)

@spec set_show_container_query_overlays([container_query_highlight_config()]) ::
  {String.t(), map()}

Parameters:

  • (Required) container_query_highlight_configs: An array of node identifiers and descriptors for the highlight appearance.
Link to this function

set_show_debug_borders(show)

@spec set_show_debug_borders(boolean()) :: {String.t(), map()}

Requests that backend shows debug borders on layers

Parameters:

  • (Required) show: True for showing debug borders
Link to this function

set_show_flex_overlays(flex_node_highlight_configs)

@spec set_show_flex_overlays([flex_node_highlight_config()]) :: {String.t(), map()}

Parameters:

  • (Required) flex_node_highlight_configs: An array of node identifiers and descriptors for the highlight appearance.
Link to this function

set_show_fps_counter(show)

@spec set_show_fps_counter(boolean()) :: {String.t(), map()}

Requests that backend shows the FPS counter

Parameters:

  • (Required) show: True for showing the FPS counter
Link to this function

set_show_grid_overlays(grid_node_highlight_configs)

@spec set_show_grid_overlays([grid_node_highlight_config()]) :: {String.t(), map()}

Highlight multiple elements with the CSS Grid overlay.

Parameters:

  • (Required) grid_node_highlight_configs: An array of node identifiers and descriptors for the highlight appearance.
Link to this function

set_show_hinge(hinge_config \\ nil)

@spec set_show_hinge(hinge_config()) :: {String.t(), map()}

Add a dual screen device hinge

Parameters:

  • (Optional) hinge_config: hinge data, null means hideHinge
Link to this function

set_show_hit_test_borders(show)

@spec set_show_hit_test_borders(boolean()) :: {String.t(), map()}

Deprecated, no longer has any effect.

Parameters:

  • (Required) show: True for showing hit-test borders
Link to this function

set_show_isolated_elements(isolated_element_highlight_configs)

@spec set_show_isolated_elements([isolated_element_highlight_config()]) ::
  {String.t(), map()}

Show elements in isolation mode with overlays.

Parameters:

  • (Required) isolated_element_highlight_configs: An array of node identifiers and descriptors for the highlight appearance.
Link to this function

set_show_layout_shift_regions(result)

@spec set_show_layout_shift_regions(boolean()) :: {String.t(), map()}

Requests that backend shows layout shift regions

Parameters:

  • (Required) result: True for showing layout shift regions
Link to this function

set_show_paint_rects(result)

@spec set_show_paint_rects(boolean()) :: {String.t(), map()}

Requests that backend shows paint rectangles

Parameters:

  • (Required) result: True for showing paint rectangles
Link to this function

set_show_scroll_bottleneck_rects(show)

@spec set_show_scroll_bottleneck_rects(boolean()) :: {String.t(), map()}

Requests that backend shows scroll bottleneck rects

Parameters:

  • (Required) show: True for showing scroll bottleneck rects
Link to this function

set_show_scroll_snap_overlays(scroll_snap_highlight_configs)

@spec set_show_scroll_snap_overlays([scroll_snap_highlight_config()]) ::
  {String.t(), map()}

Parameters:

  • (Required) scroll_snap_highlight_configs: An array of node identifiers and descriptors for the highlight appearance.
Link to this function

set_show_viewport_size_on_resize(show)

@spec set_show_viewport_size_on_resize(boolean()) :: {String.t(), map()}

Paints viewport size upon main frame resize.

Parameters:

  • (Required) show: Whether to paint size or not.
Link to this function

set_show_web_vitals(show)

@spec set_show_web_vitals(boolean()) :: {String.t(), map()}

Request that backend shows an overlay with web vital metrics.

Parameters:

  • (Required) show: description not provided :(