<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>[168170] trunk/Source/WebInspectorUI</title>

</head>

<body>

<style type="text/css"><!--

#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }

#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }

#msg dt:after { content:':';}

#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }

#msg dl a { font-weight: bold}

#msg dl a:link    { color:#fc3; }

#msg dl a:active  { color:#ff0; }

#msg dl a:visited { color:#cc6; }

h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }

#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }

#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }

#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }

#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }

#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }

#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }

#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }

#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }

#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }

#logmsg pre { background: #eee; padding: 1em; }

#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}

#logmsg dl { margin: 0; }

#logmsg dt { font-weight: bold; }

#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }

#logmsg dd:before { content:'\00bb';}

#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }

#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }

#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }

#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }

#logmsg table th.Corner { text-align: left; }

#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }

#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }

#patch { width: 100%; }

#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}

#patch .propset h4, #patch .binary h4 {margin:0;}

#patch pre {padding:0;line-height:1.2em;margin:0;}

#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}

#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}

#patch span {display:block;padding:0 10px;}

#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}

#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}

#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}

#patch .lines, .info {color:#888;background:#fff;}

--></style>

<div id="msg">

<dl class="meta">

<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/168170">168170</a></dd>

<dt>Author</dt> <dd>commit-queue@webkit.org</dd>

<dt>Date</dt> <dd>2014-05-02 09:04:09 -0700 (Fri, 02 May 2014)</dd>

</dl>

<h3>Log Message</h3>

<pre>Web Inspector: CodeMirror 4 CSS mode new state data structure breaks helpers.

https://bugs.webkit.org/show_bug.cgi?id=132149

Patch by Jono Wells &lt;jonowells@apple.com&gt; on 2014-05-02

Reviewed by Joseph Pecoraro.

The update to CodeMirror 4 included dramatic changes to the CSS mode,

particularly the way it handles tokens. `state.stack` is gone, replaced

by `state.context`.

* Tools/PrettyPrinting/CodeMirrorFormatters.js:

* Tools/PrettyPrinting/codemirror.js:

* UserInterface/External/CodeMirror/codemirror.js:

* UserInterface/External/CodeMirror/livescript.js:

* UserInterface/External/CodeMirror/runmode.js:

Updates from ToT CodeMirror.

* UserInterface/Controllers/CodeMirrorCompletionController.js:

(WebInspector.CodeMirrorCompletionController.prototype._generateCSSCompletions):

* UserInterface/Views/CodeMirrorAdditions.js:

* UserInterface/Views/CodeMirrorFormatters.js: `lastToken` is null now for &quot;:&quot; characters.

Changes to match structural changes to the state object and changes to expected values of `lastToken`.</pre>

<h3>Modified Paths</h3>

<ul>

<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>

<li><a href="#trunkSourceWebInspectorUIToolsPrettyPrintingCodeMirrorFormattersjs">trunk/Source/WebInspectorUI/Tools/PrettyPrinting/CodeMirrorFormatters.js</a></li>

<li><a href="#trunkSourceWebInspectorUIToolsPrettyPrintingcodemirrorjs">trunk/Source/WebInspectorUI/Tools/PrettyPrinting/codemirror.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersCodeMirrorCompletionControllerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceExternalCodeMirrorcodemirrorjs">trunk/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceExternalCodeMirrorlivescriptjs">trunk/Source/WebInspectorUI/UserInterface/External/CodeMirror/livescript.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceExternalCodeMirrorrunmodejs">trunk/Source/WebInspectorUI/UserInterface/External/CodeMirror/runmode.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCodeMirrorAdditionsjs">trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCodeMirrorFormattersjs">trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorFormatters.js</a></li>

</ul>

</div>

<div id="patch">

<h3>Diff</h3>

<a id="trunkSourceWebInspectorUIChangeLog"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (168169 => 168170)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2014-05-02 13:52:01 UTC (rev 168169)

+++ trunk/Source/WebInspectorUI/ChangeLog        2014-05-02 16:04:09 UTC (rev 168170)

</span><span class="lines">@@ -1,3 +1,27 @@

</span><ins>+2014-05-02  Jono Wells  &lt;jonowells@apple.com&gt;

+

+        Web Inspector: CodeMirror 4 CSS mode new state data structure breaks helpers.

+        https://bugs.webkit.org/show_bug.cgi?id=132149

+

+        Reviewed by Joseph Pecoraro.

+

+        The update to CodeMirror 4 included dramatic changes to the CSS mode,

