<!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>[180343] 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/180343">180343</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2015-02-19 07:36:30 -0800 (Thu, 19 Feb 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Disable DOM Tree Editing / Styles Editing of Shadow DOM Nodes
https://bugs.webkit.org/show_bug.cgi?id=141793
Patch by Joseph Pecoraro <pecoraro@apple.com> on 2015-02-19
Reviewed by Timothy Hatcher.
Currently the backend disallows editing of Shadow DOM nodes,
so the frontend should not provide options that do not work.
Long term we should allow editing Shadow DOM nodes.
* UserInterface/Models/CSSStyleDeclaration.js:
(WebInspector.CSSStyleDeclaration.prototype.get editable):
Inline styles on a Shadow DOM node are not editable.
* UserInterface/Views/DOMTreeElement.js:
(WebInspector.DOMTreeElement.prototype.ondelete):
(WebInspector.DOMTreeElement.prototype._startEditingTarget):
(WebInspector.DOMTreeElement.prototype._populateTagContextMenu):
(WebInspector.DOMTreeElement.prototype._populateTextContextMenu):
(WebInspector.DOMTreeElement.prototype._populateNodeContextMenu):
(WebInspector.DOMTreeElement.prototype._startEditing):
Disable context menus and keyboard shortcuts on Shadow DOM nodes.
Only Context Menu item we keep is "Copy as HTML".
* UserInterface/Views/DOMTreeOutline.js:
(WebInspector.DOMTreeOutline.prototype._contextMenuEventFired):
(WebInspector.DOMTreeOutline.prototype.populateContextMenu):
Eliminate double look-up.
* UserInterface/Views/RulesStyleDetailsPanel.js:
(WebInspector.RulesStyleDetailsPanel.prototype.refresh.addNewRuleButton):
Do not add the New Rule Button to the Styles Sidebar of Shadow DOM Nodes.
Instead this will just be an empty divider.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsCSSStyleDeclarationjs">trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinejs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (180342 => 180343)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-02-19 08:40:26 UTC (rev 180342)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-02-19 15:36:30 UTC (rev 180343)
</span><span class="lines">@@ -1,3 +1,38 @@
</span><ins>+2015-02-19 Joseph Pecoraro <pecoraro@apple.com>
+
+ Web Inspector: Disable DOM Tree Editing / Styles Editing of Shadow DOM Nodes
+ https://bugs.webkit.org/show_bug.cgi?id=141793
+
+ Reviewed by Timothy Hatcher.
+
+ Currently the backend disallows editing of Shadow DOM nodes,
+ so the frontend should not provide options that do not work.
+ Long term we should allow editing Shadow DOM nodes.
+
+ * UserInterface/Models/CSSStyleDeclaration.js:
+ (WebInspector.CSSStyleDeclaration.prototype.get editable):
+ Inline styles on a Shadow DOM node are not editable.
+
+ * UserInterface/Views/DOMTreeElement.js:
+ (WebInspector.DOMTreeElement.prototype.ondelete):
+ (WebInspector.DOMTreeElement.prototype._startEditingTarget):
+ (WebInspector.DOMTreeElement.prototype._populateTagContextMenu):
+ (WebInspector.DOMTreeElement.prototype._populateTextContextMenu):
+ (WebInspector.DOMTreeElement.prototype._populateNodeContextMenu):
+ (WebInspector.DOMTreeElement.prototype._startEditing):
+ Disable context menus and keyboard shortcuts on Shadow DOM nodes.
+ Only Context Menu item we keep is "Copy as HTML".
+
+ * UserInterface/Views/DOMTreeOutline.js:
+ (WebInspector.DOMTreeOutline.prototype._contextMenuEventFired):
+ (WebInspector.DOMTreeOutline.prototype.populateContextMenu):
+ Eliminate double look-up.
+
+ * UserInterface/Views/RulesStyleDetailsPanel.js:
+ (WebInspector.RulesStyleDetailsPanel.prototype.refresh.addNewRuleButton):
+ Do not add the New Rule Button to the Styles Sidebar of Shadow DOM Nodes.
+ Instead this will just be an empty divider.
+
</ins><span class="cx"> 2015-02-18 Nikita Vasilyev <nvasilyev@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: REGRESSION: Missing Divider line between console.log and console evaluation
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsCSSStyleDeclarationjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js (180342 => 180343)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js 2015-02-19 08:40:26 UTC (rev 180342)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js 2015-02-19 15:36:30 UTC (rev 180343)
</span><span class="lines">@@ -90,7 +90,16 @@
</span><span class="cx">
</span><span class="cx"> get editable()
</span><span class="cx"> {
</span><del>- return !!this._id && ((this._type === WebInspector.CSSStyleDeclaration.Type.Rule && this._ownerRule && this._ownerRule.editable) || this._type === WebInspector.CSSStyleDeclaration.Type.Inline);
</del><ins>+ if (!this._id)
+ return false;
+
+ if (this._type === WebInspector.CSSStyleDeclaration.Type.Rule)
+ return this._ownerRule && this._ownerRule.editable;
+
+ if (this._type === WebInspector.CSSStyleDeclaration.Type.Inline)
+ return !this._node.isInShadowTree();
+
+ return false;
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> update: function(text, properties, styleSheetTextRange, dontFireEvents)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (180342 => 180343)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2015-02-19 08:40:26 UTC (rev 180342)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2015-02-19 15:36:30 UTC (rev 180343)
</span><span class="lines">@@ -514,6 +514,9 @@
</span><span class="cx">
</span><span class="cx"> ondelete: function()
</span><span class="cx"> {
</span><ins>+ if (this.representedObject.isInShadowTree())
+ return false;
+
</ins><span class="cx"> var startTagTreeElement = this.treeOutline.findTreeElement(this.representedObject);
</span><span class="cx"> if (startTagTreeElement)
</span><span class="cx"> startTagTreeElement.remove();
</span><span class="lines">@@ -579,6 +582,9 @@
</span><span class="cx"> if (this.treeOutline.selectedDOMNode() !== this.representedObject)
</span><span class="cx"> return false;
</span><span class="cx">
</span><ins>+ if (this.representedObject.isInShadowTree())
+ return false;
+
</ins><span class="cx"> if (this.representedObject.nodeType() !== Node.ELEMENT_NODE && this.representedObject.nodeType() !== Node.TEXT_NODE)
</span><span class="cx"> return false;
</span><span class="cx">
</span><span class="lines">@@ -603,19 +609,22 @@
</span><span class="cx">
</span><span class="cx"> _populateTagContextMenu: function(contextMenu, event)
</span><span class="cx"> {
</span><del>- var attribute = event.target.enclosingNodeOrSelfWithClass("html-attribute");
- var newAttribute = event.target.enclosingNodeOrSelfWithClass("add-attribute");
</del><ins>+ var node = this.representedObject;
+ if (!node.isInShadowTree()) {
+ var attribute = event.target.enclosingNodeOrSelfWithClass("html-attribute");
+ var newAttribute = event.target.enclosingNodeOrSelfWithClass("add-attribute");
</ins><span class="cx">
</span><del>- // Add attribute-related actions.
- contextMenu.appendItem(WebInspector.UIString("Add Attribute"), this._addNewAttribute.bind(this));
- if (attribute && !newAttribute)
- contextMenu.appendItem(WebInspector.UIString("Edit Attribute"), this._startEditingAttribute.bind(this, attribute, event.target));
- contextMenu.appendSeparator();
</del><ins>+ // Add attribute-related actions.
+ contextMenu.appendItem(WebInspector.UIString("Add Attribute"), this._addNewAttribute.bind(this));
+ if (attribute && !newAttribute)
+ contextMenu.appendItem(WebInspector.UIString("Edit Attribute"), this._startEditingAttribute.bind(this, attribute, event.target));
+ contextMenu.appendSeparator();
</ins><span class="cx">
</span><del>- if (WebInspector.cssStyleManager.canForcePseudoClasses()) {
- var pseudoSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString("Forced Pseudo-Classes"));
- this._populateForcedPseudoStateItems(pseudoSubMenu);
- contextMenu.appendSeparator();
</del><ins>+ if (WebInspector.cssStyleManager.canForcePseudoClasses()) {
+ var pseudoSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString("Forced Pseudo-Classes"));
+ this._populateForcedPseudoStateItems(pseudoSubMenu);
+ contextMenu.appendSeparator();
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._populateNodeContextMenu(contextMenu);
</span><span class="lines">@@ -638,16 +647,22 @@
</span><span class="cx">
</span><span class="cx"> _populateTextContextMenu: function(contextMenu, textNode)
</span><span class="cx"> {
</span><del>- contextMenu.appendItem(WebInspector.UIString("Edit Text"), this._startEditingTextNode.bind(this, textNode));
</del><ins>+ var node = this.representedObject;
+ if (!node.isInShadowTree())
+ contextMenu.appendItem(WebInspector.UIString("Edit Text"), this._startEditingTextNode.bind(this, textNode));
+
</ins><span class="cx"> this._populateNodeContextMenu(contextMenu);
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _populateNodeContextMenu: function(contextMenu)
</span><span class="cx"> {
</span><span class="cx"> // Add free-form node-related actions.
</span><del>- contextMenu.appendItem(WebInspector.UIString("Edit as HTML"), this._editAsHTML.bind(this));
</del><ins>+ var node = this.representedObject;
+ if (!node.isInShadowTree())
+ contextMenu.appendItem(WebInspector.UIString("Edit as HTML"), this._editAsHTML.bind(this));
</ins><span class="cx"> contextMenu.appendItem(WebInspector.UIString("Copy as HTML"), this._copyHTML.bind(this));
</span><del>- contextMenu.appendItem(WebInspector.UIString("Delete Node"), this.remove.bind(this));
</del><ins>+ if (!node.isInShadowTree())
+ contextMenu.appendItem(WebInspector.UIString("Delete Node"), this.remove.bind(this));
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _startEditing: function()
</span><span class="lines">@@ -655,6 +670,9 @@
</span><span class="cx"> if (this.treeOutline.selectedDOMNode() !== this.representedObject)
</span><span class="cx"> return false;
</span><span class="cx">
</span><ins>+ if (this.representedObject.isInShadowTree())
+ return false;
+
</ins><span class="cx"> var listItem = this._listItemNode;
</span><span class="cx">
</span><span class="cx"> if (this._canAddAttributes) {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js (180342 => 180343)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2015-02-19 08:40:26 UTC (rev 180342)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2015-02-19 15:36:30 UTC (rev 180343)
</span><span class="lines">@@ -453,19 +453,16 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> var contextMenu = new WebInspector.ContextMenu(event);
</span><del>- this.populateContextMenu(contextMenu, event);
</del><ins>+ this.populateContextMenu(contextMenu, event, treeElement);
</ins><span class="cx"> contextMenu.show();
</span><span class="cx"> },
</span><span class="cx">
</span><del>- populateContextMenu: function(contextMenu, event)
</del><ins>+ populateContextMenu: function(contextMenu, event, treeElement)
</ins><span class="cx"> {
</span><del>- var treeElement = this._treeElementFromEvent(event);
- if (!treeElement)
- return false;
-
</del><span class="cx"> var tag = event.target.enclosingNodeOrSelfWithClass("html-tag");
</span><span class="cx"> var textNode = event.target.enclosingNodeOrSelfWithClass("html-text-node");
</span><span class="cx"> var commentNode = event.target.enclosingNodeOrSelfWithClass("html-comment");
</span><ins>+
</ins><span class="cx"> var populated = false;
</span><span class="cx"> if (tag && treeElement._populateTagContextMenu) {
</span><span class="cx"> if (populated)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js (180342 => 180343)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2015-02-19 08:40:26 UTC (rev 180342)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2015-02-19 15:36:30 UTC (rev 180343)
</span><span class="lines">@@ -148,14 +148,16 @@
</span><span class="cx"> if (previousSection)
</span><span class="cx"> previousSection.lastInGroup = true;
</span><span class="cx">
</span><del>- var newRuleButton = document.createElement("div");
- newRuleButton.className = WebInspector.RulesStyleDetailsPanel.NewRuleElementStyleClassName;
- newRuleButton.addEventListener("click", this._newRuleClicked.bind(this));
</del><ins>+ if (!this.nodeStyles.node.isInShadowTree()) {
+ var newRuleButton = document.createElement("div");
+ newRuleButton.className = WebInspector.RulesStyleDetailsPanel.NewRuleElementStyleClassName;
+ newRuleButton.addEventListener("click", this._newRuleClicked.bind(this));
</ins><span class="cx">
</span><del>- newRuleButton.appendChild(document.createElement("img"));
- newRuleButton.appendChild(document.createTextNode(WebInspector.UIString("New Rule")));
</del><ins>+ newRuleButton.appendChild(document.createElement("img"));
+ newRuleButton.appendChild(document.createTextNode(WebInspector.UIString("New Rule")));
</ins><span class="cx">
</span><del>- newDOMFragment.appendChild(newRuleButton);
</del><ins>+ newDOMFragment.appendChild(newRuleButton);
+ }
</ins><span class="cx">
</span><span class="cx"> addedNewRuleButton = true;
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>