<!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>[167779] 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/167779">167779</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2014-04-24 15:29:16 -0700 (Thu, 24 Apr 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: CSS autofill suggests properties instead of values when values are needed
https://bugs.webkit.org/show_bug.cgi?id=132090
Patch by Jonathan Wells <jonowells@apple.com> on 2014-04-24
Reviewed by Joseph Pecoraro.
Updates are required to the CodeMirror helpers to be compatible with
CodeMirror 4. Some of those changes have been made to fix an issue
with CSS autofill, CSS code coloring, and also
https://bugs.webkit.org/show_bug.cgi?id=131859. The main issue is that
CodeMirror 4's CSS mode (css.js) stores its parsing modes in a different
data structure. All references to state.stack are obscelete. Many
are fixed here and more will be in an upcoming patch.
* Tools/PrettyPrinting/CodeMirrorFormatters.js: Removed exception for checking state.stack properties.
* UserInterface/Controllers/CodeMirrorCompletionController.js:
(WebInspector.CodeMirrorCompletionController.prototype._generateCSSCompletions): Corrected "block" state detection.
* UserInterface/External/CodeMirror/less.js: Removed.
* UserInterface/Views/CodeMirrorAdditions.js: Sets default state of "block" correctly.
* UserInterface/Views/CodeMirrorFormatters.js: Removed exception for checking state.stack properties.
* UserInterface/Views/SyntaxHighlightingDefaultTheme.css: Fix styles to match CSS mode changes.</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="#trunkSourceWebInspectorUIUserInterfaceControllersCodeMirrorCompletionControllerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.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>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSyntaxHighlightingDefaultThemecss">trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceExternalCodeMirrorlessjs">trunk/Source/WebInspectorUI/UserInterface/External/CodeMirror/less.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (167778 => 167779)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2014-04-24 22:24:41 UTC (rev 167778)
+++ trunk/Source/WebInspectorUI/ChangeLog 2014-04-24 22:29:16 UTC (rev 167779)
</span><span class="lines">@@ -1,3 +1,26 @@
</span><ins>+2014-04-24 Jonathan Wells <jonowells@apple.com>
+
+ Web Inspector: CSS autofill suggests properties instead of values when values are needed
+ https://bugs.webkit.org/show_bug.cgi?id=132090
+
+ Reviewed by Joseph Pecoraro.
+
+ Updates are required to the CodeMirror helpers to be compatible with
+ CodeMirror 4. Some of those changes have been made to fix an issue
+ with CSS autofill, CSS code coloring, and also
+ https://bugs.webkit.org/show_bug.cgi?id=131859. The main issue is that
+ CodeMirror 4's CSS mode (css.js) stores its parsing modes in a different
+ data structure. All references to state.stack are obscelete. Many
+ are fixed here and more will be in an upcoming patch.
+
+ * Tools/PrettyPrinting/CodeMirrorFormatters.js: Removed exception for checking state.stack properties.
+ * UserInterface/Controllers/CodeMirrorCompletionController.js:
+ (WebInspector.CodeMirrorCompletionController.prototype._generateCSSCompletions): Corrected "block" state detection.
+ * UserInterface/External/CodeMirror/less.js: Removed.
+ * UserInterface/Views/CodeMirrorAdditions.js: Sets default state of "block" correctly.
+ * UserInterface/Views/CodeMirrorFormatters.js: Removed exception for checking state.stack properties.
+ * UserInterface/Views/SyntaxHighlightingDefaultTheme.css: Fix styles to match CSS mode changes.
+
</ins><span class="cx"> 2014-04-24 Antoine Quint <graouts@webkit.org>
</span><span class="cx">
</span><span class="cx"> Web Inspector: gradient editor does not appear for linear-gradient with no specified angle
</span><span class="lines">@@ -306,7 +329,7 @@
</span><span class="cx"> * Localizations/en.lproj/localizedStrings.js:
</span><span class="cx"> * UserInterface/Models/DOMNode.js:
</span><span class="cx"> * UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
</span><del>- * UserInterface/Views/Main.css:
</del><ins>+ * UserInterface/Views/Main.css:
</ins><span class="cx">
</span><span class="cx"> 2014-03-28 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="lines">@@ -858,7 +881,7 @@
</span><span class="cx">
</span><span class="cx"> * UserInterface/Views/DataGrid.js:
</span><span class="cx"> (WebInspector.DataGrid.prototype.removeChild):
</span><del>- Add missing semicolon.
</del><ins>+ Add missing semicolon.
</ins><span class="cx">
</span><span class="cx"> 2014-03-12 Brian Burg <bburg@apple.com>
</span><span class="cx">
</span><span class="lines">@@ -2049,7 +2072,7 @@
</span><span class="cx"> of linear gradients, we parse all values, save for lengths, and in the case of radial gradients, we preserve the
</span><span class="cx"> sizing information as a string and parse only the gradient stops as the sizing information is only useful to show
</span><span class="cx"> in an editor if attached to an element with metrics.
</span><del>-
</del><ins>+
</ins><span class="cx"> Since instances of Gradient are used as the .value property of CodeMirrorGradientEditingController, we implement
</span><span class="cx"> the required .copy() and .toString() methods. The .toString() implementations are aware of default values for angles
</span><span class="cx"> and color stop offsets and only print those as necessary and use shorthands when possible.
</span><span class="lines">@@ -2195,7 +2218,7 @@
</span><span class="cx"> * UserInterface/CodeMirrorEditingController.js: Copied from Source/WebInspectorUI/UserInterface/CodeMirrorColorEditingController.js.
</span><span class="cx"> New class meant to be subclassed by any future editing controller, and already subclassed by
</span><span class="cx"> CodeMirrorColorEditingController. This class exposes several hooks for subclasses to customize its behavior:
</span><del>-
</del><ins>+
</ins><span class="cx"> .initialValue: a value we can revert to if the editing is canceled
</span><span class="cx"> .cssClassName: a CSS class name that can be added to the editing controller's container
</span><span class="cx"> .popoverPreferredEdges: a list of preferredEdges as passed to Popover.prototype.present() with a sensible default
</span><span class="lines">@@ -2204,11 +2227,11 @@
</span><span class="cx"> .popoverDidPresent: called as the popover just was presented, typically overridden when content needs to tuned only after
</span><span class="cx"> being added to the DOM and setting of the necessary machinery to update the serialized value in the editor based on interaction
</span><span class="cx"> within the popover without changing the serialized value upon showing the popover the very first time.
</span><del>-
</del><ins>+
</ins><span class="cx"> Additionally, the .value property must be an object supporting .toString() and .copy() method.
</span><span class="cx">
</span><span class="cx"> Finally, the .editingControllerDidStartEditing() and .editingControllerDidFinishEditing() delegate methods are fired
</span><del>- as editing begins and finishes.
</del><ins>+ as editing begins and finishes.
</ins><span class="cx">
</span><span class="cx"> (WebInspector.CodeMirrorEditingController):
</span><span class="cx"> (WebInspector.CodeMirrorEditingController.prototype.get marker):
</span><span class="lines">@@ -2253,7 +2276,7 @@
</span><span class="cx"> * UserInterface/HoverMenu.js:
</span><span class="cx"> We remove the assumption that a HoverMenu is only used to draw a single rounded rect based on a simple
</span><span class="cx"> Rect and instead support presentation based on an array of Rects where we either:
</span><del>-
</del><ins>+
</ins><span class="cx"> - draw a single rounded rectangle if there is only a single Rect provided
</span><span class="cx"> - draw two disconnected open-ended rects if we're provided with two non-overlapping Rects
</span><span class="cx"> - draw a polygon surrounding all provided Rects in all other cases
</span><span class="lines">@@ -2550,7 +2573,7 @@
</span><span class="cx">
</span><span class="cx"> Reviewed by Timothy Hatcher.
</span><span class="cx">
</span><del>- Add a RuntimeManager event that the scope chain details sidebar can
</del><ins>+ Add a RuntimeManager event that the scope chain details sidebar can
</ins><span class="cx"> listen to to trigger refresh.
</span><span class="cx">
</span><span class="cx"> Testing on this is blocked by http://webkit.org/b/128724
</span><span class="lines">@@ -4189,7 +4212,7 @@
</span><span class="cx">
</span><span class="cx"> * UserInterface/DebuggerSidebarPanel.js:
</span><span class="cx"> (WebInspector.DebuggerSidebarPanel.prototype.restoreStateFromCookie):
</span><del>- Drive-by fix to pass along relaxedMatchDelay to the superclass.
</del><ins>+ Drive-by fix to pass along relaxedMatchDelay to the superclass.
</ins><span class="cx">
</span><span class="cx"> * UserInterface/Main.js:
</span><span class="cx"> (WebInspector.loaded):
</span><span class="lines">@@ -5387,7 +5410,7 @@
</span><span class="cx"> Stop using __markedColor to identify a color marker and instead use the type on the matching
</span><span class="cx"> WebInspector.TextMarker. Additionally, create a WebInspector.TextMarker with type
</span><span class="cx"> WebInspector.TextMarker.Type.Color in createColorMarkers().
</span><del>-
</del><ins>+
</ins><span class="cx"> * UserInterface/CodeMirrorColorEditingController.js:
</span><span class="cx"> (WebInspector.CodeMirrorColorEditingController):
</span><span class="cx"> Use a WebInspector.TextRange to track the edited range and obtain it directly from the
</span><span class="lines">@@ -5746,7 +5769,7 @@
</span><span class="cx"> to retrieve an object with the following structure:
</span><span class="cx"> {
</span><span class="cx"> "regionFlow": <Reference to the ContentFlow object referenced by the -webkit-flow-from property of the node>,
</span><del>- "contentFlow": <Reference to the ContentFlow object referenced by the -webkit-flow-into property of
</del><ins>+ "contentFlow": <Reference to the ContentFlow object referenced by the -webkit-flow-into property of
</ins><span class="cx"> the node or a parent of the node>,
</span><span class="cx"> "regions": [ list of DOMNodes representing the regions containers of the node. The node is split across all these regions. ]
</span><span class="cx"> }
</span><span class="lines">@@ -6172,7 +6195,7 @@
</span><span class="cx">
</span><span class="cx"> Automatically dispatch a contextmenu event in case WebInspector.ContextMenu.prototype.show()
</span><span class="cx"> is called outside of a contextmenu event handler and would therefore not show the expected
</span><del>- context menu (except in the Remote Web Inspector where this already works).
</del><ins>+ context menu (except in the Remote Web Inspector where this already works).
</ins><span class="cx">
</span><span class="cx"> * UserInterface/ContextMenu.js:
</span><span class="cx"> (WebInspector.ContextMenu.prototype.show):
</span><span class="lines">@@ -6425,7 +6448,7 @@
</span><span class="cx"> the arrow within the center of the attachment edge, we get in situations where we may
</span><span class="cx"> shrink the popover instead of shifting it to fit within the container frame. We now first
</span><span class="cx"> shift the preferred frame before getting its intersection with the container frame to
</span><del>- avoid such situations.
</del><ins>+ avoid such situations.
</ins><span class="cx">
</span><span class="cx"> * UserInterface/Popover.js:
</span><span class="cx"> (WebInspector.Popover.prototype._bestMetricsForEdge):
</span><span class="lines">@@ -6594,7 +6617,7 @@
</span><span class="cx">
</span><span class="cx"> 2013-11-06 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><del>- Fix the display of query parameters when the value is missing.
</del><ins>+ Fix the display of query parameters when the value is missing.
</ins><span class="cx">
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=123920
</span><span class="cx">
</span><span class="lines">@@ -6821,7 +6844,7 @@
</span><span class="cx">
</span><span class="cx"> Reviewed by Timothy Hatcher.
</span><span class="cx">
</span><del>- Moved some global functions out of Main.js, so that they can be used in the
</del><ins>+ Moved some global functions out of Main.js, so that they can be used in the
</ins><span class="cx"> layout tests without including Main.js.
</span><span class="cx">
</span><span class="cx"> * UserInterface/Main.html: Referenced the new JS files.
</span><span class="lines">@@ -7223,7 +7246,7 @@
</span><span class="cx"> CSSStyleDeclarationTextEditor when the Cmd key is pressed and in the SourceCodeTextEditor
</span><span class="cx"> when either the Cmd key is pressed (NonSymbolTokens mode) or when the debugger is paused
</span><span class="cx"> (JavaScriptExpression mode).
</span><del>-
</del><ins>+
</ins><span class="cx"> The tokenTrackingController is now smarter about how it tracks mouse events when it's enabled,
</span><span class="cx"> tracking "mouseenter" and "mouseleave" events to enable tracking allowing immediate detection of
</span><span class="cx"> tokens being hovered or no longer being hovered even with quick mouse movements. Additioanlly,
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIToolsPrettyPrintingCodeMirrorFormattersjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Tools/PrettyPrinting/CodeMirrorFormatters.js (167778 => 167779)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Tools/PrettyPrinting/CodeMirrorFormatters.js 2014-04-24 22:24:41 UTC (rev 167778)
+++ trunk/Source/WebInspectorUI/Tools/PrettyPrinting/CodeMirrorFormatters.js 2014-04-24 22:29:16 UTC (rev 167779)
</span><span class="lines">@@ -337,7 +337,7 @@
</span><span class="cx"> if (content === ";")
</span><span class="cx"> return 1;
</span><span class="cx"> if (content === ",") { // "a,b,c,...,z{}" rule list at top level or in @media top level and only if the line length will be large.
</span><del>- if ((!state.stack.length || state.stack.lastValue === "@media{") && state._cssPrettyPrint.lineLength > 60) {
</del><ins>+ if ((!state.stack || !state.stack.length || state.stack.lastValue === "@media{") && state._cssPrettyPrint.lineLength > 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 +395,7 @@
</span><span class="cx"> // In order insert newlines in selector lists we need keep track of the length of the current line.
</span><span class="cx"> // This isn't exact line length, only the builder knows that, but it is good enough to get an idea.
</span><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.length || state.stack.lastValue === "@media{")
</del><ins>+ if (!state.stack || !state.stack.length || state.stack.lastValue === "@media{")
</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="trunkSourceWebInspectorUIUserInterfaceControllersCodeMirrorCompletionControllerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js (167778 => 167779)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js 2014-04-24 22:24:41 UTC (rev 167778)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js 2014-04-24 22:29:16 UTC (rev 167779)
</span><span class="lines">@@ -518,15 +518,15 @@
</span><span class="cx">
</span><span class="cx"> _generateCSSCompletions: function(mainToken, base, suffix)
</span><span class="cx"> {
</span><del>- // We only support completion inside CSS rules.
- if (!mainToken.state || !mainToken.state.stack || !mainToken.state.stack.contains("rule"))
</del><ins>+ // We only support completion inside CSS block context.
+ if (!mainToken.state || !mainToken.state.state || !mainToken.state.state === "block")
</ins><span class="cx"> return [];
</span><span class="cx">
</span><span class="cx"> var token = mainToken;
</span><span class="cx"> var lineNumber = this._lineNumber;
</span><span class="cx">
</span><span class="cx"> // Scan backwards looking for the current property.
</span><del>- while (token.state.stack.lastValue === "propertyValue") {
</del><ins>+ while (token.state.state === "prop") {
</ins><span class="cx"> // Found the beginning of the line. Go to the previous line.
</span><span class="cx"> if (!token.start) {
</span><span class="cx"> --lineNumber;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceExternalCodeMirrorlessjs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/External/CodeMirror/less.js (167778 => 167779)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/External/CodeMirror/less.js 2014-04-24 22:24:41 UTC (rev 167778)
+++ trunk/Source/WebInspectorUI/UserInterface/External/CodeMirror/less.js 2014-04-24 22:29:16 UTC (rev 167779)
</span><span class="lines">@@ -1,346 +0,0 @@
</span><del>-/*
- LESS mode - http://www.lesscss.org/
- Ported to CodeMirror by Peter Kroon <plakroon@gmail.com>
- Report bugs/issues here: https://github.com/marijnh/CodeMirror/issues
- GitHub: @peterkroon
-*/
-
-CodeMirror.defineMode("less", function(config) {
- var indentUnit = config.indentUnit, type;
- function ret(style, tp) {type = tp; return style;}
-
- var selectors = /(^\:root$|^\:nth\-child$|^\:nth\-last\-child$|^\:nth\-of\-type$|^\:nth\-last\-of\-type$|^\:first\-child$|^\:last\-child$|^\:first\-of\-type$|^\:last\-of\-type$|^\:only\-child$|^\:only\-of\-type$|^\:empty$|^\:link|^\:visited$|^\:active$|^\:hover$|^\:focus$|^\:target$|^\:lang$|^\:enabled^\:disabled$|^\:checked$|^\:first\-line$|^\:first\-letter$|^\:before$|^\:after$|^\:not$|^\:required$|^\:invalid$)/;
-
- function tokenBase(stream, state) {
- var ch = stream.next();
-
- if (ch == "@") {stream.eatWhile(/[\w\-]/); return ret("meta", stream.current());}
- else if (ch == "/" && stream.eat("*")) {
- state.tokenize = tokenCComment;
- return tokenCComment(stream, state);
- } else if (ch == "<" && stream.eat("!")) {
- state.tokenize = tokenSGMLComment;
- return tokenSGMLComment(stream, state);
- } else if (ch == "=") ret(null, "compare");
- else if (ch == "|" && stream.eat("=")) return ret(null, "compare");
- else if (ch == "\"" || ch == "'") {
- state.tokenize = tokenString(ch);
- return state.tokenize(stream, state);
- } else if (ch == "/") { // e.g.: .png will not be parsed as a class
- if(stream.eat("/")){
- state.tokenize = tokenSComment;
- return tokenSComment(stream, state);
- } else {
- if(type == "string" || type == "(") return ret("string", "string");
- if(state.stack[state.stack.length-1] !== undefined) return ret(null, ch);
- stream.eatWhile(/[\a-zA-Z0-9\-_.\s]/);
- if( /\/|\)|#/.test(stream.peek() || (stream.eatSpace() && stream.peek() === ")")) || stream.eol() )return ret("string", "string"); // let url(/images/logo.png) without quotes return as string
- }
- } else if (ch == "!") {
- stream.match(/^\s*\w*/);
- return ret("keyword", "important");
- } else if (/\d/.test(ch)) {
- stream.eatWhile(/[\w.%]/);
- return ret("number", "unit");
- } else if (/[,+<>*\/]/.test(ch)) {
- if(stream.peek() == "=" || type == "a")return ret("string", "string");
- if(ch === ",")return ret(null, ch);
- return ret(null, "select-op");
- } else if (/[;{}:\[\]()~\|]/.test(ch)) {
- if(ch == ":"){
- stream.eatWhile(/[a-z\\\-]/);
- if( selectors.test(stream.current()) ){
- return ret("tag", "tag");
- } else if(stream.peek() == ":"){//::-webkit-search-decoration
- stream.next();
- stream.eatWhile(/[a-z\\\-]/);
- if(stream.current().match(/\:\:\-(o|ms|moz|webkit)\-/))return ret("string", "string");
- if( selectors.test(stream.current().substring(1)) )return ret("tag", "tag");
- return ret(null, ch);
- } else {
- return ret(null, ch);
- }
- } else if(ch == "~"){
- if(type == "r")return ret("string", "string");
- } else {
- return ret(null, ch);
- }
- } else if (ch == ".") {
- if(type == "(")return ret("string", "string"); // allow url(../image.png)
- stream.eatWhile(/[\a-zA-Z0-9\-_]/);
- if(stream.peek() === " ")stream.eatSpace();
- if(stream.peek() === ")" || type === ":")return ret("number", "unit");//rgba(0,0,0,.25);
- else if(stream.current().length >1){
- if(state.stack[state.stack.length-1] === "rule" && stream.peek().match(/{|,|\+|\(/) === null)return ret("number", "unit");
- }
- return ret("tag", "tag");
- } else if (ch == "#") {
- //we don't eat white-space, we want the hex color and or id only
- stream.eatWhile(/[A-Za-z0-9]/);
- //check if there is a proper hex color length e.g. #eee || #eeeEEE
- if(stream.current().length == 4 || stream.current().length == 7){
- if(stream.current().match(/[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}/,false) != null){//is there a valid hex color value present in the current stream
- //when not a valid hex value, parse as id
- if(stream.current().substring(1) != stream.current().match(/[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}/,false))return ret("atom", "tag");
- //eat white-space
- stream.eatSpace();
- //when hex value declaration doesn't end with [;,] but is does with a slash/cc comment treat it as an id, just like the other hex values that don't end with[;,]
- if( /[\/<>.(){!$%^&*_\-\\?=+\|#'~`]/.test(stream.peek()) ){
- if(type === "select-op")return ret("number", "unit"); else return ret("atom", "tag");
- }
- //#time { color: #aaa }
- else if(stream.peek() == "}" )return ret("number", "unit");
- //we have a valid hex color value, parse as id whenever an element/class is defined after the hex(id) value e.g. #eee aaa || #eee .aaa
- else if( /[a-zA-Z\\]/.test(stream.peek()) )return ret("atom", "tag");
- //when a hex value is on the end of a line, parse as id
- else if(stream.eol())return ret("atom", "tag");
- //default
- else return ret("number", "unit");
- } else {//when not a valid hexvalue in the current stream e.g. #footer
- stream.eatWhile(/[\w\\\-]/);
- return ret("atom", stream.current());
- }
- } else {//when not a valid hexvalue length
- stream.eatWhile(/[\w\\\-]/);
- if(state.stack[state.stack.length-1] === "rule")return ret("atom", stream.current());return ret("atom", stream.current());
- return ret("atom", "tag");
- }
- } else if (ch == "&") {
- stream.eatWhile(/[\w\-]/);
- return ret(null, ch);
- } else {
- stream.eatWhile(/[\w\\\-_%.{]/);
- if(stream.current().match(/\\/) !== null){
- if(stream.current().charAt(stream.current().length-1) === "\\"){
- stream.eat(/\'|\"|\)|\(/);
- while(stream.eatWhile(/[\w\\\-_%.{]/)){
- stream.eat(/\'|\"|\)|\(/);
- }
- return ret("string", stream.current());
- }
- } //else if(type === "tag")return ret("tag", "tag");
- else if(type == "string"){
- if(state.stack[state.stack.length-1] === "{" && stream.peek() === ":")return ret("variable", "variable");
- if(stream.peek() === "/")stream.eatWhile(/[\w\\\-_%.{:\/]/);
- return ret(type, stream.current());
- } else if(stream.current().match(/(^http$|^https$)/) != null){
- stream.eatWhile(/[\w\\\-_%.{:\/]/);
- if(stream.peek() === "/")stream.eatWhile(/[\w\\\-_%.{:\/]/);
- return ret("string", "string");
- } else if(stream.peek() == "<" || stream.peek() == ">" || stream.peek() == "+"){
- if(type === "(" && (stream.current() === "n" || stream.current() === "-n"))return ret("string", stream.current());
- return ret("tag", "tag");
- } else if( /\(/.test(stream.peek()) ){
- if(stream.current() === "when")return ret("variable","variable");
- else if(state.stack[state.stack.length-1] === "@media" && stream.current() === "and")return ret("variable",stream.current());
- return ret(null, ch);
- } else if (stream.peek() == "/" && state.stack[state.stack.length-1] !== undefined){ // url(dir/center/image.png)
- if(stream.peek() === "/")stream.eatWhile(/[\w\\\-_%.{:\/]/);
- return ret("string", stream.current());
- } else if( stream.current().match(/\-\d|\-.\d/) ){ // match e.g.: -5px -0.4 etc... only colorize the minus sign
- //commment out these 2 comment if you want the minus sign to be parsed as null -500px
- //stream.backUp(stream.current().length-1);
- //return ret(null, ch);
- return ret("number", "unit");
- } else if( /\/|[\s\)]/.test(stream.peek() || stream.eol() || (stream.eatSpace() && stream.peek() == "/")) && stream.current().indexOf(".") !== -1){
- if(stream.current().substring(stream.current().length-1,stream.current().length) == "{"){
- stream.backUp(1);
- return ret("tag", "tag");
- }//end if
- stream.eatSpace();
- if( /[{<>.a-zA-Z\/]/.test(stream.peek()) || stream.eol() )return ret("tag", "tag"); // e.g. button.icon-plus
- return ret("string", "string"); // let url(/images/logo.png) without quotes return as string
- } else if( stream.eol() || stream.peek() == "[" || stream.peek() == "#" || type == "tag" ){
-
- if(stream.current().substring(stream.current().length-1,stream.current().length) == "{")stream.backUp(1);
- else if(state.stack[state.stack.length-1] === "border-color" || state.stack[state.stack.length-1] === "background-position" || state.stack[state.stack.length-1] === "font-family")return ret(null, stream.current());
- else if(type === "tag")return ret("tag", "tag");
- else if((type === ":" || type === "unit") && state.stack[state.stack.length-1] === "rule")return ret(null, stream.current());
- else if(state.stack[state.stack.length-1] === "rule" && type === "tag")return ret("string", stream.current());
- else if(state.stack[state.stack.length-1] === ";" && type === ":")return ret(null, stream.current());
- //else if(state.stack[state.stack.length-1] === ";" || type === "")return ret("variable", stream.current());
- else if(stream.peek() === "#" && type !== undefined && type.match(/\+|,|tag|select\-op|}|{|;/g) === null)return ret("string", stream.current());
- else if(type === "variable")return ret(null, stream.current());
- else if(state.stack[state.stack.length-1] === "{" && type === "comment")return ret("variable", stream.current());
- else if(state.stack.length === 0 && (type === ";" || type === "comment"))return ret("tag", stream.current());
- else if((state.stack[state.stack.length-1] === "{" || type === ";") && state.stack[state.stack.length-1] !== "@media{")return ret("variable", stream.current());
- else if(state.stack[state.stack.length-2] === "{" && state.stack[state.stack.length-1] === ";")return ret("variable", stream.current());
-
- return ret("tag", "tag");
- } else if(type == "compare" || type == "a" || type == "("){
- return ret("string", "string");
- } else if(type == "|" || stream.current() == "-" || type == "["){
- if(type == "|" && stream.peek().match(/\]|=|\~/) !== null)return ret("number", stream.current());
- else if(type == "|" )return ret("tag", "tag");
- else if(type == "["){
- stream.eatWhile(/\w\-/);
- return ret("number", stream.current());
- }
- return ret(null, ch);
- } else if((stream.peek() == ":") || ( stream.eatSpace() && stream.peek() == ":")) {
- stream.next();
- var t_v = stream.peek() == ":" ? true : false;
- if(!t_v){
- var old_pos = stream.pos;
- var sc = stream.current().length;
- stream.eatWhile(/[a-z\\\-]/);
- var new_pos = stream.pos;
- if(stream.current().substring(sc-1).match(selectors) != null){
- stream.backUp(new_pos-(old_pos-1));
- return ret("tag", "tag");
- } else stream.backUp(new_pos-(old_pos-1));
- } else {
- stream.backUp(1);
- }
- if(t_v)return ret("tag", "tag"); else return ret("variable", "variable");
- } else if(state.stack[state.stack.length-1] === "font-family" || state.stack[state.stack.length-1] === "background-position" || state.stack[state.stack.length-1] === "border-color"){
- return ret(null, null);
- } else {
-
- if(state.stack[state.stack.length-1] === null && type === ":")return ret(null, stream.current());
-
- //else if((type === ")" && state.stack[state.stack.length-1] === "rule") || (state.stack[state.stack.length-2] === "{" && state.stack[state.stack.length-1] === "rule" && type === "variable"))return ret(null, stream.current());
-
- else if(/\^|\$/.test(stream.current()) && stream.peek().match(/\~|=/) !== null)return ret("string", "string");//att^=val
-
- else if(type === "unit" && state.stack[state.stack.length-1] === "rule")return ret(null, "unit");
- else if(type === "unit" && state.stack[state.stack.length-1] === ";")return ret(null, "unit");
- else if(type === ")" && state.stack[state.stack.length-1] === "rule")return ret(null, "unit");
- else if(type && type.match("@") !== null && state.stack[state.stack.length-1] === "rule")return ret(null, "unit");
- //else if(type === "unit" && state.stack[state.stack.length-1] === "rule")return ret(null, stream.current());
-
- else if((type === ";" || type === "}" || type === ",") && state.stack[state.stack.length-1] === ";")return ret("tag", stream.current());
- else if((type === ";" && stream.peek() !== undefined && stream.peek().match(/{|./) === null) || (type === ";" && stream.eatSpace() && stream.peek().match(/{|./) === null))return ret("variable", stream.current());
- else if((type === "@media" && state.stack[state.stack.length-1] === "@media") || type === "@namespace")return ret("tag", stream.current());
-
- else if(type === "{" && state.stack[state.stack.length-1] === ";" && stream.peek() === "{")return ret("tag", "tag");
- else if((type === "{" || type === ":") && state.stack[state.stack.length-1] === ";")return ret(null, stream.current());
- else if((state.stack[state.stack.length-1] === "{" && stream.eatSpace() && stream.peek().match(/.|#/) === null) || type === "select-op" || (state.stack[state.stack.length-1] === "rule" && type === ",") )return ret("tag", "tag");
- else if(type === "variable" && state.stack[state.stack.length-1] === "rule")return ret("tag", "tag");
- else if((stream.eatSpace() && stream.peek() === "{") || stream.eol() || stream.peek() === "{")return ret("tag", "tag");
- //this one messes up indentation
- //else if((type === "}" && stream.peek() !== ":") || (type === "}" && stream.eatSpace() && stream.peek() !== ":"))return(type, "tag");
-
- else if(type === ")" && (stream.current() == "and" || stream.current() == "and "))return ret("variable", "variable");
- else if(type === ")" && (stream.current() == "when" || stream.current() == "when "))return ret("variable", "variable");
- else if(type === ")" || type === "comment" || type === "{")return ret("tag", "tag");
- else if(stream.sol())return ret("tag", "tag");
- else if((stream.eatSpace() && stream.peek() === "#") || stream.peek() === "#")return ret("tag", "tag");
- else if(state.stack.length === 0)return ret("tag", "tag");
- else if(type === ";" && stream.peek() !== undefined && stream.peek().match(/^[.|\#]/g) !== null)return ret("tag", "tag");
-
- else if(type === ":"){stream.eatSpace();return ret(null, stream.current());}
-
- else if(stream.current() === "and " || stream.current() === "and")return ret("variable", stream.current());
- else if(type === ";" && state.stack[state.stack.length-1] === "{")return ret("variable", stream.current());
-
- else if(state.stack[state.stack.length-1] === "rule")return ret(null, stream.current());
-
- return ret("tag", stream.current());
- }
- }
- }
-
- function tokenSComment(stream, state) { // SComment = Slash comment
- stream.skipToEnd();
- state.tokenize = tokenBase;
- return ret("comment", "comment");
- }
-
- function tokenCComment(stream, state) {
- var maybeEnd = false, ch;
- while ((ch = stream.next()) != null) {
- if (maybeEnd && ch == "/") {
- state.tokenize = tokenBase;
- break;
- }
- maybeEnd = (ch == "*");
- }
- return ret("comment", "comment");
- }
-
- function tokenSGMLComment(stream, state) {
- var dashes = 0, ch;
- while ((ch = stream.next()) != null) {
- if (dashes >= 2 && ch == ">") {
- state.tokenize = tokenBase;
- break;
- }
- dashes = (ch == "-") ? dashes + 1 : 0;
- }
- return ret("comment", "comment");
- }
-
- function tokenString(quote) {
- return function(stream, state) {
- var escaped = false, ch;
- while ((ch = stream.next()) != null) {
- if (ch == quote && !escaped)
- break;
- escaped = !escaped && ch == "\\";
- }
- if (!escaped) state.tokenize = tokenBase;
- return ret("string", "string");
- };
- }
-
- return {
- startState: function(base) {
- return {tokenize: tokenBase,
- baseIndent: base || 0,
- stack: []};
- },
-
- token: function(stream, state) {
- if (stream.eatSpace()) return null;
- var style = state.tokenize(stream, state);
-
- var context = state.stack[state.stack.length-1];
- if (type == "hash" && context == "rule") style = "atom";
- else if (style == "variable") {
- if (context == "rule") style = null; //"tag"
- else if (!context || context == "@media{") {
- style = stream.current() == "when" ? "variable" :
- /[\s,|\s\)|\s]/.test(stream.peek()) ? "tag" : type;
- }
- }
-
- if (context == "rule" && /^[\{\};]$/.test(type))
- state.stack.pop();
- if (type == "{") {
- if (context == "@media") state.stack[state.stack.length-1] = "@media{";
- else state.stack.push("{");
- }
- else if (type == "}") state.stack.pop();
- else if (type == "@media") state.stack.push("@media");
- else if (stream.current() === "font-family") state.stack[state.stack.length-1] = "font-family";
- else if (stream.current() === "background-position") state.stack[state.stack.length-1] = "background-position";
- else if (stream.current() === "border-color") state.stack[state.stack.length-1] = "border-color";
- else if (context == "{" && type != "comment" && type !== "tag") state.stack.push("rule");
- else if (stream.peek() === ":" && stream.current().match(/@|#/) === null) style = type;
- if(type === ";" && (state.stack[state.stack.length-1] == "font-family" || state.stack[state.stack.length-1] == "background-position" || state.stack[state.stack.length-1] == "border-color"))state.stack[state.stack.length-1] = stream.current();
- else if(type === "tag" && stream.peek() === ")" && stream.current().match(/\:/) === null){type = null; style = null;}
- // ????
- else if((type === "variable" && stream.peek() === ")") || (type === "variable" && stream.eatSpace() && stream.peek() === ")"))return ret(null,stream.current());
- return style;
- },
-
- indent: function(state, textAfter) {
- var n = state.stack.length;
- if (/^\}/.test(textAfter))
- n -= state.stack[state.stack.length-1] === "rule" ? 2 : 1;
- else if (state.stack[state.stack.length-2] === "{")
- n -= state.stack[state.stack.length-1] === "rule" ? 1 : 0;
- return state.baseIndent + n * indentUnit;
- },
-
- electricChars: "}",
- blockCommentStart: "/*",
- blockCommentEnd: "*/",
- lineComment: "//"
- };
-});
-
-CodeMirror.defineMIME("text/x-less", "less");
-if (!CodeMirror.mimeModes.hasOwnProperty("text/css"))
- CodeMirror.defineMIME("text/css", "less");
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCodeMirrorAdditionsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js (167778 => 167779)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js 2014-04-24 22:24:41 UTC (rev 167778)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js 2014-04-24 22:29:16 UTC (rev 167779)
</span><span class="lines">@@ -233,9 +233,10 @@
</span><span class="cx"> // So call it to get the original start state that we will modify.
</span><span class="cx"> var state = this._startState(base);
</span><span class="cx">
</span><del>- // Start the stack off like it has already parsed a rule. This causes everything
</del><ins>+ // Start off the state stack like it has already parsed a rule. This causes everything
</ins><span class="cx"> // after to be parsed as properties in a rule.
</span><del>- state.stack = ["rule"];
</del><ins>+ state.state = "block";
+ state.context.type = "block";
</ins><span class="cx">
</span><span class="cx"> return state;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCodeMirrorFormattersjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorFormatters.js (167778 => 167779)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorFormatters.js 2014-04-24 22:24:41 UTC (rev 167778)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorFormatters.js 2014-04-24 22:29:16 UTC (rev 167779)
</span><span class="lines">@@ -337,7 +337,7 @@
</span><span class="cx"> if (content === ";")
</span><span class="cx"> return 1;
</span><span class="cx"> if (content === ",") { // "a,b,c,...,z{}" rule list at top level or in @media top level and only if the line length will be large.
</span><del>- if ((!state.stack.length || state.stack.lastValue === "@media{") && state._cssPrettyPrint.lineLength > 60) {
</del><ins>+ if ((!state.stack || !state.stack.length || state.stack.lastValue === "@media{") && state._cssPrettyPrint.lineLength > 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 +395,7 @@
</span><span class="cx"> // In order insert newlines in selector lists we need keep track of the length of the current line.
</span><span class="cx"> // This isn't exact line length, only the builder knows that, but it is good enough to get an idea.
</span><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.length || state.stack.lastValue === "@media{")
</del><ins>+ if (!state.stack || !state.stack.length || state.stack.lastValue === "@media{")
</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="trunkSourceWebInspectorUIUserInterfaceViewsSyntaxHighlightingDefaultThemecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css (167778 => 167779)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css 2014-04-24 22:24:41 UTC (rev 167778)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css 2014-04-24 22:29:16 UTC (rev 167779)
</span><span class="lines">@@ -45,9 +45,10 @@
</span><span class="cx"> .cm-s-default .cm-tag.cm-bracket,
</span><span class="cx"> .cm-s-default .cm-atom,
</span><span class="cx"> .cm-s-default .cm-keyword,
</span><del>-.cm-s-default .cm-m-css.cm-tag,
</del><ins>+.cm-s-default .cm-m-css.cm-atom,
</ins><span class="cx"> .cm-s-default .cm-m-css.cm-meta,
</span><span class="cx"> .cm-s-default .cm-m-css.cm-variable-3,
</span><ins>+.cm-s-default .cm-m-css.cm-property,
</ins><span class="cx"> .cm-s-default .cm-m-javascript.cm-builtin,
</span><span class="cx"> .syntax-highlighted .css-keyword,
</span><span class="cx"> .syntax-highlighted .css-tag,
</span><span class="lines">@@ -59,7 +60,6 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .cm-s-default .cm-number,
</span><del>-.cm-s-default .cm-m-css.cm-atom,
</del><span class="cx"> .syntax-highlighted .css-number,
</span><span class="cx"> .syntax-highlighted .javascript-number {
</span><span class="cx"> color: rgb(28, 0, 207);
</span><span class="lines">@@ -68,12 +68,12 @@
</span><span class="cx"> .cm-s-default .cm-def,
</span><span class="cx"> .cm-s-default .cm-bracket,
</span><span class="cx"> .cm-s-default .cm-operator,
</span><del>-.cm-s-default .cm-qualifier,
</del><span class="cx"> .cm-s-default .cm-variable,
</span><span class="cx"> .cm-s-default .cm-variable-2,
</span><ins>+.cm-s-default .cm-m-css.cm-tag,
</ins><span class="cx"> .cm-s-default .cm-m-css.cm-string-2,
</span><span class="cx"> .cm-s-default .cm-m-css.cm-builtin,
</span><del>-.cm-s-default .cm-m-css.cm-property,
</del><ins>+.cm-s-default .cm-m-css.cm-qualifier,
</ins><span class="cx"> .syntax-highlighted .css-property,
</span><span class="cx"> .syntax-highlighted .css-selector,
</span><span class="cx"> .syntax-highlighted .javascript-ident {
</span></span></pre>
</div>
</div>
</body>
</html>