Method and Apparatus for Visualizing the Underlying Structure of a Document Using an Interactive Viewport Overlay

1. A computer implemented method comprising: accessing a Hyper text Markup Language (HTML) document; identifying, within the HTML document, HTML properties of a plurality of visual objects of the HTML document; generating a visualization of an underlying structure for the HTML document by generating structural elements for the plurality of visual objects that include the HTML properties for the plurality of visual objects, wherein the underlying structure for the HTML document comprises a structural relationship of the plurality of visual objects, the structural relationship comprising a z-value that defines the depth of the plurality of visual objects from a root element in a structural build of the HTML document; providing, via a graphical user interface, a display of the HTML document and the plurality of visual objects; detecting, within a view of the HTML document, a selection of a first visual object of the plurality of visual objects; and in response to the detected selection of the first visual object, providing via the graphical user interface, an overlay comprising a boundary around an area that overlaps a corresponding area of the displayed HTML document, the overlay providing a window to the visualization of the underlying structure of the corresponding area of the displayed HTML document that the area of the overlay overlaps.

2. The method of claim 1 , wherein the overlay comprises one or more selectable options for modifying a size of the overlay, an opacity of the overlay, and a depth of the overlay.

3. The method of claim 1 , further comprising modifying the overlay based on user input, wherein modifying the overlay comprises at least one of: changing a size of the area of the overlay, changing an opacity the overlay, or changing a depth of view of the overlay.

4. The method of claim 3 , wherein modifying the overlay based on the user input comprises changing the opacity of the overlay, wherein changing the opacity of the overlay comprises at least one of increasing or decreasing the visibility of one or more visual objects of the displayed HTML document of the corresponding area of the displayed HTML document that the area of the overlay overlaps.

5. The method of claim 1 , wherein the area of the overlay overlapping the corresponding area of the displayed HTML document is a pre-defined size around a location of a mouse pointer.

6. The method of claim 1 , wherein identifying HTML properties of the plurality of visual objects comprises identifying one or more tags and classes for each of the first visual object and the one or more visual objects surrounding the first visual object.

7. The method of claim 1 , wherein providing the overlay comprises providing an overlay comprising both the corresponding area of the displayed HTML document and the display of the underlying structure of the corresponding area of the HTML document that the area of the overlay overlaps.

8. A non-transitory computer readable medium for storing executable code that, when executed by a processor, causes the processor to perform a method for visualizing the underlying structure of a document using an interactive viewport overlay, the method comprising: accessing a Hyper text Markup Language (HTML) document; identifying, within the HTML document, HTML properties of a plurality of visual objects of the HTML document; generating a visualization of an underlying structure for the HTML document by generating structural elements for the plurality of visual objects that include the HTML properties for the plurality of visual objects, wherein the underlying structure for the HTML document comprises a structural relationship of the plurality of visual objects, the structural relationship comprising a z-value that defines the depth of the plurality of visual objects from a root element in a structural build of the HTML document; providing, via a graphical user interface, a display of the HTML document and the plurality of visual objects; detecting, within a view of the HTML document, a selection of a first visual object of the plurality of visual objects; and in response to the detected selection of the first visual object, providing via the graphical user interface, an overlay comprising a boundary around an area that overlaps a corresponding area of the displayed HTML document, the overlay providing a window to the visualization of the underlying structure of the corresponding area of the displayed HTML document that the area of the overlay overlaps.

9. The non-transitory computer readable medium of claim 8 , wherein the overlay comprises one or more selectable options for modifying a size of the overlay, an opacity of the overlay, and a depth of the overlay.

10. The non-transitory computer readable medium of claim 8 , further comprising modifying the overlay based on user input, wherein modifying the overlay comprises at least one of: moving the overlay to a different area of the view of the HTML document, changing of a size of the overlay, changing an opacity of the overlay, or changing a depth of view of the overlay.

11. The non-transitory computer readable medium of claim 10 , wherein modifying the overlay based on the user input comprises changing the opacity of the overlay, wherein changing the opacity of the overlay comprises at least one of increasing or decreasing the visibility of one or more visual objects of the displayed HTML document of the corresponding area of the displayed HTML document that the area of the overlay overlaps.

12. The non-transitory computer readable medium of claim 8 , wherein the area of the overlay overlapping the corresponding area of the displayed HTML document is a pre-defined size around a location of a mouse pointer.

13. A viewport generator apparatus for visualizing the underlying structure of a document using an interactive viewport overlay comprising: at least one processor; and at least one non-transitory computer readable medium storing instructions thereon that, when executed by the at least one processor, cause the apparatus to: access a Hyper text Markup Language (HTML) document; identify, within the HTML document, HTML properties of a plurality of visual objects of the HTML document; generate a visualization of an underlying structure for the HTML document by generating structural elements for the plurality of visual objects that include the HTML properties for the plurality of visual objects, wherein the underlying structure for the HTML document comprises a structural relationship of the plurality of visual objects, the structural relationship comprising a z-value that defines the depth of the plurality of visual objects from a root element in a structural build of the HTML document; provide, via a graphical user interface, a display of the HTML document and the plurality of visual objects; detect, within a view of the HTML document, a selection of a first visual object of the plurality of visual objects; and in response to the detected selection of the first visual object, providing via the graphical user interface, an overlay comprising a boundary around an area that overlaps a corresponding area of the displayed HTML document, the overlay providing a window to the visualization of the underlying structure of the corresponding area of the displayed HTML document that the area of the overlay overlaps.

14. The apparatus of claim 13 , wherein the overlay comprises one or more selectable options for modifying a size of the overlay, an opacity of the overlay, and a depth of the overlay.

15. The apparatus of claim 13 , wherein the instructions further cause the computer to modify the overlay based on a user input, wherein modifying the overlay comprises at least one of: moving the overlay to a different area of the view of the HTML document, changing a size of the overlay, changing an opacity of the overlay, or changing a depth of view of the overlay.

16. The apparatus of claim 15 , wherein modifying the overlay based on the user input comprises changing the opacity of the overlay, wherein changing the opacity of the overlay comprises at least one of increasing or decreasing the visibility of one or more visual objects of the displayed HTML document of the corresponding area of the displayed HTML document that the area of the overlay overlaps.

17. The apparatus of claim 13 , wherein the area of the overlay overlapping the corresponding area of the displayed HTML document is a pre-defined size around a location of a mouse pointer.