<!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>[195432] 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/195432">195432</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-01-21 18:06:49 -0800 (Thu, 21 Jan 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Add toggle-able list of classes for each element
https://bugs.webkit.org/show_bug.cgi?id=152678
Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2016-01-21
Reviewed by Timothy Hatcher.
Adds a button to the CSS sidebar that, when toggled, displays a section
directly above it containing all the classes for the selected node that,
when toggled, adds or removes the class from the node.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Protocol/RemoteObject.js:
(WebInspector.RemoteObject.prototype.callFunction.mycallback):
(WebInspector.RemoteObject.prototype.callFunction):
Add extra handling of arguments to allow nicer looking calls by other classes.
* UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
Changed next-sibling selector (+) to general-sibling selector (~).
(.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container)):
(.sidebar > .panel.details.css-style > .content:not(.supports-new-rule, .has-filter-bar) ~ :matches(.options-container, .class-list-container)):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container[hidden]):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > input[type="checkbox"]):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .add-class-icon):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class:not(.active) > .class-name-input):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > *:matches(.new-class, .class-toggle)):
* UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
(WebInspector.CSSStyleDetailsSidebarPanel):
Also changed the few instances of "var" to "let".
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.addEventListeners):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._handleNodeAttributeModified):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._handleNodeAttributeRemoved):
Adds listeners to the DOMNode specifically listening for changes to the
class attribute and repopulates the class toggle list if fired.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._classToggleButtonClicked):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassContainerClicked):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassInputKeyPressed):
If the Enter key is pressed, add a new class equal to the input value.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassInputBlur):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._populateClassToggles):
Loops through all the classes, including previously removed ones, for the
selected node and creates a toggle for each.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._createToggleForClassName.classNameToggleChanged):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._createToggleForClassName):
Creates a toggle element for the given className and adds it to the container.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.resolvedNode.toggleClass):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.resolvedNode):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass):
Uses the Element.classList to toggle the given className on the selected node.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceProtocolRemoteObjectjs">trunk/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (195431 => 195432)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-01-22 02:05:28 UTC (rev 195431)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-01-22 02:06:49 UTC (rev 195432)
</span><span class="lines">@@ -1,3 +1,68 @@
</span><ins>+2016-01-21 Devin Rousso <dcrousso+webkit@gmail.com>
+
+ Web Inspector: Add toggle-able list of classes for each element
+ https://bugs.webkit.org/show_bug.cgi?id=152678
+
+ Reviewed by Timothy Hatcher.
+
+ Adds a button to the CSS sidebar that, when toggled, displays a section
+ directly above it containing all the classes for the selected node that,
+ when toggled, adds or removes the class from the node.
+
+ * Localizations/en.lproj/localizedStrings.js:
+
+ * UserInterface/Protocol/RemoteObject.js:
+ (WebInspector.RemoteObject.prototype.callFunction.mycallback):
+ (WebInspector.RemoteObject.prototype.callFunction):
+ Add extra handling of arguments to allow nicer looking calls by other classes.
+
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
+ Changed next-sibling selector (+) to general-sibling selector (~).
+
+ (.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container)):
+ (.sidebar > .panel.details.css-style > .content:not(.supports-new-rule, .has-filter-bar) ~ :matches(.options-container, .class-list-container)):
+ (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
+ (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected):
+ (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container[hidden]):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > input[type="checkbox"]):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .add-class-icon):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class:not(.active) > .class-name-input):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container > *:matches(.new-class, .class-toggle)):
+
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+ (WebInspector.CSSStyleDetailsSidebarPanel):
+ Also changed the few instances of "var" to "let".
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.addEventListeners):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._handleNodeAttributeModified):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._handleNodeAttributeRemoved):
+ Adds listeners to the DOMNode specifically listening for changes to the
+ class attribute and repopulates the class toggle list if fired.
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._classToggleButtonClicked):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassContainerClicked):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassInputKeyPressed):
+ If the Enter key is pressed, add a new class equal to the input value.
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassInputBlur):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._populateClassToggles):
+ Loops through all the classes, including previously removed ones, for the
+ selected node and creates a toggle for each.
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._createToggleForClassName.classNameToggleChanged):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._createToggleForClassName):
+ Creates a toggle element for the given className and adds it to the container.
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.resolvedNode.toggleClass):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.resolvedNode):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass):
+ Uses the Element.classList to toggle the given className on the selected node.
+
</ins><span class="cx"> 2016-01-20 Saam barati <sbarati@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Hook the sampling profiler into the Timelines UI
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (195431 => 195432)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-22 02:05:28 UTC (rev 195431)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-22 02:06:49 UTC (rev 195432)
</span><span class="lines">@@ -53,6 +53,7 @@
</span><span class="cx"> localizedStrings["Add New"] = "Add New";
</span><span class="cx"> localizedStrings["Add New Probe Expression"] = "Add New Probe Expression";
</span><span class="cx"> localizedStrings["Add New Watch Expression"] = "Add New Watch Expression";
</span><ins>+localizedStrings["Add a Class"] = "Add a Class";
</ins><span class="cx"> localizedStrings["Add new breakpoint action after this action"] = "Add new breakpoint action after this action";
</span><span class="cx"> localizedStrings["Add probe expression"] = "Add probe expression";
</span><span class="cx"> localizedStrings["Add watch expression"] = "Add watch expression";
</span><span class="lines">@@ -116,6 +117,7 @@
</span><span class="cx"> localizedStrings["Checked"] = "Checked";
</span><span class="cx"> localizedStrings["Child Layers"] = "Child Layers";
</span><span class="cx"> localizedStrings["Children"] = "Children";
</span><ins>+localizedStrings["Classes"] = "Classes";
</ins><span class="cx"> localizedStrings["Clear"] = "Clear";
</span><span class="cx"> localizedStrings["Clear Log"] = "Clear Log";
</span><span class="cx"> localizedStrings["Clear Log on Navigation"] = "Clear Log on Navigation";
</span><span class="lines">@@ -266,6 +268,7 @@
</span><span class="cx"> localizedStrings["Encoded"] = "Encoded";
</span><span class="cx"> localizedStrings["Encoding"] = "Encoding";
</span><span class="cx"> localizedStrings["End Capturing"] = "End Capturing";
</span><ins>+localizedStrings["Enter Class Name"] = "Enter Class Name";
</ins><span class="cx"> localizedStrings["Enter a Gradient"] = "Enter a Gradient";
</span><span class="cx"> localizedStrings["Enter a URL"] = "Enter a URL";
</span><span class="cx"> localizedStrings["Enter a name."] = "Enter a name.";
</span><span class="lines">@@ -647,6 +650,7 @@
</span><span class="cx"> localizedStrings["Timer Removed"] = "Timer Removed";
</span><span class="cx"> localizedStrings["Timestamp \u2014 %s"] = "Timestamp \u2014 %s";
</span><span class="cx"> localizedStrings["Timing"] = "Timing";
</span><ins>+localizedStrings["Toggle Classes"] = "Toggle Classes";
</ins><span class="cx"> localizedStrings["Top"] = "Top";
</span><span class="cx"> localizedStrings["Total Time"] = "Total Time";
</span><span class="cx"> localizedStrings["Total number of resources, click to show the Resources tab"] = "Total number of resources, click to show the Resources tab";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceProtocolRemoteObjectjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js (195431 => 195432)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js 2016-01-22 02:05:28 UTC (rev 195431)
+++ trunk/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js 2016-01-22 02:06:49 UTC (rev 195432)
</span><span class="lines">@@ -416,13 +416,15 @@
</span><span class="cx"> function mycallback(error, result, wasThrown)
</span><span class="cx"> {
</span><span class="cx"> result = result ? WebInspector.RemoteObject.fromPayload(result) : null;
</span><del>- callback(error, result, wasThrown);
</del><ins>+
+ if (callback && typeof callback === "function")
+ callback(error, result, wasThrown);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (args)
</span><span class="cx"> args = args.map(WebInspector.RemoteObject.createCallArgument);
</span><span class="cx">
</span><del>- RuntimeAgent.callFunctionOn(this._objectId, appendWebInspectorSourceURL(functionDeclaration.toString()), args, true, undefined, generatePreview, mycallback);
</del><ins>+ RuntimeAgent.callFunctionOn(this._objectId, appendWebInspectorSourceURL(functionDeclaration.toString()), args, true, undefined, !!generatePreview, mycallback);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> callFunctionJSON(functionDeclaration, args, callback)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css (195431 => 195432)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2016-01-22 02:05:28 UTC (rev 195431)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2016-01-22 02:06:49 UTC (rev 195432)
</span><span class="lines">@@ -65,22 +65,25 @@
</span><span class="cx"> white-space: nowrap;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.sidebar > .panel.details.css-style > .content + .options-container {
</del><ins>+.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container) {
</ins><span class="cx"> display: flex;
</span><span class="cx"> align-items: center;
</span><span class="cx"> position: absolute;
</span><del>- bottom: 0;
</del><span class="cx"> width: 100%;
</span><del>- height: 29px;
</del><span class="cx"> background-color: white;
</span><span class="cx"> border-top: 1px solid hsl(0, 0%, 70%);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.sidebar > .panel.details.css-style > .content:not(.supports-new-rule, .has-filter-bar) + .options-container {
</del><ins>+.sidebar > .panel.details.css-style > .content ~ .options-container {
+ bottom: 0;
+ height: 30px;
+}
+
+.sidebar > .panel.details.css-style > .content:not(.supports-new-rule, .has-filter-bar) ~ :matches(.options-container, .class-list-container) {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.sidebar > .panel.details.css-style > .content + .options-container > .new-rule {
</del><ins>+.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
</ins><span class="cx"> width: 15px;
</span><span class="cx"> min-width: 15px;
</span><span class="cx"> height: 15px;
</span><span class="lines">@@ -89,16 +92,77 @@
</span><span class="cx"> opacity: 0.7;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.sidebar > .panel.details.css-style > .content + .options-container > .filter-bar {
</del><ins>+.sidebar > .panel.details.css-style > .content ~ .options-container > .filter-bar {
</ins><span class="cx"> width: -webkit-fill-available;
</span><span class="cx"> background-color: transparent;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.sidebar > .panel.details.css-style > .content:not(.supports-new-rule) + .options-container > .new-rule,
-.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) + .options-container > .filter-bar {
</del><ins>+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
+ margin: 0 5px 1px 0;
+ padding: 2px 4px 3px;
+ background: none;
+ border: none;
+ border-radius: 3px;
+ -webkit-appearance: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected {
+ color: white;
+ background-color: hsl(212, 92%, 54%);
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover {
+ color: white;
+ background-color: hsla(212, 92%, 54%, 0.5);
+}
+
+.sidebar > .panel.details.css-style > .content:not(.supports-new-rule) ~ .options-container > .new-rule,
+.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) ~ .options-container > .filter-bar {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.sidebar > .panel.details.css-style > .content ~ .class-list-container {
+ flex-wrap: wrap;
+ bottom: 30px;
+ max-height: 65px;
+ padding: 3px 2px;
+ overflow-y: scroll;
+}
+
+/* FIXME: <https://webkit.org/b/152674> Elements with the "hidden" attribute still show up if "display: flex;" */
+.sidebar > .panel.details.css-style > .content ~ .class-list-container[hidden] {
+ display: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class {
+ display: flex;
+ align-items: center;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > input[type="checkbox"] {
+ pointer-events: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .add-class-icon {
+ width: 12px;
+ height: 12px;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input {
+ width: 100px;
+ height: 18px;
+ margin: 0 0 0 2px;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class.active > .add-class-icon,
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class:not(.active) > .class-name-input {
+ display: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > *:matches(.new-class, .class-toggle) {
+ margin: 1px 3px;
+}
+
</ins><span class="cx"> .sidebar > .panel.details.css-style > .content.filter-in-progress .filter-matching {
</span><span class="cx"> display: inline;
</span><span class="cx"> background-color: hsla(53, 83%, 53%, 0.5);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (195431 => 195432)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2016-01-22 02:05:28 UTC (rev 195431)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2016-01-22 02:06:49 UTC (rev 195432)
</span><span class="lines">@@ -37,15 +37,15 @@
</span><span class="cx"> this._forcedPseudoClassContainer = document.createElement("div");
</span><span class="cx"> this._forcedPseudoClassContainer.className = "pseudo-classes";
</span><span class="cx">
</span><del>- var groupElement = null;
</del><ins>+ let groupElement = null;
</ins><span class="cx">
</span><span class="cx"> WebInspector.CSSStyleManager.ForceablePseudoClasses.forEach(function(pseudoClass) {
</span><span class="cx"> // We don't localize the label since it is a CSS pseudo-class from the CSS standard.
</span><del>- var label = pseudoClass.capitalize();
</del><ins>+ let label = pseudoClass.capitalize();
</ins><span class="cx">
</span><del>- var labelElement = document.createElement("label");
</del><ins>+ let labelElement = document.createElement("label");
</ins><span class="cx">
</span><del>- var checkboxElement = document.createElement("input");
</del><ins>+ let checkboxElement = document.createElement("input");
</ins><span class="cx"> checkboxElement.addEventListener("change", this._forcedPseudoClassCheckboxChanged.bind(this, pseudoClass));
</span><span class="cx"> checkboxElement.type = "checkbox";
</span><span class="cx">
</span><span class="lines">@@ -87,24 +87,43 @@
</span><span class="cx"> this._navigationItem = new WebInspector.ScopeRadioButtonNavigationItem(this._identifier, this._displayName, this._panelNavigationInfo, selectedPanel.navigationInfo);
</span><span class="cx"> this._navigationItem.addEventListener(WebInspector.ScopeRadioButtonNavigationItem.Event.SelectedItemChanged, this._handleSelectedItemChanged, this);
</span><span class="cx">
</span><del>- var optionsContainer = document.createElement("div");
- optionsContainer.classList.add("options-container");
</del><ins>+ let optionsContainer = this.element.createChild("div", "options-container");
</ins><span class="cx">
</span><del>- var newRuleButton = document.createElement("img");
- newRuleButton.classList.add("new-rule");
</del><ins>+ let newRuleButton = optionsContainer.createChild("img", "new-rule");
</ins><span class="cx"> newRuleButton.title = WebInspector.UIString("New Rule");
</span><span class="cx"> newRuleButton.addEventListener("click", this._newRuleButtonClicked.bind(this));
</span><del>- optionsContainer.appendChild(newRuleButton);
</del><span class="cx">
</span><span class="cx"> this._filterBar = new WebInspector.FilterBar;
</span><span class="cx"> this._filterBar.placeholder = WebInspector.UIString("Filter Styles");
</span><span class="cx"> this._filterBar.addEventListener(WebInspector.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
</span><span class="cx"> optionsContainer.appendChild(this._filterBar.element);
</span><span class="cx">
</span><ins>+ this._classToggleButton = optionsContainer.createChild("button", "toggle-class-toggle");
+ this._classToggleButton.textContent = WebInspector.UIString("Classes");
+ this._classToggleButton.title = WebInspector.UIString("Toggle Classes");
+ this._classToggleButton.addEventListener("click", this._classToggleButtonClicked.bind(this));
+
+ this._classListContainer = this.element.createChild("div", "class-list-container");
+ this._classListContainer.hidden = true;
+
+ this._addClassContainer = this._classListContainer.createChild("div", "new-class");
+ this._addClassContainer.title = WebInspector.UIString("Add a Class");
+ this._addClassContainer.addEventListener("click", this._addClassContainerClicked.bind(this));
+
+ let addClassCheckbox = this._addClassContainer.createChild("input");
+ addClassCheckbox.type = "checkbox";
+ addClassCheckbox.checked = true;
+
+ let addClassIcon = useSVGSymbol("Images/Plus13.svg", "add-class-icon");
+ this._addClassContainer.appendChild(addClassIcon);
+
+ this._addClassInput = this._addClassContainer.createChild("input", "class-name-input");
+ this._addClassInput.setAttribute("placeholder", WebInspector.UIString("Enter Class Name"));
+ this._addClassInput.addEventListener("keypress", this._addClassInputKeyPressed.bind(this));
+ this._addClassInput.addEventListener("blur", this._addClassInputBlur.bind(this));
+
</ins><span class="cx"> WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetAdded, this.refresh, this);
</span><span class="cx"> WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetRemoved, this.refresh, this);
</span><del>-
- this.element.appendChild(optionsContainer);
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -116,18 +135,21 @@
</span><span class="cx">
</span><span class="cx"> refresh()
</span><span class="cx"> {
</span><del>- var domNode = this.domNode;
</del><ins>+ let domNode = this.domNode;
</ins><span class="cx"> if (!domNode)
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this.contentView.element.scrollTop = this._initialScrollOffset;
</span><span class="cx">
</span><del>- for (var panel of this._panels) {
</del><ins>+ for (let panel of this._panels) {
</ins><span class="cx"> panel.element._savedScrollTop = undefined;
</span><span class="cx"> panel.markAsNeedsRefresh(domNode);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._updatePseudoClassCheckboxes();
</span><ins>+
+ if (!this._classListContainer.hidden)
+ this._populateClassToggles();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> visibilityDidChange()
</span><span class="lines">@@ -168,16 +190,18 @@
</span><span class="cx">
</span><span class="cx"> addEventListeners()
</span><span class="cx"> {
</span><del>- var effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
</del><ins>+ let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
</ins><span class="cx"> if (!effectiveDOMNode)
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> effectiveDOMNode.addEventListener(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassCheckboxes, this);
</span><ins>+ effectiveDOMNode.addEventListener(WebInspector.DOMNode.Event.AttributeModified, this._handleNodeAttributeModified, this);
+ effectiveDOMNode.addEventListener(WebInspector.DOMNode.Event.AttributeRemoved, this._handleNodeAttributeRemoved, this);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> removeEventListeners()
</span><span class="cx"> {
</span><del>- var effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
</del><ins>+ let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
</ins><span class="cx"> if (!effectiveDOMNode)
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="lines">@@ -201,9 +225,8 @@
</span><span class="cx">
</span><span class="cx"> _panelMatchingIdentifier(identifier)
</span><span class="cx"> {
</span><del>- var selectedPanel
-
- for (var panel of this._panels) {
</del><ins>+ let selectedPanel = null;
+ for (let panel of this._panels) {
</ins><span class="cx"> if (panel.navigationInfo.identifier !== identifier)
</span><span class="cx"> continue;
</span><span class="cx">
</span><span class="lines">@@ -216,8 +239,8 @@
</span><span class="cx">
</span><span class="cx"> _handleSelectedItemChanged()
</span><span class="cx"> {
</span><del>- var selectedIdentifier = this._navigationItem.selectedItemIdentifier;
- var selectedPanel = this._panelMatchingIdentifier(selectedIdentifier);
</del><ins>+ let selectedIdentifier = this._navigationItem.selectedItemIdentifier;
+ let selectedPanel = this._panelMatchingIdentifier(selectedIdentifier);
</ins><span class="cx"> this._switchPanels(selectedPanel);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -258,7 +281,7 @@
</span><span class="cx"> if (!this.domNode)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- var effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
</del><ins>+ let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
</ins><span class="cx">
</span><span class="cx"> effectiveDOMNode.setPseudoClassEnabled(pseudoClass, event.target.checked);
</span><span class="cx"> }
</span><span class="lines">@@ -268,22 +291,162 @@
</span><span class="cx"> if (!this.domNode)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- var effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
</del><ins>+ let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
</ins><span class="cx">
</span><del>- var enabledPseudoClasses = effectiveDOMNode.enabledPseudoClasses;
</del><ins>+ let enabledPseudoClasses = effectiveDOMNode.enabledPseudoClasses;
</ins><span class="cx">
</span><del>- for (var pseudoClass in this._forcedPseudoClassCheckboxes) {
- var checkboxElement = this._forcedPseudoClassCheckboxes[pseudoClass];
</del><ins>+ for (let pseudoClass in this._forcedPseudoClassCheckboxes) {
+ let checkboxElement = this._forcedPseudoClassCheckboxes[pseudoClass];
</ins><span class="cx"> checkboxElement.checked = enabledPseudoClasses.includes(pseudoClass);
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _handleNodeAttributeModified(event)
+ {
+ if (event && event.data && event.data.name === "class")
+ this._populateClassToggles();
+ }
+
+ _handleNodeAttributeRemoved(event)
+ {
+ if (event && event.data && event.data.name === "class")
+ this._populateClassToggles();
+ }
+
+
</ins><span class="cx"> _newRuleButtonClicked()
</span><span class="cx"> {
</span><span class="cx"> if (this._selectedPanel && typeof this._selectedPanel.newRuleButtonClicked === "function")
</span><span class="cx"> this._selectedPanel.newRuleButtonClicked();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _classToggleButtonClicked(event)
+ {
+ this._classToggleButton.classList.toggle("selected");
+ this._classListContainer.hidden = !this._classListContainer.hidden;
+ if (this._classListContainer.hidden)
+ return;
+
+ this._populateClassToggles();
+ }
+
+ _addClassContainerClicked(event)
+ {
+ this._addClassContainer.classList.add("active");
+ this._addClassInput.focus();
+ }
+
+ _addClassInputKeyPressed(event)
+ {
+ if (event.keyCode !== WebInspector.KeyboardShortcut.Key.Enter.keyCode)
+ return;
+
+ this._addClassInput.blur();
+ }
+
+ _addClassInputBlur(event)
+ {
+ this._toggleClass.call(this, this._addClassInput.value, true);
+ this._addClassContainer.classList.remove("active");
+ this._addClassInput.value = null;
+ }
+
+ _populateClassToggles()
+ {
+ this._classListContainer.removeChildren();
+ this._classListContainer.appendChild(this._addClassContainer);
+
+ let classes = this.domNode.getAttribute("class");
+ let classToggledMap = this.domNode[WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol];
+ if (!classToggledMap)
+ classToggledMap = this.domNode[WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol] = new Map;
+
+ if (classes && classes.length) {
+ for (let className of classes.split(/\s+/))
+ classToggledMap.set(className, true);
+ }
+
+ for (let [className, toggled] of classToggledMap) {
+ if ((toggled && !classes.includes(className)) || (!toggled && classes.includes(className))) {
+ toggled = !toggled;
+ classToggledMap.set(className, toggled);
+ }
+
+ this._createToggleForClassName(className);
+ }
+ }
+
+ _createToggleForClassName(className)
+ {
+ if (!className || !className.length)
+ return;
+
+ let classToggledMap = this.domNode[WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol];
+ if (!classToggledMap)
+ return;
+
+ if (!classToggledMap.has(className))
+ classToggledMap.set(className, true);
+
+ let toggled = classToggledMap.get(className);
+
+ let classNameContainer = document.createElement("div");
+ classNameContainer.classList.add("class-toggle");
+
+ let classNameToggle = classNameContainer.createChild("input");
+ classNameToggle.type = "checkbox";
+ classNameToggle.checked = toggled;
+
+ let classNameTitle = classNameContainer.createChild("span");
+ classNameTitle.textContent = className;
+
+ function classNameToggleChanged(event) {
+ this._toggleClass.call(this, className, classNameToggle.checked);
+ classToggledMap.set(className, classNameToggle.checked);
+ }
+
+ classNameToggle.addEventListener("click", classNameToggleChanged.bind(this));
+ classNameTitle.addEventListener("click", (event) => {
+ classNameToggle.checked = !classNameToggle.checked;
+ classNameToggleChanged.call(this);
+ });
+
+ this._classListContainer.appendChild(classNameContainer);
+ }
+
+ _toggleClass(className, flag)
+ {
+ if (!className || !className.length)
+ return;
+
+ let effectiveNode = this.domNode;
+ if (effectiveNode && effectiveNode.isPseudoElement())
+ effectiveNode = effectiveNode.parentNode;
+
+ console.assert(effectiveNode);
+ if (!effectiveNode)
+ return;
+
+ if (effectiveNode.nodeType() !== Node.ELEMENT_NODE)
+ return;
+
+ function resolvedNode(object)
+ {
+ if (!object)
+ return;
+
+ function toggleClass(className, flag)
+ {
+ this.classList.toggle(className, flag);
+ }
+
+ object.callFunction(toggleClass, [className, flag]);
+ object.release();
+ }
+
+ WebInspector.RemoteObject.resolveNode(effectiveNode, "", resolvedNode);
+ }
+
</ins><span class="cx"> _filterDidChange()
</span><span class="cx"> {
</span><span class="cx"> this.contentView.element.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
</span><span class="lines">@@ -299,3 +462,4 @@
</span><span class="cx"> WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName = "filter-section-non-matching";
</span><span class="cx"> WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName = "filter-property-non-matching";
</span><span class="cx">
</span><ins>+WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol = Symbol("css-style-details-sidebar-panel-toggled-classes-symbol");
</ins></span></pre>
</div>
</div>
</body>
</html>