WebKit
WebKit copied to clipboard
Published
20 hours ago •
WebKit
WebKit
Web Inspector: Links to inline style sheets don't work
94b243ff86650d9671ecef23733bbe2e19276df1
Web Inspector: Links to inline style sheets don't work rdar://122866054 https://bugs.webkit.org/show_bug.cgi?id=268818 Reviewed by NOBODY (OOPS!). Add a feature to the inspector's frontend that, if an inline/internal CSS rule (one that lives within an HTML <style> element) is created dynamically with JavaScript, the style details panel should link that rule to its owner <style> element in the DOM tree in the Elements tab. The backend now includes the relevant data for a CSS header that links a style sheet to its owner <style> element if one exists. The frontend now takes this data and renders a link to that <style> element as a CSS rule's source URL when appropriate. NOTE: - This new feature currently does not always work as it suffers from https://webkit.org/b/213499, where during the construction of a CSSStyleSheetHeader protocol object and trying to retrieve the node ID of the style sheet's owner node, the document element might not have been instrumented to have a bound ID. (See https://github.com/WebKit/WebKit/blob/e9235eeac4b213cb15e87a5c1b2a97bd27826195/Source/WebCore/inspector/agents/InspectorDOMAgent.cpp#L596) - In order to successfully use this feature, the user must open the web inspector and then do a hard-refresh (Option-Command-R). I have yet figured out what side effect hard-refresh had that made this work. * Source/JavaScriptCore/inspector/protocol/CSS.json: - Add the ownerNodeId field to help link the style sheet to its owner HTML <style> element. - The isInline field's value did not match what its name suggested, and the frontend did not make use of this special meaning either. This commit fixes that so isInline always reflect whether the style sheet is inline/internal. - The startLine and startColumn fields had values of 0 if the style sheet was created dynamically, but 0 could be a meaningful value (indicating that the source was indeed at line 0). This commit makes them optional fields, so a missing value from these fields can inform that the style sheet was created dynamically. * Source/WebCore/dom/InlineStyleSheetOwner.cpp: (WebCore::InlineStyleSheetOwner::InlineStyleSheetOwner): - Use `TextPosition::belowRangePosition` to indicate that the style sheet is created dynamically, as the default value `TextPosition()` has a legit meaning (line 0, column 0). * Source/WebCore/inspector/InspectorStyleSheet.h: * Source/WebCore/inspector/InspectorStyleSheet.cpp: (WebCore::InspectorStyleSheet::buildObjectForStyleSheetInfo): - Adapt to the new protocol for CSSStyleSheetHeader. - Since the CSSStyleSheetHeader now includes an ownerNodeId field, the InspectorStyleSheet needs help from the InspectorDOMAgent to retrieve the owner node's ID. Parametrize a helper function that returns a node's ID to achieve this. * Source/WebCore/inspector/agents/InspectorCSSAgent.cpp: (WebCore::InspectorCSSAgent::setActiveStyleSheetsForDocument): (WebCore::InspectorCSSAgent::getAllStyleSheets): - Lend help to InspectorStyleSheet to retrieve the style sheet owner node's ID. * Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js: (WI.CSSManager.prototype.preferredInspectorStyleSheetForFrame): (WI.CSSManager.prototype.styleSheetAdded): (WI.CSSManager.prototype._fetchInfoForAllStyleSheets): - Adapt to the new protocol for CSSStyleSheetHeader by recording the new ownerNodeId field. * Source/WebInspectorUI/UserInterface/Models/CSSStyleSheet.js: (WI.CSSStyleSheet): - Initialize the new field ownerNodeId to record the style sheet's owner HTML <style> element, if one exists from an update with `updateInfo()`. - Change the default values of startLineNumber and startColumn to NaN, which indicate the style sheet was created dynamically. (WI.CSSStyleSheet.prototype.get ownerNodeId): (WI.CSSStyleSheet.prototype.updateInfo): - Add support for the new field ownerNodeId. * Source/WebInspectorUI/UserInterface/Views/StyleOriginView.js: (WI.StyleOriginView.prototype.update): (WI.StyleOriginView): - If a style sheet is created dynamically, render the URL link that links to the owner HTML <style> element within the DOM tree instead. - (The `(node ?)` text is there as a placeholder for now, which helps with debugging and demonstrating the issue described above in the NOTE section.)
https://github.com/WebKit/WebKit/commit/94b243ff86650d9671ecef23733bbe2e19276df1
EWS run on previous version of this PR (hash https://github.com/WebKit/WebKit/commit/f4c274d4b70a0ca1f5c67adfc2b474e5282a5567)
EWS run on previous version of this PR (hash https://github.com/WebKit/WebKit/commit/94b243ff86650d9671ecef23733bbe2e19276df1)
Video demo of behavior AFTER this commit:
- The style details panel now links CSS rules that are part of an inline/internal style sheet to their owner
<style>elements. - Due to this bug, the link currently requires a hard-reload of the webpage with the inspector open (!#R) to have an effect.
- This new behavior (when working) is the same as what Chrome does.
https://github.com/WebKit/WebKit/assets/44916353/8941191c-9bdd-4e3a-8db4-092e03a06cd7
Video demo of behavior BEFORE this commit:
https://github.com/WebKit/WebKit/assets/44916353/c0089010-686f-430f-84ca-162ca3106280
The demo webpage I used in the videos: dynamic-stylesheet-demo.zip
EWS run on current version of this PR (hash https://github.com/WebKit/WebKit/commit/aeee567cb1d9676b74b4bd18d792ef1622c6c935)