Native overlay for rapid editing of web content

摘要

A web rendering module in the operating system is used to render and display a web page. The web rendering module also generates layout data that describes the position and size of each visual element on the rendered web page. A web editing application uses the layout data to generate a native overlay. The native overlay is an arrangement of cells, and each cell has the same position and size as a respective visual element. The application displays the native overlay on top of the rendered web page so that each visual element on the web page is aligned with a cell in the native overlay. The cells in the native overlay are transparent so that the rendered web page remains visible to the user, but the native overlay captures any interactions that the user performs. The interactions are then processed to make a corresponding change to the web page.

主权项

1. A non-transitory computer-readable medium storing computing instructions for making an edit to a web page on a computing device having a processor, the instructions executable to perform steps comprising:
receiving initialization data comprising instructions for rendering the web page on the computing device, the web page when rendered comprising a plurality of visual elements; receiving layout data describing a location and a size for each of the visual elements of the rendered web page; sending instructions, based on the layout data, to a layout generation module in an operating system of the computing device, the instructions causing the layout generation module to generate a native overlay comprising a plurality of cells, each of the cells having a location and a size matching the location and the size of a respective one of the visual elements, the computing device displaying the native overlay; determining, based on a received user interaction with one of the cells of the native overlay, a change in the web page corresponding to the user interaction, the determining comprising:
receiving an input from a user that selects a first cell, of the cells of the native overlay, the input selecting the first cell;taking a screenshot of the rendered web page;determining, based on the layout data, a region within the rendered web page that includes the visual element corresponding to the selected first cell;generating a visual element image, the visual element image comprising a portion of the rendered web page inside the determined region, wherein the portion of the rendered web page inside the determined region is the screenshot cropped to display the visual element corresponding to the selected first cell;sending instructions to modify the native overlay, the modification causing the visual element corresponding to the selected first cell to be hidden from the user;receiving a second input from the user that identifies a new position; andresponsive to receiving the second input, sending instructions to display the visual element image at the new position; and providing the change in the web page to a web rendering module, the web rendering module configured to render an updated web page that incorporates the change.