Dynamic Source Code Linking for Web Page Modification

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Web developers face difficulties in locating and applying modifications to HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) source code, as the associated source code text may not be obvious and requires multiple steps to see changes reflected in a browser, making it challenging to diagnose and permanently apply modifications.

Innovation Solution

A method that parses a text source document to construct a document node tree with text offsets, creating a Document Object Model (DOM) and a view node tree, allowing for real-time tracking of modifications to both the DOM and the source document, enabling instant matching of DOM elements with their corresponding source code and dynamic updates.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Manufacturing precision

If developers manually locate and modify source code text, then modifications can be permanently applied, but the process requires multiple steps and is time-consuming

Engineering Contradiction:

Improvemodification accuracyVSAvoidtime to apply modification

Core Design Contradiction:

Manufacturing precisionVSLoss of time

Solution Approach 1:

The system pre-processes the source document to construct a document node tree with text offsets and mapping relationships before modifications are needed. This preliminary structuring enables rapid location and application of modifications without manual source code searching during the actual modification process.

Inventive Principle:

Principle #10Preliminary action

Solution Approach 2:

The patent introduces an intermediary document node tree that acts as a bridge between the source document and the running page. This intermediary structure contains mapping information that enables direct translation between DOM element locations and source code text offsets, eliminating the need for developers to manually locate source code.

Inventive Principle:

Principle #24Intermediary (Mediator)

2Productivity

If developers dynamically modify DOM elements, then changes are reflected immediately in the browser, but locating the associated source code text is difficult

Engineering Contradiction:

Improvespeed of seeing changesVSAvoiddifficulty of locating source code

Core Design Contradiction:

ProductivityVSDifficulty of detecting and measuring

Solution Approach 1:

The system establishes bidirectional feedback loops between DOM modifications and source code locations. When a DOM element is modified, the pre-computed mapping in the document node tree provides immediate feedback about the corresponding source code text offset, enabling developers to quickly locate and permanently apply the modification.

Inventive Principle:

Principle #23Feedback

Solution Approach 2:

The document node tree serves as an intermediary that maintains mapping relationships between DOM elements and source code text. This intermediary structure enables the system to translate DOM modification locations back to source code positions automatically, making source code location trivial even as DOM structures change.

Inventive Principle:

Principle #24Intermediary (Mediator)

3Adaptability or versatility

If the system maintains detailed mapping between source code and DOM elements, then dynamic updates are enabled, but the data structure complexity increases

Engineering Contradiction:

Improvedynamic update capabilityVSAvoiddata structure complexity

Core Design Contradiction:

Adaptability or versatilityVSDevice complexity

Solution Approach 1:

The patent segments the source document into a hierarchical document node tree structure with text offsets. This segmentation organizes the complex mapping data into manageable nodes and edges, where each node represents a portion of the source document with associated text offset information, making the overall structure more tractable.

Inventive Principle:

Principle #1Segmentation

Solution Approach 2:

The system adds a new dimensional layer (the document node tree with text offsets) between the source document and the DOM. This additional dimension organizes the mapping relationships in a structured hierarchy rather than requiring complex cross-referencing, effectively managing complexity through dimensional organization.

Inventive Principle:

Principle #17Another dimension (Dimensionality change)

Data Source

PatentUS10534830B2Dynamically updating a running page

Publication Date: 2020.01.14 MICROSOFT TECHNOLOGY LICENSING LLC

AI summary

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 and one of tracking a modification to the DOM to provide first change information and tracking a modification to the text source document to provide second change information.