+        particularly the way it handles tokens. `state.stack` is gone, replaced

+        by `state.context`.

+

+        * Tools/PrettyPrinting/CodeMirrorFormatters.js:

+        * Tools/PrettyPrinting/codemirror.js:

+        * UserInterface/External/CodeMirror/codemirror.js:

+        * UserInterface/External/CodeMirror/livescript.js:

+        * UserInterface/External/CodeMirror/runmode.js:

+        Updates from ToT CodeMirror.

+

+        * UserInterface/Controllers/CodeMirrorCompletionController.js:

+        (WebInspector.CodeMirrorCompletionController.prototype._generateCSSCompletions):

+        * UserInterface/Views/CodeMirrorAdditions.js:

+        * UserInterface/Views/CodeMirrorFormatters.js: `lastToken` is null now for &quot;:&quot; characters.

+        Changes to match structural changes to the state object and changes to expected values of `lastToken`.

+

</ins><span class="cx"> 2014-04-30  Brian J. Burg  &lt;burg@cs.washington.edu&gt;

</span><span class="cx"> 

</span><span class="cx">         Web Inspector: clean up and decompose InspectorBackend functionality

</span></span></pre></div>

<a id="trunkSourceWebInspectorUIToolsPrettyPrintingCodeMirrorFormattersjs"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Tools/PrettyPrinting/CodeMirrorFormatters.js (168169 => 168170)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebInspectorUI/Tools/PrettyPrinting/CodeMirrorFormatters.js        2014-05-02 13:52:01 UTC (rev 168169)

+++ trunk/Source/WebInspectorUI/Tools/PrettyPrinting/CodeMirrorFormatters.js        2014-05-02 16:04:09 UTC (rev 168170)

</span><span class="lines">@@ -316,12 +316,8 @@

</span><span class="cx">         if (!lastToken) {

</span><span class="cx">             if (lastContent === &quot;,&quot;)

</span><span class="cx">                 return true;

</span><del>-            return false;

-        }

-

-        if (/\boperator\b/.test(lastToken)) {

</del><span class="cx">             if (lastContent === &quot;:&quot;) // Space in &quot;prop: value&quot; but not in a selectors &quot;a:link&quot; or &quot;div::after&quot; or media queries &quot;(max-device-width:480px)&quot;.

</span><del>-                return state.stack.lastValue === &quot;propertyValue&quot;;

</del><ins>+                return state.state === &quot;prop&quot;;

</ins><span class="cx">             return false;

</span><span class="cx">         }

</span><span class="cx"> 

</span><span class="lines">@@ -337,7 +333,7 @@

</span><span class="cx">             if (content === &quot;;&quot;)

</span><span class="cx">                 return 1;

