<!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>[188226] 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/188226">188226</a></dd>
<dt>Author</dt> <dd>drousso@apple.com</dd>
<dt>Date</dt> <dd>2015-08-10 13:49:47 -0700 (Mon, 10 Aug 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Add VisualStyleSelectorSection
https://bugs.webkit.org/show_bug.cgi?id=147572
Reviewed by Brian Burg.
Adds a section to the new Visual style sidebar panel that contains the list of
styles for the currently selected node.
* UserInterface/Models/CSSRule.js:
(WebInspector.CSSRule.prototype.get mediaText):
Returns a string containing the list of media queries.
* UserInterface/Models/CSSStyleDeclaration.js:
(WebInspector.CSSStyleDeclaration):
(WebInspector.CSSStyleDeclaration.prototype.set text):
(WebInspector.CSSStyleDeclaration.prototype.get modified):
(WebInspector.CSSStyleDeclaration.prototype.resetText):
(WebInspector.CSSStyleDeclaration.prototype.generateCSSRuleString):
Generates a formatted string of the style text.
* UserInterface/Views/CSSStyleDeclarationSection.js:
(WebInspector.CSSStyleDeclarationSection.prototype._handleContextMenuEvent):
(WebInspector.CSSStyleDeclarationSection.prototype._generateCSSRuleString): Deleted.
* UserInterface/Views/VisualStyleSelectorSection.css: Added.
(.details-section.visual-style-selector-section > .header):
(.details-section.visual-style-selector-section:not(.collapsed) > .header):
(@media (-webkit-min-device-pixel-ratio: 2)):
(.details-section.visual-style-selector-section > .header > .current-selector):
(.visual-style-selector-section.details-section:not(.collapsed) > .header > .current-selector):
(.details-section.visual-style-selector-section > .header > .current-selector > .icon):
(.details-section.visual-style-selector-section > .header > .current-selector > span):
(.details-section.visual-style-selector-section > .header > .controls):
(.details-section.visual-style-selector-section.collapsed > .header > .controls):
(.details-section.visual-style-selector-section > .header > .controls > .visual-style-selector-section-add-rule):
(.details-section.visual-style-selector-section > .content > .selectors):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .visual-style-selector-item:nth-child(odd)):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > .icon):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > :matches(.disclosure-button, .icon)):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > .titles > .title):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider ~ .visual-style-selector-item:nth-child(even)):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider ~ .visual-style-selector-item:nth-child(odd)):
* UserInterface/Views/VisualStyleSelectorSection.js: Added.
(WebInspector.VisualStyleSelectorSection):
(WebInspector.VisualStyleSelectorSection.prototype.update.createSelectorItem):
(WebInspector.VisualStyleSelectorSection.prototype.update.uniqueOrderedRules):
(WebInspector.VisualStyleSelectorSection.prototype.update.insertAllMatchingPseudoRules):
(WebInspector.VisualStyleSelectorSection.prototype.update):
(WebInspector.VisualStyleSelectorSection.prototype.currentStyle):
(WebInspector.VisualStyleSelectorSection.prototype._selectorChanged):
(WebInspector.VisualStyleSelectorSection.prototype._styleTextReset):
(WebInspector.VisualStyleSelectorSection.prototype._addNewRule):
(WebInspector.VisualStyleSelectorSection.prototype._treeElementCheckboxToggled):
(WebInspector.VisualStyleSelectorSection.prototype._handleMouseOver):
(WebInspector.VisualStyleSelectorSection.prototype._handleMouseOut):
* UserInterface/Views/VisualStyleSelectorTreeItem.css:
(.item.visual-style-selector-item):
(.item.visual-style-selector-item.selected):
(.item.visual-style-selector-item > .disclosure-button):
(.item.visual-style-selector-item > input[type="checkbox"]):
(.item.visual-style-selector-item > .icon):
(.item.visual-style-selector-item.modified > .icon):
(.item.visual-style-selector-item.selector-invalid > .icon):
(.item.visual-style-selector-item.selector-invalid > .titles > .title):
(.item.visual-style-selector-item.selector-invalid > .titles > .title::before):
(.item.visual-style-selector-item > .titles):
(.item.visual-style-selector-item:not(.dom-element-icon) > .titles > .title):
(.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title):
(.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title:focus):
(.item.visual-style-selector-item > .titles > .subtitle::before):
(.item.visual-style-selector-item > .titles > .subtitle):
* UserInterface/Views/VisualStyleSelectorTreeItem.js:
(WebInspector.VisualStyleSelectorTreeItem):
(WebInspector.VisualStyleSelectorTreeItem.prototype.get iconClassName):
(WebInspector.VisualStyleSelectorTreeItem.prototype.get selectorText):
(WebInspector.VisualStyleSelectorTreeItem.prototype.onattach):
(WebInspector.VisualStyleSelectorTreeItem.prototype.ondeselect):
(WebInspector.VisualStyleSelectorTreeItem.prototype._highlightNodesWithSelector):
(WebInspector.VisualStyleSelectorTreeItem.prototype._hideDOMNodeHighlight):
(WebInspector.VisualStyleSelectorTreeItem.prototype._handleContextMenuEvent):
(WebInspector.VisualStyleSelectorTreeItem.prototype._handleCheckboxChanged):
(WebInspector.VisualStyleSelectorTreeItem.prototype._updateCheckboxTitle):
(WebInspector.VisualStyleSelectorTreeItem.prototype._handleMainTitleMouseDown):
(WebInspector.VisualStyleSelectorTreeItem.prototype._handleMainTitleKeyDown):
(WebInspector.VisualStyleSelectorTreeItem.prototype._commitSelector):
(WebInspector.VisualStyleSelectorTreeItem.prototype._styleTextModified):
(WebInspector.VisualStyleSelectorTreeItem.prototype._selectorChanged):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsCSSRulejs">trunk/Source/WebInspectorUI/UserInterface/Models/CSSRule.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsCSSStyleDeclarationjs">trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationSectionjs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorSectioncss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorSectionjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorTreeItemcss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorTreeItemjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (188225 => 188226)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2015-08-10 20:38:50 UTC (rev 188225)
+++ trunk/Source/WebInspectorUI/ChangeLog        2015-08-10 20:49:47 UTC (rev 188226)
</span><span class="lines">@@ -1,3 +1,98 @@
</span><ins>+2015-08-10 Devin Rousso <drousso@apple.com>
+
+ Web Inspector: Add VisualStyleSelectorSection
+ https://bugs.webkit.org/show_bug.cgi?id=147572
+
+ Reviewed by Brian Burg.
+
+ Adds a section to the new Visual style sidebar panel that contains the list of
+ styles for the currently selected node.
+
+ * UserInterface/Models/CSSRule.js:
+ (WebInspector.CSSRule.prototype.get mediaText):
+ Returns a string containing the list of media queries.
+
+ * UserInterface/Models/CSSStyleDeclaration.js:
+ (WebInspector.CSSStyleDeclaration):
+ (WebInspector.CSSStyleDeclaration.prototype.set text):
+ (WebInspector.CSSStyleDeclaration.prototype.get modified):
+ (WebInspector.CSSStyleDeclaration.prototype.resetText):
+ (WebInspector.CSSStyleDeclaration.prototype.generateCSSRuleString):
+ Generates a formatted string of the style text.
+
+ * UserInterface/Views/CSSStyleDeclarationSection.js:
+ (WebInspector.CSSStyleDeclarationSection.prototype._handleContextMenuEvent):
+ (WebInspector.CSSStyleDeclarationSection.prototype._generateCSSRuleString): Deleted.
+
+ * UserInterface/Views/VisualStyleSelectorSection.css: Added.
+ (.details-section.visual-style-selector-section > .header):
+ (.details-section.visual-style-selector-section:not(.collapsed) > .header):
+ (@media (-webkit-min-device-pixel-ratio: 2)):
+ (.details-section.visual-style-selector-section > .header > .current-selector):
+ (.visual-style-selector-section.details-section:not(.collapsed) > .header > .current-selector):
+ (.details-section.visual-style-selector-section > .header > .current-selector > .icon):
+ (.details-section.visual-style-selector-section > .header > .current-selector > span):
+ (.details-section.visual-style-selector-section > .header > .controls):
+ (.details-section.visual-style-selector-section.collapsed > .header > .controls):
+ (.details-section.visual-style-selector-section > .header > .controls > .visual-style-selector-section-add-rule):
+ (.details-section.visual-style-selector-section > .content > .selectors):
+ (.details-section.visual-style-selector-section > .content > .selectors > .selector-list):
+ (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .visual-style-selector-item:nth-child(odd)):
+ (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider):
+ (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > .icon):
+ (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > :matches(.disclosure-button, .icon)):
+ (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > .titles > .title):
+ (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider ~ .visual-style-selector-item:nth-child(even)):
+ (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider ~ .visual-style-selector-item:nth-child(odd)):
+
+ * UserInterface/Views/VisualStyleSelectorSection.js: Added.
+ (WebInspector.VisualStyleSelectorSection):
+ (WebInspector.VisualStyleSelectorSection.prototype.update.createSelectorItem):
+ (WebInspector.VisualStyleSelectorSection.prototype.update.uniqueOrderedRules):
+ (WebInspector.VisualStyleSelectorSection.prototype.update.insertAllMatchingPseudoRules):
+ (WebInspector.VisualStyleSelectorSection.prototype.update):
+ (WebInspector.VisualStyleSelectorSection.prototype.currentStyle):
+ (WebInspector.VisualStyleSelectorSection.prototype._selectorChanged):
+ (WebInspector.VisualStyleSelectorSection.prototype._styleTextReset):
+ (WebInspector.VisualStyleSelectorSection.prototype._addNewRule):
+ (WebInspector.VisualStyleSelectorSection.prototype._treeElementCheckboxToggled):
+ (WebInspector.VisualStyleSelectorSection.prototype._handleMouseOver):
+ (WebInspector.VisualStyleSelectorSection.prototype._handleMouseOut):
+
+ * UserInterface/Views/VisualStyleSelectorTreeItem.css:
+ (.item.visual-style-selector-item):
+ (.item.visual-style-selector-item.selected):
+ (.item.visual-style-selector-item > .disclosure-button):
+ (.item.visual-style-selector-item > input[type="checkbox"]):
+ (.item.visual-style-selector-item > .icon):
+ (.item.visual-style-selector-item.modified > .icon):
+ (.item.visual-style-selector-item.selector-invalid > .icon):
+ (.item.visual-style-selector-item.selector-invalid > .titles > .title):
+ (.item.visual-style-selector-item.selector-invalid > .titles > .title::before):
+ (.item.visual-style-selector-item > .titles):
+ (.item.visual-style-selector-item:not(.dom-element-icon) > .titles > .title):
+ (.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title):
+ (.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title:focus):
+ (.item.visual-style-selector-item > .titles > .subtitle::before):
+ (.item.visual-style-selector-item > .titles > .subtitle):
+
+ * UserInterface/Views/VisualStyleSelectorTreeItem.js:
+ (WebInspector.VisualStyleSelectorTreeItem):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype.get iconClassName):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype.get selectorText):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype.onattach):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype.ondeselect):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._highlightNodesWithSelector):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._hideDOMNodeHighlight):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._handleContextMenuEvent):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._handleCheckboxChanged):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._updateCheckboxTitle):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._handleMainTitleMouseDown):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._handleMainTitleKeyDown):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._commitSelector):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._styleTextModified):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._selectorChanged):
+
</ins><span class="cx"> 2015-08-10 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: TDZ in ProbeSetDataGrid construction
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsCSSRulejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSRule.js (188225 => 188226)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSRule.js        2015-08-10 20:38:50 UTC (rev 188225)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSRule.js        2015-08-10 20:49:47 UTC (rev 188226)
</span><span class="lines">@@ -177,6 +177,18 @@
</span><span class="cx"> return this._mediaList;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ get mediaText()
+ {
+ if (!this._mediaList.length)
+ return;
+
+ let mediaText = "";
+ for (let media of this._mediaList)
+ mediaText += media.text;
+
+ return mediaText;
+ }
+
</ins><span class="cx"> isEqualTo(rule)
</span><span class="cx"> {
</span><span class="cx"> if (!rule)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsCSSStyleDeclarationjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js (188225 => 188226)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js        2015-08-10 20:38:50 UTC (rev 188225)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js        2015-08-10 20:49:47 UTC (rev 188226)
</span><span class="lines">@@ -43,6 +43,9 @@
</span><span class="cx"> this._pendingProperties = [];
</span><span class="cx"> this._propertyNameMap = {};
</span><span class="cx">
</span><ins>+ this._initialText = text;
+ this._hasModifiedInitialText = false;
+
</ins><span class="cx"> this.update(text, properties, styleSheetTextRange, true);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -183,9 +186,25 @@
</span><span class="cx"> if (this._text === text)
</span><span class="cx"> return;
</span><span class="cx">
</span><ins>+ var modified = text !== this._initialText;
+ if (modified !== this._hasModifiedInitialText) {
+ this._hasModifiedInitialText = modified;
+ this.dispatchEventToListeners(WebInspector.CSSStyleDeclaration.Event.InitialTextModified);
+ }
+
</ins><span class="cx"> this._nodeStyles.changeStyleText(this, text);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ resetText()
+ {
+ this.text = this._initialText;
+ }
+
+ get modified()
+ {
+ return this._hasModifiedInitialText;
+ }
+
</ins><span class="cx"> get properties()
</span><span class="cx"> {
</span><span class="cx"> return this._properties;
</span><span class="lines">@@ -260,6 +279,43 @@
</span><span class="cx"> return newProperty;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ generateCSSRuleString()
+ {
+ if (!this._ownerRule)
+ return;
+
+ let styleText = "";
+ let mediaQueriesCount = 0;
+ let mediaList = this._ownerRule.mediaList;
+ if (mediaList.length) {
+ mediaQueriesCount = mediaList.length;
+
+ for (let i = mediaQueriesCount - 1; i >= 0; --i)
+ styleText += " ".repeat(mediaQueriesCount - i - 1) + "@media " + mediaList[i].text + " {\n";
+ }
+
+ styleText += " ".repeat(mediaQueriesCount) + this._ownerRule.selectorText + " {\n";
+
+ for (let property of this._properties) {
+ if (property.anonymous)
+ continue;
+
+ styleText += " ".repeat(mediaQueriesCount + 1) + property.text.trim();
+
+ if (!styleText.endsWith(";"))
+ styleText += ";";
+
+ styleText += "\n";
+ }
+
+ for (let i = mediaQueriesCount; i > 0; --i)
+ styleText += " ".repeat(i) + "}\n";
+
+ styleText += "}";
+
+ return styleText;
+ }
+
</ins><span class="cx"> // Protected
</span><span class="cx">
</span><span class="cx"> get nodeStyles()
</span><span class="lines">@@ -269,7 +325,8 @@
</span><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.CSSStyleDeclaration.Event = {
</span><del>- PropertiesChanged: "css-style-declaration-properties-changed"
</del><ins>+ PropertiesChanged: "css-style-declaration-properties-changed",
+ InitialTextModified: "css-style-declaration-initial-text-modified"
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.CSSStyleDeclaration.Type = {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationSectionjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js (188225 => 188226)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js        2015-08-10 20:38:50 UTC (rev 188225)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js        2015-08-10 20:49:47 UTC (rev 188226)
</span><span class="lines">@@ -449,49 +449,12 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> contextMenu.appendItem(WebInspector.UIString("Copy Rule"), function() {
</span><del>- InspectorFrontendHost.copyText(this._generateCSSRuleString());
</del><ins>+ InspectorFrontendHost.copyText(this._style.generateCSSRuleString());
</ins><span class="cx"> }.bind(this));
</span><span class="cx">
</span><span class="cx"> contextMenu.show();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _generateCSSRuleString()
- {
- var numMediaQueries = 0;
- var styleText = "";
-
- if (this._style.ownerRule) {
- var mediaList = this._style.ownerRule.mediaList;
- if (mediaList.length) {
- numMediaQueries = mediaList.length;
-
- for (var i = numMediaQueries - 1; i >= 0; --i)
- styleText += " ".repeat(numMediaQueries - i - 1) + "@media " + mediaList[i].text + " {\n";
- }
-
- styleText += " ".repeat(numMediaQueries) + this._style.ownerRule.selectorText;
- } else
- styleText += this._selectorElement.textContent;
-
- styleText += " {\n";
-
- for (var property of this._style.visibleProperties) {
- styleText += " ".repeat(numMediaQueries + 1) + property.text.trim();
-
- if (!styleText.endsWith(";"))
- styleText += ";";
-
- styleText += "\n";
- }
-
- for (var i = numMediaQueries; i > 0; --i)
- styleText += " ".repeat(i) + "}\n";
-
- styleText += "}";
-
- return styleText;
- }
-
</del><span class="cx"> _toggleRuleOnOff()
</span><span class="cx"> {
</span><span class="cx"> if (this._hasInvalidSelector)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorSectioncss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css (0 => 188226)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css         (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css        2015-08-10 20:49:47 UTC (rev 188226)
</span><span class="lines">@@ -0,0 +1,126 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.details-section.visual-style-selector-section > .header {
+ display: flex;
+ height: 22px;
+}
+
+.details-section.visual-style-selector-section:not(.collapsed) > .header {
+ border-bottom: 1px solid hsl(0, 0%, 70%);
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+ .details-section.visual-style-selector-section:not(.collapsed) > .header {
+ border-width: 0.5px !important;
+ }
+}
+
+.details-section.visual-style-selector-section > .header > .current-selector {
+ width: calc(100% - 85px);
+ margin-left: 10px;
+ font-weight: normal;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.visual-style-selector-section.details-section:not(.collapsed) > .header > .current-selector {
+ display: none;
+}
+
+.details-section.visual-style-selector-section > .header > .current-selector > .icon {
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 3px;
+}
+
+.details-section.visual-style-selector-section > .header > .current-selector > span {
+ margin-left: 21px;
+}
+
+.details-section.visual-style-selector-section > .header > .controls {
+ position: absolute;
+ right: 0;
+ top: 0;
+ border-left: 1px solid hsl(0, 0%, 83%);
+}
+
+.details-section.visual-style-selector-section.collapsed > .header > .controls {
+ display: none;
+}
+
+.details-section.visual-style-selector-section > .header > .controls > .visual-style-selector-section-add-rule {
+ width: 23px;
+ height: 21px;
+ padding: 4px 5px;
+ -webkit-filter: opacity(0.7);
+}
+
+.details-section.visual-style-selector-section > .content > .selectors {
+ max-height: 110px;
+ overflow: auto;
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list {
+ margin: 0;
+ padding-left: 0;
+ outline: none;
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .visual-style-selector-item:nth-child(odd) {
+ background-color: hsl(0, 100%, 100%);
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider {
+ position: -webkit-sticky;
+ top: -1px;
+ height: 17px;
+ padding: 2px;
+ background-color: hsl(0, 0%, 95%);
+ border-color: hsl(0, 0%, 70%);
+ border-style: solid;
+ border-width: 1px 0;
+ z-index: 100;
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > :matches(.disclosure-button, .icon) {
+ display: none;
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > .titles > .title {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider ~ .visual-style-selector-item:nth-child(even) {
+ background-color: hsl(0, 100%, 100%);
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider ~ .visual-style-selector-item:nth-child(odd) {
+ background-color: transparent;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorSectionjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js (0 => 188226)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js         (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js        2015-08-10 20:49:47 UTC (rev 188226)
</span><span class="lines">@@ -0,0 +1,297 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleSelectorSection = class VisualStyleSelectorSection extends WebInspector.DetailsSection
+{
+ constructor(delegate)
+ {
+ let selectorSection = {element: document.createElement("div")};
+ selectorSection.element.classList.add("selectors");
+
+ let controlElement = document.createElement("div");
+ controlElement.classList.add("controls");
+
+ super("visual-style-selector-section", WebInspector.UIString("Style Rules"), [selectorSection], controlElement);
+
+ this._delegate = delegate || null;
+ this._nodeStyles = null;
+
+ this._currentSelectorElement = document.createElement("div");
+ this._currentSelectorElement.classList.add("current-selector");
+
+ let currentSelectorIconElement = document.createElement("img");
+ currentSelectorIconElement.classList.add("icon");
+ this._currentSelectorElement.appendChild(currentSelectorIconElement);
+
+ this._currentSelectorText = document.createElement("span");
+ this._currentSelectorElement.appendChild(this._currentSelectorText);
+
+ this._headerElement.appendChild(this._currentSelectorElement);
+
+ let selectorListElement = document.createElement("ol");
+ selectorListElement.classList.add("selector-list");
+ selectorSection.element.appendChild(selectorListElement);
+
+ this._selectors = new WebInspector.TreeOutline(selectorListElement);
+ this._selectors.onselect = this._selectorChanged.bind(this);
+ this._focusNextNewInspectorRule = false;
+
+ wrappedSVGDocument("Images/Plus.svg", "visual-style-selector-section-add-rule", WebInspector.UIString("Click to add a new rule."), function(wrapper) {
+ wrapper.addEventListener("click", this._addNewRule.bind(this));
+ controlElement.appendChild(wrapper);
+ }.bind(this));
+
+ this._headerElement.addEventListener("mouseover", this._handleMouseOver.bind(this));
+ this._headerElement.addEventListener("mouseout", this._handleMouseOut.bind(this));
+ }
+
+ // Public
+
+ update(nodeStyles)
+ {
+ let style = this.currentStyle();
+ if (style)
+ this._nodeStyles[WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol] = style;
+
+ if (nodeStyles)
+ this._nodeStyles = nodeStyles;
+
+ if (!this._nodeStyles)
+ return;
+
+ this._selectors.removeChildren();
+ let previousRule = null;
+
+ // Pseudo Styles
+ let pseudoRules = [];
+ let pseudoElements = this._nodeStyles.pseudoElements;
+ for (let pseudoIdentifier in pseudoElements)
+ pseudoRules = pseudoRules.concat(pseudoElements[pseudoIdentifier].matchedRules);
+
+ let orderedPseudoRules = uniqueOrderedRules(pseudoRules);
+ // Reverse the array to ensure that splicing the array will not mess with the order.
+ if (orderedPseudoRules.length)
+ orderedPseudoRules.reverse();
+
+ function createSelectorItem(style, title, subtitle) {
+ let selector = new WebInspector.VisualStyleSelectorTreeItem(style, title, subtitle);
+ selector.addEventListener(WebInspector.VisualStyleSelectorTreeItem.Event.StyleTextReset, this._styleTextReset, this);
+ selector.addEventListener(WebInspector.VisualStyleSelectorTreeItem.Event.CheckboxChanged, this._treeElementCheckboxToggled, this);
+ this._selectors.appendChild(selector);
+
+ if (this._focusNextNewInspectorRule && style.ownerRule && style.ownerRule.type === WebInspector.CSSRule.Type.Inspector) {
+ selector.select(true);
+ selector.element.scrollIntoView();
+ this._nodeStyles[WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol] = style;
+ this._focusNextNewInspectorRule = false;
+ return;
+ }
+
+ if (this._nodeStyles[WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol] === style) {
+ selector.select(true);
+ selector.element.scrollIntoView();
+ }
+ }
+
+ function uniqueOrderedRules(orderedRules)
+ {
+ if (!orderedRules || !orderedRules.length)
+ return new Array;
+
+ let uniqueRules = new Map;
+ for (let rule of orderedRules) {
+ if (!uniqueRules.has(rule.id))
+ uniqueRules.set(rule.id, rule);
+ }
+ return Array.from(uniqueRules.values());
+ }
+
+ function insertAllMatchingPseudoRules(force)
+ {
+ if (!orderedPseudoRules.length)
+ return;
+
+ if (force) {
+ for (let i = orderedPseudoRules.length - 1; i >= 0; --i) {
+ let pseudoRule = orderedPseudoRules[i];
+ createSelectorItem.call(this, pseudoRule.style, pseudoRule.selectorText, pseudoRule.mediaText);
+ }
+ orderedPseudoRules = [];
+ }
+
+ if (!previousRule)
+ return;
+
+ for (let i = orderedPseudoRules.length - 1; i >= 0; --i) {
+ let pseudoRule = orderedPseudoRules[i];
+ if (!pseudoRule.selectorIsGreater(previousRule.mostSpecificSelector))
+ continue;
+
+ createSelectorItem.call(this, pseudoRule.style, pseudoRule.selectorText, pseudoRule.mediaText);
+ previousRule = pseudoRule;
+ orderedPseudoRules.splice(i, 1);
+ }
+ }
+
+ if (!this._nodeStyles[WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol])
+ this._nodeStyles[WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol] = this._nodeStyles.inlineStyle;
+
+ // Inline Style
+ createSelectorItem.call(this, this._nodeStyles.inlineStyle, WebInspector.UIString("This Element"));
+
+ // Matched Rules
+ for (let rule of uniqueOrderedRules(this._nodeStyles.matchedRules)) {
+ if (rule.type === WebInspector.CSSRule.Type.UserAgent) {
+ insertAllMatchingPseudoRules.call(this, true);
+ continue;
+ }
+
+ insertAllMatchingPseudoRules.call(this);
+ createSelectorItem.call(this, rule.style, rule.selectorText, rule.mediaText);
+ previousRule = rule;
+ }
+
+ // Just in case there are any remaining pseudo-styles.
+ insertAllMatchingPseudoRules.call(this, true);
+
+ // Inherited Rules
+ for (let inherited of this._nodeStyles.inheritedRules) {
+ if (!inherited.matchedRules || !inherited.matchedRules.length)
+ continue;
+
+ let dividerText = WebInspector.UIString("Inherited from %s").format(WebInspector.displayNameForNode(inherited.node));
+ let divider = new WebInspector.GeneralTreeElement("section-divider", dividerText);
+ divider.selectable = false;
+ this._selectors.appendChild(divider);
+
+ for (let rule of uniqueOrderedRules(inherited.matchedRules)) {
+ if (rule.type === WebInspector.CSSRule.Type.UserAgent)
+ continue;
+
+ createSelectorItem.call(this, rule.style, rule.selectorText, rule.mediaText);
+ }
+ }
+
+ this._focusNextNewInspectorRule = false;
+ }
+
+ currentStyle()
+ {
+ if (!this._nodeStyles || !this._selectors.selectedTreeElement)
+ return;
+
+ return this._selectors.selectedTreeElement.representedObject;
+ }
+
+ // Private
+
+ _selectorChanged(selectedTreeElement)
+ {
+ console.assert(selectedTreeElement);
+ if (!selectedTreeElement)
+ return;
+
+ // The class needs to be completely reset as the previously selected treeElement most likely had
+ // a different icon className and it is simpler to regenerate the class than to find out which
+ // class was previously applied.
+ this._currentSelectorElement.className = "current-selector " + selectedTreeElement.iconClassName;
+
+ let selectorText = selectedTreeElement.mainTitle;
+ let mediaText = selectedTreeElement.subtitle;
+ if (mediaText && mediaText.length)
+ selectorText += " \u2014 " + mediaText; // em-dash
+
+ this._currentSelectorText.textContent = selectorText;
+
+ this.dispatchEventToListeners(WebInspector.VisualStyleSelectorSection.Event.SelectorChanged);
+ }
+
+ _styleTextReset()
+ {
+ this.dispatchEventToListeners(WebInspector.VisualStyleSelectorSection.Event.StyleTextChanged);
+ }
+
+ _addNewRule(event)
+ {
+ if (!this._nodeStyles)
+ return;
+
+ this._nodeStyles.addEmptyRule();
+ this._focusNextNewInspectorRule = true;
+ }
+
+ _treeElementCheckboxToggled(event)
+ {
+ let style = this.currentStyle();
+ if (!style)
+ return;
+
+ let styleText = style.text;
+ if (!styleText || !styleText.length)
+ return;
+
+ // Comment or uncomment the style text.
+ let newStyleText = "";
+ let styleEnabled = event && event.data && event.data.enabled;
+ if (styleEnabled)
+ newStyleText = styleText.replace(/\s*(\/\*|\*\/)\s*/g, "");
+ else
+ newStyleText = "/* " + styleText.replace(/(\s*;(?!$)\s*)/g, "$1 *//* ") + " */";
+
+ style.text = newStyleText;
+ style[WebInspector.VisualStyleDetailsPanel.StyleDisabledSymbol] = !styleEnabled;
+ this.dispatchEventToListeners(WebInspector.VisualStyleSelectorSection.Event.SelectorChanged);
+
+ }
+
+ _handleMouseOver()
+ {
+ if (!this.collapsed)
+ return;
+
+ let style = this.currentStyle();
+ if (!style.ownerRule) {
+ WebInspector.domTreeManager.highlightDOMNode(style.node.id);
+ return;
+ }
+
+ WebInspector.domTreeManager.highlightSelector(style.ownerRule.selectorText, style.node.ownerDocument.frameIdentifier);
+ }
+
+ _handleMouseOut()
+ {
+ if (!this.collapsed)
+ return;
+
+ WebInspector.domTreeManager.hideDOMNodeHighlight();
+ }
+};
+
+WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol = Symbol("visual-style-selector-section-last-selected-rule");
+
+WebInspector.VisualStyleSelectorSection.Event = {
+ SelectorChanged: "visual-style-selector-section-selector-changed",
+ StyleTextChanged: "visual-style-selector-section-style-text-changed"
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorTreeItemcss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css (0 => 188226)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css         (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css        2015-08-10 20:49:47 UTC (rev 188226)
</span><span class="lines">@@ -0,0 +1,114 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.item.visual-style-selector-item {
+ display: flex;
+ width: 100%;
+ height: 25px;
+ padding: 2px 0;
+ line-height: 20px;
+ font-size: 11px;
+}
+
+.item.visual-style-selector-item.selected {
+ background-color: hsl(213, 92%, 55%) !important;
+ color: hsl(0, 100%, 100%);
+}
+
+.item.visual-style-selector-item > .disclosure-button {
+ display: none;
+}
+
+.item.visual-style-selector-item > input[type="checkbox"] {
+ margin: 4.5px 0 4px 5px;
+}
+
+.item.visual-style-selector-item > .icon {
+ width: 16px;
+ height: 16px;
+ margin: 2.5px 0 2.5px 4px;
+}
+
+.item.visual-style-selector-item.modified > .icon {
+ -webkit-filter: brightness(0.75);
+}
+
+.item.visual-style-selector-item.selector-invalid > .icon {
+ width: 14px;
+ height: 14px;
+ margin: 3.5px 0 3.5px 5px;
+ content: url(../Images/Error.svg);
+}
+
+.item.visual-style-selector-item.selector-invalid > .titles > .title {
+ position: relative;
+}
+
+.item.visual-style-selector-item.selector-invalid > .titles > .title::before {
+ position: absolute;
+ top: calc(50% - 0.5px);
+ left: 0;
+ width: 100%;
+ border-bottom: 1px solid hsla(0, 100%, 50%, 0.6);
+ content: "";
+}
+
+.item.visual-style-selector-item > .titles {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding: 0 2px 0 3px;
+}
+
+.item.visual-style-selector-item:not(.dom-element-icon) > .titles > .title {
+ padding: 0 1px 2px;
+ line-height: 12px;
+ outline: none;
+}
+
+.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title {
+ cursor: text;
+ -webkit-user-select: text;
+ -webkit-user-modify: read-write-plaintext-only;
+}
+
+.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title:focus {
+ color: black;
+ background-color: hsl(0, 100%, 100%);
+ border-radius: 2px;
+ box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(0, 100%, 100%, 0.3);
+}
+
+.item.visual-style-selector-item > .titles > .subtitle::before {
+ margin-right: 5px;
+ font-size: 11px;
+ /* The extra space at the beginning is necessary to prevent the -webkit-user-modify
+ cursor bar from displaying at the beginning of the em-dash. */
+ content: " \2014"; /* em-dash */
+}
+
+.item.visual-style-selector-item > .titles > .subtitle {
+ font-size: 9px;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorTreeItemjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js (0 => 188226)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js         (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js        2015-08-10 20:49:47 UTC (rev 188226)
</span><span class="lines">@@ -0,0 +1,206 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleSelectorTreeItem = class VisualStyleSelectorTreeItem extends WebInspector.GeneralTreeElement
+{
+ constructor(style, title, subtitle)
+ {
+ let iconClassName;
+ switch (style.type) {
+ case WebInspector.CSSStyleDeclaration.Type.Rule:
+ console.assert(style.ownerRule instanceof WebInspector.CSSRule, style.ownerRule);
+
+ if (style.inherited)
+ iconClassName = WebInspector.CSSStyleDeclarationSection.InheritedStyleRuleIconStyleClassName;
+ else if (style.ownerRule.type === WebInspector.CSSRule.Type.Author)
+ iconClassName = WebInspector.CSSStyleDeclarationSection.AuthorStyleRuleIconStyleClassName;
+ else if (style.ownerRule.type === WebInspector.CSSRule.Type.User)
+ iconClassName = WebInspector.CSSStyleDeclarationSection.UserStyleRuleIconStyleClassName;
+ else if (style.ownerRule.type === WebInspector.CSSRule.Type.UserAgent)
+ iconClassName = WebInspector.CSSStyleDeclarationSection.UserAgentStyleRuleIconStyleClassName;
+ else if (style.ownerRule.type === WebInspector.CSSRule.Type.Inspector)
+ iconClassName = WebInspector.CSSStyleDeclarationSection.InspectorStyleRuleIconStyleClassName;
+ break;
+
+ case WebInspector.CSSStyleDeclaration.Type.Inline:
+ case WebInspector.CSSStyleDeclaration.Type.Attribute:
+ if (style.inherited)
+ iconClassName = WebInspector.CSSStyleDeclarationSection.InheritedElementStyleRuleIconStyleClassName;
+ else
+ iconClassName = WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName;
+ break;
+ }
+
+ title = title.trim();
+
+ super(["visual-style-selector-item", iconClassName], title, subtitle, style);
+
+ this._iconClassName = iconClassName;
+ this._lastValue = title;
+ this._enableEditing = true;
+ }
+
+ // Public
+
+ get iconClassName()
+ {
+ return this._iconClassName;
+ }
+
+ get selectorText()
+ {
+ let titleText = this._mainTitleElement.textContent;
+ if (!titleText || !titleText.length)
+ titleText = this._mainTitle;
+
+ return titleText.trim();
+ }
+
+ // Protected
+
+ onattach()
+ {
+ super.onattach();
+
+ this._listItemNode.addEventListener("mouseover", this._highlightNodesWithSelector.bind(this));
+ this._listItemNode.addEventListener("mouseout", this._hideDOMNodeHighlight.bind(this));
+ this._listItemNode.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
+
+ this._checkboxElement = document.createElement("input");
+ this._checkboxElement.type = "checkbox";
+ this._checkboxElement.checked = !this.representedObject[WebInspector.VisualStyleDetailsPanel.StyleDisabledSymbol];
+ this._updateCheckboxTitle();
+ this._checkboxElement.addEventListener("change", this._handleCheckboxChanged.bind(this));
+ this._listItemNode.insertBefore(this._checkboxElement, this._iconElement);
+
+ this._mainTitleElement.spellcheck = false;
+ this._mainTitleElement.addEventListener("mousedown", this._handleMainTitleMouseDown.bind(this));
+ this._mainTitleElement.addEventListener("keydown", this._handleMainTitleKeyDown.bind(this));
+ this._mainTitleElement.addEventListener("keyup", this._highlightNodesWithSelector.bind(this));
+ this._mainTitleElement.addEventListener("blur", this._commitSelector.bind(this));
+
+ this.representedObject.addEventListener(WebInspector.CSSStyleDeclaration.Event.InitialTextModified, this._styleTextModified, this);
+ if (this.representedObject.ownerRule)
+ this.representedObject.ownerRule.addEventListener(WebInspector.CSSRule.Event.SelectorChanged, this._selectorChanged, this);
+
+ this._styleTextModified();
+ }
+
+ ondeselect()
+ {
+ this._listItemNode.classList.remove("editable");
+ }
+
+ // Private
+
+ _highlightNodesWithSelector()
+ {
+ if (!this.representedObject.ownerRule) {
+ WebInspector.domTreeManager.highlightDOMNode(this.representedObject.node.id);
+ return;
+ }
+
+ WebInspector.domTreeManager.highlightSelector(this.selectorText, this.representedObject.node.ownerDocument.frameIdentifier);
+ }
+
+ _hideDOMNodeHighlight()
+ {
+ WebInspector.domTreeManager.hideDOMNodeHighlight();
+ }
+
+ _handleContextMenuEvent(event)
+ {
+ let contextMenu = new WebInspector.ContextMenu(event);
+
+ contextMenu.appendItem(WebInspector.UIString("Copy Rule"), function() {
+ InspectorFrontendHost.copyText(this.representedObject.generateCSSRuleString());
+ }.bind(this));
+
+ contextMenu.appendItem(WebInspector.UIString("Reset"), function() {
+ this.representedObject.resetText();
+ this.dispatchEventToListeners(WebInspector.VisualStyleSelectorTreeItem.Event.StyleTextReset);
+ }.bind(this));
+
+ contextMenu.show();
+ }
+
+ _handleCheckboxChanged(event)
+ {
+ this._updateCheckboxTitle();
+ this.dispatchEventToListeners(WebInspector.VisualStyleSelectorTreeItem.Event.CheckboxChanged, {enabled: this._checkboxElement.checked});
+ }
+
+ _updateCheckboxTitle()
+ {
+ if (this._checkboxElement.checked)
+ this._checkboxElement.title = WebInspector.UIString("Click to disable the selected rule");
+ else
+ this._checkboxElement.title = WebInspector.UIString("Click to enable the selected rule");
+ }
+
+ _handleMainTitleMouseDown(event)
+ {
+ this._listItemNode.classList.toggle("editable", this.selected);
+ }
+
+ _handleMainTitleKeyDown(event)
+ {
+ this._highlightNodesWithSelector();
+
+ let enterKeyCode = WebInspector.KeyboardShortcut.Key.Enter.keyCode;
+ if (event.keyCode === enterKeyCode)
+ this._mainTitleElement.blur();
+ }
+
+ _commitSelector()
+ {
+ this._hideDOMNodeHighlight();
+ this._listItemNode.classList.remove("editable");
+
+ let value = this.selectorText;
+ if (value === this._lastValue && this._valid)
+ return;
+
+ this.representedObject.ownerRule.selectorText = value;
+ }
+
+ _styleTextModified()
+ {
+ this._listItemNode.classList.toggle("modified", this.representedObject.modified);
+ }
+
+ _selectorChanged(event)
+ {
+ this._valid = event && event.data && event.data.valid;
+ this._listItemNode.classList.toggle("selector-invalid", !this._valid);
+ let invalidTitle = WebInspector.UIString("The selector '%s' is invalid.").format(this.selectorText);
+ this._iconElement.title = !this._valid ? invalidTitle : null;
+ }
+};
+
+WebInspector.VisualStyleSelectorTreeItem.Event = {
+ StyleTextReset: "visual-style-selector-item-style-text-reset",
+ CheckboxChanged: "visual-style-selector-item-checkbox-changed"
+};
</ins></span></pre>
</div>
</div>
</body>
</html>