Linking source code to running element

Patent metadata

Field	Value
Publication number	US-10540416-B2
Application number	US-201113167229-A
Country	US
Kind code	B2
Filing date	Jun 23, 2011
Priority date	Jun 23, 2011
Publication date	Jan 21, 2020
Grant date	Jan 21, 2020

Abstract

A method includes parsing a text source document to construct a document node tree such that the document node tree includes text offsets indicating the location of the text within the text source document corresponding to each node of the document node tree. The method includes constructing, from the document node tree, a Document Object Model (DOM) and a view node tree that represents the DOM. The constructing of the view node tree includes mapping the view node tree to the document node tree. The method includes providing a running representation of the DOM such that DOM elements of the DOM are linked to the text within the text source document corresponding to the DOM elements via the view node tree and the document node tree.

First claim

What is clamed is:

1. A method comprising:
selecting, within a web development tool, a browser from a plurality of browsers on which to base the construction of a Document Object Model (DOM);
opening a text source document comprising original source code prior to being parsed in a source code editor;
parsing the text source document to construct a document node tree such that the document node tree includes a text offset for each node of the document node tree, each text offset for each node indicating a location of associated original source code within the text source document corresponding to the node of the document node tree;
constructing, from the document node tree, a DOM based on the selected browser and a view node tree that represents the DOM, the constructing of the view node tree including mapping the view node tree to the document node tree; and
providing a running representation of the DOM such that each DOM element is linked to the associated original source code corresponding to the DOM element, the link provided via the view node tree and the text offsets in the document node tree,
wherein the text offset for each node of the document node tree includes a line number and position within the line or a character number that indicates the position of a character relative to the beginning of the text source document, and
wherein by selecting a DOM element within the running representation of the DOM, the original source code of the text source document associated with the selected DOM element is selected within the source code editor.

2. The method of claim 1 , further comprising:
tracking a modification to a DOM element within the running representation of the DOM; and
one of marking the text offset for the node of the view node tree corresponding to the modified DOM element as invalid based on the modification and replacing the text offset for the node of the view node tree corresponding to the modified DOM element by an updated text offset based on the modification.

3. The method of claim 2 , wherein tracking a modification comprises tracking a DOM mutation event.

4. The method of claim 2 , wherein tracking a modification comprises tracking a modification via an Application Programming Interface (API) of the running representation of the DOM.

5. The method of claim 1 , further comprising:
tracking a modification to a DOM element, the modification due to execution of script in the running representation of the DOM; and
one of updating and inserting a node of the document node tree associated with the modified DOM element to indicate a line of the script responsible for the modification to the DOM element.

6. The method of claim 1 , wherein providing the running representation of the DOM comprises providing the running representation of the DOM in a browser instance.

7. The method of claim 1 , wherein parsing the text source document comprises parsing the text source document with one of a HyperText Markup Language (HTML) parser and a Cascading Style Sheets (CSS) parser.

8. The method of claim 1 , wherein parsing the text source document comprises parsing the text source document based on a parser of the selected browser.

9. The method of claim 1 , wherein in response to selecting a portion of the text source document, a DOM element associated with the selected portion of the text source document is selected in the running representation of the DOM.

10. The method of claim 1 , further comprising:
indicating portions of the text source document which are no longer represented in the running representation of the DOM due to modifications to the running representation of the DOM.

11. The method of claim 1 , wherein in response to selecting a DOM element, the text offset associated with the DOM element is reported.

12. A computer readable non-transitory storage medium storing computer executable instructions for controlling a computing device to perform a method comprising:
selecting, within a web development tool, a browser from a plurality of browsers on which to base the construction of a Document Object Model (DOM);
opening a markup text source document comprising original source code prior to being parsed in a source code editor;
constructing a document node tree from the markup text source document such that each node of the document node tree includes a text offset and markup text source document details, the text offset in each node of the document node tree indicating a location of associated original source code within the markup text source document corresponding to the node of the document node tree;
constructing, from the document node tree, a DOM based on the selected browser and a view node tree that represents the DOM, the constructing of the view node tree including mapping the view node tree to the document node tree; and
representing the DOM in the browser such that each DOM element is linked to the associated original source code associated with the DOM element, the link provided via the view node tree and the text offsets in the document node tree,
wherein the text offset for each node of the document node tree includes a line number and position within the line or a character number that indicates the position of a character relative to the beginning of the markup text source document, and
wherein by highlighting a DOM element in the browser, the original source code of the markup text source document associated with the highlighted DOM element is highlighted in the source code editor.

13. The computer readable storage medium of claim 12 , the method further comprising:
wherein by highlighting markup text in the source code editor, a DOM element associated with the highlighted markup text is highlighted in the browser.

14. The computer readable storage medium of claim 12 , wherein constructing the document node tree comprises incrementally parsing the markup text source document via a markup text parser including a HyperText Markup Language (HTML) parser and a Cascading Style Sheets (CSS) parser.

15. The computer readable storage medium of claim 12 , wherein mapping the view node tree to the document node tree comprises assigning an identifier to each node in the view node tree, each identifier of the view node tree mapped to a corresponding node in the document node tree.

16. A computer readable non-transitory storage medium storing a development tool including computer executable instructions for controlling a computing device, the development tool configured to perform a method comprising:
providing a source code editor for editing a markup text source document comprising original source code prior to being parsed;
selecting, within the development tool, a browser from a plurality of browsers on which to base the construction of a Document Object Model (DOM);
constructing a document node tree from the markup text source document via a markup text parser such that each node of the document node tree includes a text offset and source document details, the text offset in each node of the document node tree indicating a location of associated original source code within the markup text source document corresponding to the node of the document node tree; and
constructing, from the document node tree, a DOM based on the selected browser and a view node tree that represents the DOM, the view node tree mapped to the document node tree such that by selecting a DOM element in the browser, the original source code of the markup text source document associated with the selected DOM element is selected in the source code editor and such that by selecting

Assignees

• Fanning Michael C
• Hall Matthew
• Linscott Gary
• Andrew Felix G T I
• Showman Kenneth A
• Tvorun Evgeny
• Microsoft Technology Licensing Llc

Inventors

• Fanning Michael C
• Hall Matthew
• Linscott Gary
• Andrew Felix G T I
• Showman Kenneth A
• Tvorun Evgeny

Classifications

• G06F16/88

  Mark-up to mark-up conversion (conversion for visualization in web browsing G06F16/9577) · CPC title

• G06F16/957 Primary

  Browsing optimisation, e.g. caching or content distillation · CPC title

• G06F17/00

  Digital computing or data processing equipment or methods, specially adapted for specific functions (information retrieval, database structures or file system structures therefor G06F16/00) · CPC title