Area selection-based document object model element inspector

Patent metadata

Field	Value
Publication number	US-12504867-B2
Application number	US-202318237491-A
Country	US
Kind code	B2
Filing date	Aug 24, 2023
Priority date	Aug 24, 2023
Publication date	Dec 23, 2025
Grant date	Dec 23, 2025

Abstract

An area selection-based document object model element inspector is described. A dragging input that defines a selection area of a digital content document having a plurality of elements is received via an area selection-based inspector tool. A set of elements of the plurality of elements that is positioned within the selection area is selected. Details of the selected set of elements are broadcast for display.

First claim

What is claimed is:

1 . A computer system for an area selection-based inspector tool, comprising:
a processing system; and a computer-readable storage medium having instructions stored thereon that, when executed by the processing system, cause the processing system to perform operations comprising:
receiving, via the area selection-based inspector tool, a dragging input that defines a selection area of a digital content document having a plurality of elements;
selecting a set of elements of the plurality of elements that is positioned within the selection area by:
determining a coordinate-based position of an element of the plurality of elements;
determining coordinates of a boundary of the selection area;
adding the element to the set of elements in response to the coordinate-based position of the element being within the coordinates of the boundary of the selection area; and
excluding the element from the set of elements in response to the coordinate-based position of the element being outside of the coordinates of the boundary of the selection area; and

broadcasting details of the selected set of elements for display.

2 . The computer system of claim 1 , wherein the plurality of elements is organized in a hierarchical structure, and the instructions further cause the processing system to perform operations comprising flattening the hierarchical structure in response to the area selection-based inspector tool being activated.

3 . The computer system of claim 2 , wherein flattening the hierarchical structure comprises:
retrieving boundary information for individual elements of the plurality of elements; generating an array of the plurality of elements that disregards the hierarchical structure; and organizing the individual elements in the array based on the boundary information.

4 . The computer system of claim 3 , wherein the boundary information comprises a coordinate-based position and a dimension of the individual elements.

5 . The computer system of claim 1 , wherein the dragging input comprises:
receiving a selection input at a starting point having a first coordinate position on the digital content document; and receiving a release of the selection input at an ending point having a second coordinate position on the digital content document, different from the first coordinate position.

6 . The computer system of claim 1 , wherein the instructions further cause the processing system to perform operations comprising broadcasting an indication of the selection area for display while receiving the dragging input.

7 . The computer system of claim 1 , wherein the area selection-based inspector tool is activated in response to receiving a selection of an option in a developer tool panel broadcast for display via a user interface.

8 . The computer system of claim 1 , wherein the set of elements comprises a first element and a second element, and wherein the first element is displayed behind the second element on the digital content document.

9 . The computer system of claim 1 , wherein the details of the selected set of elements comprise at least one of a content, an attribute, and a style of respective elements of the selected set of elements, and wherein the instructions further cause the processing system to perform operations comprising enabling editing of the details of the selected set of elements.

10 . A method for an area selection-based inspector tool, comprising:
receiving a dragging input that defines a boundary of a selection area on a webpage comprising a plurality of document object model (DOM) elements; selecting at least one DOM element of the plurality of DOM elements based on positioning on the webpage relative to the boundary of the selection area by:
selecting the at least one DOM element in response the at least one DOM element being within the boundary of the selection area; and
excluding remaining DOM elements of the plurality of DOM elements from selection in response to the remaining DOM elements being at least partially outside of the boundary of the selection area; and
broadcasting details of the at least one DOM element for display.

11 . The method of claim 10 , wherein the plurality of DOM elements is organized in a hierarchical structure that defines layering of the plurality of DOM elements with respect to each other, and wherein the method further comprises:
generating a mask of the selection area; arranging the mask to have a highest index in the hierarchical structure; and using the mask to compare positions of respective DOM elements of the plurality of DOM elements on the webpage with the boundary of the selection area.

12 . The method of claim 10 , wherein the plurality of DOM elements is organized in a hierarchical structure that defines layering of the plurality of DOM elements with respect to each other, and wherein selecting the at least one DOM element of the plurality of DOM elements based on the positioning on the webpage relative to the boundary of the selection area comprises:
retrieving coordinate-based position and dimensional information for individual DOM elements of the plurality of DOM elements; organizing the individual DOM elements in an array based on the coordinate-based position and the dimensional information, independent from the hierarchical structure; comparing the coordinate-based position and the dimensional information for the individual DOM elements to the boundary of the selection area; and selecting the at least one DOM element in response to the coordinate-based position and the dimensional information of the at least one DOM element being within the boundary of the selection area.

13 . The method of claim 10 , wherein broadcasting the details of the at least one DOM element for display comprises broadcasting the details in a developer tool panel that is displayed alongside the webpage in a user interface.

14 . The method of claim 13 , wherein the area selection-based inspector tool is activated in response to receiving, via the user interface, a selection of the area selection-based inspector tool in the developer tool panel.

15 . One or more computer-readable storage media comprising instructions for an area selection-based inspector stored thereon that, responsive to execution by one or more processors, cause the one or more processors to perform operations comprising:
broadcasting a webpage having a plurality of digital content elements for display, the plurality of digital content elements organized in a hierarchical structure that defines z-index positions of individual elements of the plurality of digital content elements; receiving, via input provided via the area selection-based inspector, a selection area on the webpage; selecting a portion of the plurality of digital content elements based on positioning of the portion relative to the selection area, the selecting ignoring the z-index positions; and broadcasting inspection details of the portion of the plurality of digital content elements for display.

16 . The one or more computer-readable storage media of claim 15 , wherein selecting the portion of the plurality of digital content elements based on the positioning of the portion relative to the selection area comprises:
determining a coordinate-based position and size of an element of the plurality of digital content elements; determining coordinates of a boundary of the selection area on the webpage; adding the element to the portion in response to the coordinate-based position and size of the element being within the coordinates of the bou

Assignees

• Ebay Inc

Inventors

• Song Dan
• Wang Pei
• Wang Yufei
• Xie Feng
• Yu Kun
• Zang Xiaojie

Classifications

• G06F3/0482

  Interaction with lists of selectable items, e.g. menus · CPC title

• G06F16/958

  Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking · CPC title

• G06F9/451

  Execution arrangements for user interfaces · CPC title

• G06F3/0481

  based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance · CPC title

• G06F40/143

  Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD] · CPC title