<span class="cx">             if (content === &quot;,&quot;) { // &quot;a,b,c,...,z{}&quot; rule list at top level or in @media top level and only if the line length will be large.

</span><del>-                if ((!state.stack || !state.stack.length || state.stack.lastValue === &quot;@media{&quot;) &amp;&amp; state._cssPrettyPrint.lineLength &gt; 60) {

</del><ins>+                if ((state.state === &quot;top&quot; || state.state === &quot;media&quot;) &amp;&amp; state._cssPrettyPrint.lineLength &gt; 60) {

</ins><span class="cx">                     state._cssPrettyPrint.lineLength = 0;

</span><span class="cx">                     return 1;

</span><span class="cx">                 }

</span><span class="lines">@@ -395,7 +391,7 @@

<span class="cx">         // In order insert newlines in selector lists we need keep track of the length of the current line.

<span class="cx">         // This isn't exact line length, only the builder knows that, but it is good enough to get an idea.

<span class="cx">         // If we are at a top level, keep track of the current line length, otherwise we reset to 0.

</span><del>-        if (!state.stack || !state.stack.length || state.stack.lastValue === &quot;@media{&quot;)

</del><ins>+        if (state.state === &quot;top&quot; || state.state === &quot;media&quot;)

</ins><span class="cx">             state._cssPrettyPrint.lineLength += content.length;

</span><span class="cx">         else

</span><span class="cx">             state._cssPrettyPrint.lineLength = 0;

</span></span></pre></div>

<a id="trunkSourceWebInspectorUIToolsPrettyPrintingcodemirrorjs"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Tools/PrettyPrinting/codemirror.js (168169 => 168170)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebInspectorUI/Tools/PrettyPrinting/codemirror.js        2014-05-02 13:52:01 UTC (rev 168169)

+++ trunk/Source/WebInspectorUI/Tools/PrettyPrinting/codemirror.js        2014-05-02 16:04:09 UTC (rev 168170)

</span><span class="lines">@@ -230,6 +230,10 @@

</span><span class="cx"> 

<span class="cx">     // True when shift is held down.

</span><span class="cx">     d.shift = false;

</span><ins>+

+    // Used to track whether anything happened since the context menu

+    // was opened.

+    d.selForContextMenu = null;

</ins><span class="cx">   }

</span><span class="cx"> 

</span><span class="cx">   // STATE UPDATES

</span><span class="lines">@@ -1621,7 +1625,7 @@

</span><span class="cx">         else

</span><span class="cx">           rect = nullRect;

</span><span class="cx">       } else {

</span><del>-        rect = range(node, start, end).getBoundingClientRect();

</del><ins>+        rect = range(node, start, end).getBoundingClientRect() || nullRect;

</ins><span class="cx">       }

<span class="cx">     } else { // If it is a widget, simply get the box for the whole widget.

</span><span class="cx">       if (start &gt; 0) collapse = bias = &quot;right&quot;;

</span><span class="lines">@@ -2246,6 +2250,8 @@

</span><span class="cx">     if (withOp) startOperation(cm);

</span><span class="cx">     cm.display.shift = false;

</span><span class="cx"> 

</span><ins>+    if (text.charCodeAt(0) == 0x200b &amp;&amp; doc.sel == cm.display.selForContextMenu &amp;&amp; !prevInput)

+      prevInput = &quot;\u200b&quot;;

</ins><span class="cx">     // Find the part of the input that is actually new

</span><span class="cx">     var same = 0, l = Math.min(prevInput.length, text.length);

</span><span class="cx">     while (same &lt; l &amp;&amp; prevInput.charCodeAt(same) == text.charCodeAt(same)) ++same;

</span><span class="lines">@@ -3110,7 +3116,7 @@

</span><span class="cx">       // The prevInput test prevents this from firing when a context

</span><span class="cx">       // menu is closed (since the resetInput would kill the

</span><span class="cx">       // select-all detection hack)

</span><del>-      if (!cm.curOp &amp;&amp; cm.display.selForContextMenu == cm.doc.sel) {

</del><ins>+      if (!cm.curOp &amp;&amp; cm.display.selForContextMenu != cm.doc.sel) {

</ins><span class="cx">         resetInput(cm);

</span><span class="cx">         if (webkit) setTimeout(bind(resetInput, cm, true), 0); // Issue #1730

</span><span class="cx">       }

</span><span class="lines">@@ -3130,7 +3136,6 @@

</span><span class="cx"> 

</span><span class="cx">   // CONTEXT MENU HANDLING

</span><span class="cx"> 

</span><del>-  var detectingSelectAll;

</del><span class="cx">   // To make the context menu work, we need to briefly unhide the

</span><span class="cx">   // textarea (making it as unobtrusive as possible) to let the

<span class="cx">   // right-click take effect on it.

</span><span class="lines">@@ -3159,6 +3164,7 @@

</span><span class="cx">     // Adds &quot;Select all&quot; to context menu in FF

</span><span class="cx">     if (!cm.somethingSelected()) display.input.value = display.prevInput = &quot; &quot;;

</span><span class="cx">     display.selForContextMenu = cm.doc.sel;

</span><ins>+    clearTimeout(display.detectingSelectAll);

</ins><span class="cx"> 

</span><span class="cx">     // Select-all will be greyed out if there's nothing to select, so

</span><span class="cx">     // this adds a zero-width space so that we can later check whether

</span><span class="lines">@@ -3180,14 +3186,13 @@

</span><span class="cx">       // Try to detect the user choosing select-all

</span><span class="cx">       if (display.input.selectionStart != null) {

</span><span class="cx">         if (!ie || ie_upto8) prepareSelectAllHack();

</span><del>-        clearTimeout(detectingSelectAll);

</del><span class="cx">         var i = 0, poll = function() {

</span><span class="cx">           if (display.selForContextMenu == cm.doc.sel &amp;&amp; display.input.selectionStart == 0)

</span><span class="cx">             operation(cm, commands.selectAll)(cm);

</span><del>-          else if (i++ &lt; 10) detectingSelectAll = setTimeout(poll, 500);

</del><ins>+          else if (i++ &lt; 10) display.detectingSelectAll = setTimeout(poll, 500);

</ins><span class="cx">           else resetInput(cm);

</span><span class="cx">         };

</span><del>-        detectingSelectAll = setTimeout(poll, 200);

</del><ins>+        display.detectingSelectAll = setTimeout(poll, 200);

</ins><span class="cx">       }

</span><span class="cx">     }

</span><span class="cx"> 

</span><span class="lines">@@ -3383,7 +3388,7 @@

</span><span class="cx"> 

</span><span class="cx">       var after = i ? computeSelAfterChange(doc, change, null) : lst(source);

</span><span class="cx">       makeChangeSingleDoc(doc, change, after, mergeOldSpans(doc, change));

</span><del>-      if (doc.cm) ensureCursorVisible(doc.cm);

</del><ins>+      if (!i &amp;&amp; doc.cm) doc.cm.scrollIntoView(change);

</ins><span class="cx">       var rebased = [];

</span><span class="cx"> 

</span><span class="cx">       // Propagate to the linked documents

</span><span class="lines">@@ -3400,12 +3405,17 @@

</span><span class="cx">   // Sub-views need their line numbers shifted when text is added

<span class="cx">   // above or below them in the parent document.

</span><span class="cx">   function shiftDoc(doc, distance) {

</span><ins>+    if (distance == 0) return;

</ins><span class="cx">     doc.first += distance;

</span><span class="cx">     doc.sel = new Selection(map(doc.sel.ranges, function(range) {

</span><span class="cx">       return new Range(Pos(range.anchor.line + distance, range.anchor.ch),

</span><span class="cx">                        Pos(range.head.line + distance, range.head.ch));

</span><span class="cx">     }), doc.sel.primIndex);

</span><del>-    if (doc.cm) regChange(doc.cm, doc.first, doc.first - distance, distance);

</del><ins>+    if (doc.cm) {

+      regChange(doc.cm, doc.first, doc.first - distance, distance);

+      for (var d = doc.cm.display, l = d.viewFrom; l &lt; d.viewTo; l++)

+        regLineChange(doc.cm, l, &quot;gutter&quot;);

+    }

</ins><span class="cx">   }

</span><span class="cx"> 

</span><span class="cx">   // More lower-level change function, handling only a single document

</span><span class="lines">@@ -3497,6 +3507,7 @@

</span><span class="cx">       if (changeHandler) signalLater(cm, &quot;change&quot;, cm, obj);

</span><span class="cx">       if (changesHandler) (cm.curOp.changeObjs || (cm.curOp.changeObjs = [])).push(obj);

</span><span class="cx">     }

</span><ins>+    cm.display.selForContextMenu = null;

</ins><span class="cx">   }

