Changeset 191421 in webkit

Timestamp:

Oct 21, 2015, 5:50:25 PM (10 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: srcset attributes should have hyperlinks to the resources
​https://bugs.webkit.org/show_bug.cgi?id=150409

Patch by Joseph Pecoraro <Joseph Pecoraro> on 2015-10-21
Reviewed by Timothy Hatcher.

The "srcset" attribute parsing is a simplification of:
​https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset

The "srcset" attribute value is expected to be in comma
separated groups. Within each group we always expect a link,
and an optional descriptor. We want to linkify the link.

• UserInterface/Views/CodeMirrorAdditions.js:

(tokenizeSrcSetString):
(extendedXMLToken):
When parsing srcset attribute, parse links as link tokens
so that they are linkified in resource content views.

• UserInterface/Views/DOMTreeElement.js:

(WebInspector.DOMTreeElement.prototype._buildAttributeDOM):
When creating the DOMTree DOM for srcset attributes,
create link elements for the link values of attribute value.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/CodeMirrorAdditions.js (modified) (4 diffs)
• UserInterface/Views/DOMTreeElement.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2015-10-21  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: srcset attributes should have hyperlinks to the resources
+        https://bugs.webkit.org/show_bug.cgi?id=150409
+
+        Reviewed by Timothy Hatcher.
+
+        The "srcset" attribute parsing is a simplification of:
+        https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset
+
+        The "srcset" attribute value is expected to be in comma
+        separated groups. Within each group we always expect a link,
+        and an optional descriptor. We want to linkify the link.
+
+        * UserInterface/Views/CodeMirrorAdditions.js:
+        (tokenizeSrcSetString):
+        (extendedXMLToken):
+        When parsing srcset attribute, parse links as link tokens
+        so that they are linkified in resource content views.
+
+        * UserInterface/Views/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._buildAttributeDOM):
+        When creating the DOMTree DOM for srcset attributes,
+        create link elements for the link values of attribute value.
+
 2015-10-21  Devin Rousso  <dcrousso+webkit@gmail.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js

@@ -66 +66 @@
         delete state._linkQuoteCharacter;
         delete state._linkBaseStyle;
+        delete state._srcSetTokenizeState;
 
         return style;
+    }
+
+    function tokenizeSrcSetString(stream, state)
+    {
+        console.assert(state._linkQuoteCharacter !== undefined);
+
+        if (state._srcSetTokenizeState === "link") {
+            // Eat the string until a space, comma, or ending quote.
+            // If this is unquoted, then eat until whitespace or common parse errors.
+            if (state._linkQuoteCharacter)
+                stream.eatWhile(new RegExp("[^\\s," + state._linkQuoteCharacter + "]"));
+            else
+                stream.eatWhile(/[^\s,\u00a0=<>\"\']/);
+        } else {
+            // Eat the string until a comma, or ending quote.
+            // If this is unquoted, then eat until whitespace or common parse errors.
+            stream.eatSpace();
+            if (state._linkQuoteCharacter)
+                stream.eatWhile(new RegExp("[^," + state._linkQuoteCharacter + "]"));
+            else
+                stream.eatWhile(/[^\s\u00a0=<>\"\',]/);
+            stream.eatWhile(/[\s,]/);
+        }
+
+        // If the stream isn't at the end of line and we found the end quote
+        // change _linkTokenize to parse the end of the link next. Otherwise
+        // _linkTokenize will stay as-is to parse more of the srcset.
+        if (!stream.eol() && (!state._linkQuoteCharacter || stream.peek() === state._linkQuoteCharacter))
+            state._linkTokenize = tokenizeEndOfLinkString;
+
+        // Link portion.
+        if (state._srcSetTokenizeState === "link") {
+            state._srcSetTokenizeState = "descriptor";
+            return "link";
+        }
+
+        // Descriptor portion.
+        state._srcSetTokenizeState = "link";
+        return state._linkBaseStyle;
     }
 
@@ -87 +127 @@
             if (text === "href" || text === "src")
                 state._expectLink = true;
-            else
+            else if (text === "srcset")
+                state._expectSrcSet = true;
+            else {
                 delete state._expectLink;
+                delete state._expectSrcSet;
+            }
         } else if (state._expectLink && style === "string") {
             var current = stream.current();
@@ -99 +143 @@
                 // This is a link, so setup the state to process it next.
                 state._linkTokenize = tokenizeLinkString;
+                state._linkBaseStyle = style;
+
+                // The attribute should be quoted.
+                var quote = current[0];
+
+                state._linkQuoteCharacter = quote === "'" || quote === "\"" ? quote : null;
+
+                // Rewind the stream to the start of this token.
+                stream.pos = startPosition;
+
+                // Eat the open quote of the string so the string style
+                // will be used for the quote character.
+                if (state._linkQuoteCharacter)
+                    stream.eat(state._linkQuoteCharacter);
+            }
+        } else if (state._expectSrcSet && style === "string") {
+            var current = stream.current();
+
+            // Unless current token is empty quotes, consume quote character
+            // and tokenize link next.
+            if (current !== "\"\"" && current !== "''") {
+                delete state._expectSrcSet;
+
+                // This is a link, so setup the state to process it next.
+                state._srcSetTokenizeState = "link";
+                state._linkTokenize = tokenizeSrcSetString;
                 state._linkBaseStyle = style;
 
@@ -119 +189 @@
             // another token before a string then we stop expecting a link.
             delete state._expectLink;
+            delete state._expectSrcSet;
         }
 

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js

@@ -1110 +1110 @@
                 attrSpanElement.appendChild(attrValueElement);
             }
+        } else if (name === "srcset") {
+            let baseURL = node.ownerDocument ? node.ownerDocument.documentURL : null;
+            attrValueElement = attrSpanElement.createChild("span", "html-attribute-value");
+
+            let groups = value.split(/\s*,\s*/);
+            for (let i = 0; i < groups.length; ++i) {
+                let string = groups[i];
+                let spaceIndex = string.search(/\s/);
+
+                if (spaceIndex === -1) {
+                    let linkText = string;
+                    let rewrittenURL = absoluteURL(string, baseURL);
+                    let linkElement = attrValueElement.appendChild(document.createElement("a"));
+                    linkElement.href = rewrittenURL;
+                    linkElement.textContent = linkText.insertWordBreakCharacters();
+                } else {
+                    let linkText = string.substring(0, spaceIndex);
+                    let descriptorText = string.substring(spaceIndex).insertWordBreakCharacters();
+                    let rewrittenURL = absoluteURL(linkText, baseURL);
+                    let linkElement = attrValueElement.appendChild(document.createElement("a"));
+                    linkElement.href = rewrittenURL;
+                    linkElement.textContent = linkText.insertWordBreakCharacters();
+                    let descriptorElement = attrValueElement.appendChild(document.createElement("span"));
+                    descriptorElement.textContent = string.substring(spaceIndex);
+                }
+
+                if (i < groups.length - 1) {
+                    let commaElement = attrValueElement.appendChild(document.createElement("span"));
+                    commaElement.textContent = ", ";
+                }
+            }
         } else {
             value = value.insertWordBreakCharacters();