Modified: trunk/Source/WebInspectorUI/ChangeLog (206007 => 206008)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-09-16 00:33:45 UTC (rev 206007)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-09-16 00:56:14 UTC (rev 206008)
@@ -1,3 +1,51 @@
+2016-09-15 Devin Rousso <[email protected]>
+
+ Web Inspector: support drag and drop of CSS classes and ids onto DOM nodes
+ https://bugs.webkit.org/show_bug.cgi?id=16529
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/Models/DOMNode.js:
+ (WebInspector.DOMNode.prototype.toggleClass.resolvedNode.inspectedPage_node_toggleClass):
+ (WebInspector.DOMNode.prototype.toggleClass.resolvedNode):
+ (WebInspector.DOMNode.prototype.toggleClass):
+ Moved from WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.
+
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
+ (.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container)):
+ Added z-index to fix overlapping with selector origin.
+
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+ (WebInspector.CSSStyleDetailsSidebarPanel):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.computedStyleDetailsPanelShowProperty):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.initialLayout):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._switchPanels):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._classToggleButtonClicked):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassInputBlur):
+ Added a setting for auto-expanding the Classes toggle list based on the previous state.
+ Also renamed the existing _lastSelectedSectionSetting to _lastSelectedPanelSetting since the
+ setting doesn't have anything to do with the last selected section.
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._createToggleForClassName):
+ (WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType):
+ Added functionality to allow dragging of a className toggle's text (not the checkbox) by
+ using a custom type, preventing the value from being dropped anywhere except the DOM tree.
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._createToggleForClassName.classNameToggleChanged):
+ Restructured to use arrow function to avoid function binding.
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.resolvedNode.toggleClass): Deleted.
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.resolvedNode): Deleted.
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass): Deleted.
+
+ * UserInterface/Views/DOMTreeOutline.js:
+ (WebInspector.DOMTreeOutline.prototype._ondragover):
+ (WebInspector.DOMTreeOutline.prototype._ondrop.callback):
+ (WebInspector.DOMTreeOutline.prototype._ondrop):
+ Allow dragging when the dataTransfer object contains the type specified by
+ WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType. The value for that type
+ will be added to the dropped element's classList.
+
2016-09-15 Matt Baker <[email protected]>
Web Inspector: Use more global color variables in TreeOutline and DataGrid
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js (206007 => 206008)
--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js 2016-09-16 00:33:45 UTC (rev 206007)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js 2016-09-16 00:56:14 UTC (rev 206008)
@@ -410,6 +410,36 @@
DOMAgent.removeAttribute(this.id, name, mycallback.bind(this));
}
+ toggleClass(className, flag)
+ {
+ if (!className || !className.length)
+ return;
+
+ if (this.isPseudoElement()) {
+ this.parentNode.toggleClass(className, flag);
+ return;
+ }
+
+ if (this.nodeType() !== Node.ELEMENT_NODE)
+ return;
+
+ function resolvedNode(object)
+ {
+ if (!object)
+ return;
+
+ function inspectedPage_node_toggleClass(className, flag)
+ {
+ this.classList.toggle(className, flag);
+ }
+
+ object.callFunction(inspectedPage_node_toggleClass, [className, flag]);
+ object.release();
+ }
+
+ WebInspector.RemoteObject.resolveNode(this, "", resolvedNode);
+ }
+
getChildNodes(callback)
{
if (this.children) {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (206007 => 206008)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2016-09-16 00:33:45 UTC (rev 206007)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2016-09-16 00:56:14 UTC (rev 206008)
@@ -37,9 +37,10 @@
this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel, this._visualStyleDetailsPanel];
this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo, this._visualStyleDetailsPanel.navigationInfo];
- this._lastSelectedSectionSetting = new WebInspector.Setting("last-selected-style-details-panel", this._rulesStyleDetailsPanel.navigationInfo.identifier);
+ this._lastSelectedPanelSetting = new WebInspector.Setting("last-selected-style-details-panel", this._rulesStyleDetailsPanel.navigationInfo.identifier);
+ this._classListContainerToggledSetting = new WebInspector.Setting("class-list-container-toggled", false);
- this._initiallySelectedPanel = this._panelMatchingIdentifier(this._lastSelectedSectionSetting.value) || this._rulesStyleDetailsPanel;
+ this._initiallySelectedPanel = this._panelMatchingIdentifier(this._lastSelectedPanelSetting.value) || this._rulesStyleDetailsPanel;
this._navigationItem = new WebInspector.ScopeRadioButtonNavigationItem(this.identifier, this.displayName, this._panelNavigationInfo, this._initiallySelectedPanel.navigationInfo);
this._navigationItem.addEventListener(WebInspector.ScopeRadioButtonNavigationItem.Event.SelectedItemChanged, this._handleSelectedItemChanged, this);
@@ -77,7 +78,7 @@
this._rulesStyleDetailsPanel.scrollToSectionAndHighlightProperty(property);
this._switchPanels(this._rulesStyleDetailsPanel);
- this._navigationItem.selectedItemIdentifier = this._lastSelectedSectionSetting.value;
+ this._navigationItem.selectedItemIdentifier = this._lastSelectedPanelSetting.value;
}
// Protected
@@ -201,6 +202,9 @@
WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetAdded, this._styleSheetAddedOrRemoved, this);
WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetRemoved, this._styleSheetAddedOrRemoved, this);
+
+ if (this._classListContainerToggledSetting.value)
+ this._classToggleButtonClicked();
}
sizeDidChange()
@@ -278,7 +282,7 @@
this.contentView.element.classList.toggle("supports-new-rule", typeof this._selectedPanel.newRuleButtonClicked === "function");
this._selectedPanel.shown();
- this._lastSelectedSectionSetting.value = selectedPanel.navigationInfo.identifier;
+ this._lastSelectedPanelSetting.value = selectedPanel.navigationInfo.identifier;
}
_forcedPseudoClassCheckboxChanged(pseudoClass, event)
@@ -329,6 +333,7 @@
{
this._classToggleButton.classList.toggle("selected");
this._classListContainer.hidden = !this._classListContainer.hidden;
+ this._classListContainerToggledSetting.value = !this._classListContainer.hidden;
if (this._classListContainer.hidden)
return;
@@ -351,7 +356,7 @@
_addClassInputBlur(event)
{
- this._toggleClass.call(this, this._addClassInput.value, true);
+ this.domNode.toggleClass(this._addClassInput.value, true);
this._addClassContainer.classList.remove("active");
this._addClassInput.value = null;
}
@@ -405,54 +410,26 @@
let classNameTitle = classNameContainer.createChild("span");
classNameTitle.textContent = className;
+ classNameTitle.draggable = true;
+ classNameTitle.addEventListener("dragstart", (event) => {
+ event.dataTransfer.setData(WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType, className);
+ event.dataTransfer.effectAllowed = "copy";
+ });
- function classNameToggleChanged(event) {
- this._toggleClass.call(this, className, classNameToggle.checked);
+ let classNameToggleChanged = (event) => {
+ this.domNode.toggleClass(className, classNameToggle.checked);
classToggledMap.set(className, classNameToggle.checked);
- }
+ };
- classNameToggle.addEventListener("click", classNameToggleChanged.bind(this));
+ classNameToggle.addEventListener("click", classNameToggleChanged);
classNameTitle.addEventListener("click", (event) => {
classNameToggle.checked = !classNameToggle.checked;
- classNameToggleChanged.call(this);
+ classNameToggleChanged();
});
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);
- }
-
_filterDidChange()
{
this.contentView.element.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
@@ -474,3 +451,4 @@
WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName = "filter-property-non-matching";
WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol = Symbol("css-style-details-sidebar-panel-toggled-classes-symbol");
+WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType = "text/classname";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js (206007 => 206008)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2016-09-16 00:33:45 UTC (rev 206007)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2016-09-16 00:56:14 UTC (rev 206008)
@@ -387,14 +387,20 @@
_ondragover(event)
{
+ if (event.dataTransfer.types.includes(WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType)) {
+ event.preventDefault();
+ event.dataTransfer.dropEffect = "copy";
+ return false;
+ }
+
if (!this._nodeBeingDragged)
return false;
- var treeElement = this._treeElementFromEvent(event);
+ let treeElement = this._treeElementFromEvent(event);
if (!this._isValidDragSourceOrTarget(treeElement))
return false;
- var node = treeElement.representedObject;
+ let node = treeElement.representedObject;
while (node) {
if (node === this._nodeBeingDragged)
return false;
@@ -447,21 +453,25 @@
this.selectDOMNode(newNode, true);
}
- var treeElement = this._treeElementFromEvent(event);
+ let treeElement = this._treeElementFromEvent(event);
if (this._nodeBeingDragged && treeElement) {
- var parentNode;
- var anchorNode;
+ let parentNode = null;
+ let anchorNode = null;
if (treeElement._elementCloseTag) {
// Drop onto closing tag -> insert as last child.
parentNode = treeElement.representedObject;
} else {
- var dragTargetNode = treeElement.representedObject;
+ let dragTargetNode = treeElement.representedObject;
parentNode = dragTargetNode.parentNode;
anchorNode = dragTargetNode;
}
this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
+ } else {
+ let className = event.dataTransfer.getData(WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType);
+ if (className && treeElement)
+ treeElement.representedObject.toggleClass(className, true);
}
delete this._nodeBeingDragged;