</span><span class="cx"> 

</span><span class="cx">   function replaceRange(doc, code, from, to, origin) {

</span><span class="lines">@@ -7520,7 +7531,7 @@

</span><span class="cx"> 

</span><span class="cx">   // THE END

</span><span class="cx"> 

</span><del>-  CodeMirror.version = &quot;4.1.0&quot;;

</del><ins>+  CodeMirror.version = &quot;4.1.1&quot;;

</ins><span class="cx"> 

</span><span class="cx">   return CodeMirror;

</span><span class="cx"> });

</span></span></pre></div>

<a id="trunkSourceWebInspectorUIUserInterfaceControllersCodeMirrorCompletionControllerjs"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js (168169 => 168170)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js        2014-05-02 13:52:01 UTC (rev 168169)

+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js        2014-05-02 16:04:09 UTC (rev 168170)

</span><span class="lines">@@ -519,7 +519,7 @@

</span><span class="cx">     _generateCSSCompletions: function(mainToken, base, suffix)

</span><span class="cx">     {

<span class="cx">         // We only support completion inside CSS block context.

</span><del>-        if (!mainToken.state || !mainToken.state.state || !mainToken.state.state === &quot;block&quot;)

</del><ins>+        if (mainToken.state.state === &quot;media&quot; || mainToken.state.state === &quot;top&quot; || mainToken.state.state === &quot;parens&quot;)

</ins><span class="cx">             return [];

</span><span class="cx"> 

</span><span class="cx">         var token = mainToken;

</span></span></pre></div>

<a id="trunkSourceWebInspectorUIUserInterfaceExternalCodeMirrorcodemirrorjs"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js (168169 => 168170)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js        2014-05-02 13:52:01 UTC (rev 168169)

+++ trunk/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js        2014-05-02 16:04:09 UTC (rev 168170)

</span><span class="lines">@@ -230,6 +230,10 @@

</span><span class="cx"> 