<!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>[187625] 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/187625">187625</a></dd>
<dt>Author</dt> <dd>drousso@apple.com</dd>
<dt>Date</dt> <dd>2015-07-30 16:56:51 -0700 (Thu, 30 Jul 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Support smart-pasting in the Rules sidebar panel
https://bugs.webkit.org/show_bug.cgi?id=147362
Reviewed by Timothy Hatcher.
When pasting over the selector, if the pasted text matches CSS rule
formatting, replace the selected rule with the selector and text in
the pasted data.
* UserInterface/Models/DOMNodeStyles.js:
(WebInspector.DOMNodeStyles.prototype.changeRule.changeCompleted):
(WebInspector.DOMNodeStyles.prototype.changeRule.styleChanged):
(WebInspector.DOMNodeStyles.prototype.changeRule.changeText):
(WebInspector.DOMNodeStyles.prototype.changeRule.ruleSelectorChanged):
(WebInspector.DOMNodeStyles.prototype.changeRule):
* UserInterface/Views/CSSStyleDeclarationSection.js:
(WebInspector.CSSStyleDeclarationSection.prototype._handleSelectorPaste.parseTextForRule):
(WebInspector.CSSStyleDeclarationSection.prototype._handleSelectorPaste):
(WebInspector.CSSStyleDeclarationSection):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsDOMNodeStylesjs">trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationSectionjs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (187624 => 187625)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-07-30 23:51:29 UTC (rev 187624)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-07-30 23:56:51 UTC (rev 187625)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2015-07-30 Devin Rousso <drousso@apple.com>
+
+ Web Inspector: Support smart-pasting in the Rules sidebar panel
+ https://bugs.webkit.org/show_bug.cgi?id=147362
+
+ Reviewed by Timothy Hatcher.
+
+ When pasting over the selector, if the pasted text matches CSS rule
+ formatting, replace the selected rule with the selector and text in
+ the pasted data.
+
+ * UserInterface/Models/DOMNodeStyles.js:
+ (WebInspector.DOMNodeStyles.prototype.changeRule.changeCompleted):
+ (WebInspector.DOMNodeStyles.prototype.changeRule.styleChanged):
+ (WebInspector.DOMNodeStyles.prototype.changeRule.changeText):
+ (WebInspector.DOMNodeStyles.prototype.changeRule.ruleSelectorChanged):
+ (WebInspector.DOMNodeStyles.prototype.changeRule):
+ * UserInterface/Views/CSSStyleDeclarationSection.js:
+ (WebInspector.CSSStyleDeclarationSection.prototype._handleSelectorPaste.parseTextForRule):
+ (WebInspector.CSSStyleDeclarationSection.prototype._handleSelectorPaste):
+ (WebInspector.CSSStyleDeclarationSection):
+
</ins><span class="cx"> 2015-07-30 Matt Baker <mattbaker@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Fix typo in frame duration filtering console.assert message
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsDOMNodeStylesjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js (187624 => 187625)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js 2015-07-30 23:51:29 UTC (rev 187624)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js 2015-07-30 23:56:51 UTC (rev 187625)
</span><span class="lines">@@ -322,6 +322,52 @@
</span><span class="cx"> this._markAsNeedsRefresh();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ changeRule(rule, selector, text)
+ {
+ if (!rule)
+ return;
+
+ selector = selector || "";
+
+ function changeCompleted()
+ {
+ DOMAgent.markUndoableState();
+ this.refresh();
+ }
+
+ function styleChanged(error, stylePayload)
+ {
+ if (error)
+ return;
+
+ changeCompleted.call(this);
+ }
+
+ function changeText(styleId)
+ {
+ // COMPATIBILITY (iOS 6): CSSAgent.setStyleText was not available in iOS 6.
+ if (!text || !text.length || !CSSAgent.setStyleText) {
+ changeCompleted.call(this);
+ return;
+ }
+
+ CSSAgent.setStyleText(styleId, text, styleChanged.bind(this));
+ }
+
+ function ruleSelectorChanged(error, rulePayload)
+ {
+ if (error)
+ return;
+
+ changeText.call(this, rulePayload.style.styleId);
+ }
+
+ this._needsRefresh = true;
+ this._ignoreNextContentDidChangeForStyleSheet = rule.ownerStyleSheet;
+
+ CSSAgent.setRuleSelector(rule.id, selector, ruleSelectorChanged.bind(this));
+ }
+
</ins><span class="cx"> changeRuleSelector(rule, selector)
</span><span class="cx"> {
</span><span class="cx"> selector = selector || "";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationSectionjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js (187624 => 187625)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js 2015-07-30 23:51:29 UTC (rev 187624)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js 2015-07-30 23:56:51 UTC (rev 187625)
</span><span class="lines">@@ -52,6 +52,7 @@
</span><span class="cx"> this._selectorElement.addEventListener("mouseout", this._handleMouseOut.bind(this));
</span><span class="cx"> this._selectorElement.addEventListener("keydown", this._handleKeyDown.bind(this));
</span><span class="cx"> this._selectorElement.addEventListener("keyup", this._handleKeyUp.bind(this));
</span><ins>+ this._selectorElement.addEventListener("paste", this._handleSelectorPaste.bind(this));
</ins><span class="cx"> this._headerElement.appendChild(this._selectorElement);
</span><span class="cx">
</span><span class="cx"> this._originElement = document.createElement("span");
</span><span class="lines">@@ -399,6 +400,43 @@
</span><span class="cx"> return selectorText.trim();
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ _handleSelectorPaste: function(event)
+ {
+ if (this._style.type === WebInspector.CSSStyleDeclaration.Type.Inline || !this._style.ownerRule)
+ return;
+
+ if (!event || !event.clipboardData)
+ return;
+
+ var data = event.clipboardData.getData("text/plain");
+ if (!data)
+ return;
+
+ function parseTextForRule(text)
+ {
+ var containsBraces = /[\{\}]/;
+ if (!containsBraces.test(text))
+ return null;
+
+ var match = text.match(/([^{]+){(.*)}/);
+ if (!match)
+ return null;
+
+ // If the match "body" contains braces, parse that body as if it were a rule.
+ // This will usually happen if the user includes a media query in the copied text.
+ return containsBraces.test(match[2]) ? parseTextForRule(match[2]) : match;
+ }
+
+ var match = parseTextForRule(data);
+ if (!match)
+ return;
+
+ var selector = match[1].trim();
+ this._selectorElement.textContent = selector;
+ this._style.nodeStyles.changeRule(this._style.ownerRule, selector, match[2]);
+ event.preventDefault();
+ },
+
</ins><span class="cx"> _handleContextMenuEvent: function(event)
</span><span class="cx"> {
</span><span class="cx"> if (window.getSelection().toString().length)
</span></span></pre>
</div>
</div>
</body>
</html>