Changeset 206008 in webkit


Ignore:
Timestamp:
Sep 15, 2016 5:56:14 PM (8 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: support drag and drop of CSS classes and ids onto DOM nodes
​https://bugs.webkit.org/show_bug.cgi?id=16529

Patch by Devin Rousso <Devin Rousso> on 2016-09-15
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.

Location:
trunk/Source/WebInspectorUI
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r206005 r206008  
     12016-09-15  Devin Rousso  <dcrousso+webkit@gmail.com>
     2
     3        Web Inspector: support drag and drop of CSS classes and ids onto DOM nodes
     4        https://bugs.webkit.org/show_bug.cgi?id=16529
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * UserInterface/Models/DOMNode.js:
     9        (WebInspector.DOMNode.prototype.toggleClass.resolvedNode.inspectedPage_node_toggleClass):
     10        (WebInspector.DOMNode.prototype.toggleClass.resolvedNode):
     11        (WebInspector.DOMNode.prototype.toggleClass):
     12        Moved from WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.
     13
     14        * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
     15        (.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container)):
     16        Added z-index to fix overlapping with selector origin.
     17
     18        * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
     19        (WebInspector.CSSStyleDetailsSidebarPanel):
     20        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.computedStyleDetailsPanelShowProperty):
     21        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.initialLayout):
     22        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._switchPanels):
     23        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._classToggleButtonClicked):
     24        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassInputBlur):
     25        Added a setting for auto-expanding the Classes toggle list based on the previous state.
     26        Also renamed the existing _lastSelectedSectionSetting to _lastSelectedPanelSetting since the
     27        setting doesn't have anything to do with the last selected section.
     28
     29        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._createToggleForClassName):
     30        (WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType):
     31        Added functionality to allow dragging of a className toggle's text (not the checkbox) by
     32        using a custom type, preventing the value from being dropped anywhere except the DOM tree.
     33
     34        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._createToggleForClassName.classNameToggleChanged):
     35        Restructured to use arrow function to avoid function binding.
     36
     37        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.resolvedNode.toggleClass): Deleted.
     38        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.resolvedNode): Deleted.
     39        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass): Deleted.
     40
     41        * UserInterface/Views/DOMTreeOutline.js:
     42        (WebInspector.DOMTreeOutline.prototype._ondragover):
     43        (WebInspector.DOMTreeOutline.prototype._ondrop.callback):
     44        (WebInspector.DOMTreeOutline.prototype._ondrop):
     45        Allow dragging when the dataTransfer object contains the type specified by
     46        WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType.  The value for that type
     47        will be added to the dropped element's classList.
     48
    1492016-09-15  Matt Baker  <mattbaker@apple.com>
    250

  • trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js

    r205426 r206008  
    409409        }
    410410        DOMAgent.removeAttribute(this.id, name, mycallback.bind(this));
     411    }
     412
     413    toggleClass(className, flag)
     414    {
     415        if (!className || !className.length)
     416            return;
     417
     418        if (this.isPseudoElement()) {
     419            this.parentNode.toggleClass(className, flag);
     420            return;
     421        }
     422
     423        if (this.nodeType() !== Node.ELEMENT_NODE)
     424            return;
     425
     426        function resolvedNode(object)
     427        {
     428            if (!object)
     429                return;
     430
     431            function inspectedPage_node_toggleClass(className, flag)
     432            {
     433                this.classList.toggle(className, flag);
     434            }
     435
     436            object.callFunction(inspectedPage_node_toggleClass, [className, flag]);
     437            object.release();
     438        }
     439
     440        WebInspector.RemoteObject.resolveNode(this, "", resolvedNode);
    411441    }
    412442

  • trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css

    r204496 r206008  
    7070    align-items: center;
    7171    position: absolute;
     72    z-index: 1;
    7273    width: 100%;
    7374    background-color: white;

  • trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js

    r203253 r206008  
    3838        this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo, this._visualStyleDetailsPanel.navigationInfo];
    3939
    40         this._lastSelectedSectionSetting = new WebInspector.Setting("last-selected-style-details-panel", this._rulesStyleDetailsPanel.navigationInfo.identifier);
    41 
    42         this._initiallySelectedPanel = this._panelMatchingIdentifier(this._lastSelectedSectionSetting.value) || this._rulesStyleDetailsPanel;
     40        this._lastSelectedPanelSetting = new WebInspector.Setting("last-selected-style-details-panel", this._rulesStyleDetailsPanel.navigationInfo.identifier);
     41        this._classListContainerToggledSetting = new WebInspector.Setting("class-list-container-toggled", false);
     42
     43        this._initiallySelectedPanel = this._panelMatchingIdentifier(this._lastSelectedPanelSetting.value) || this._rulesStyleDetailsPanel;
    4344
    4445        this._navigationItem = new WebInspector.ScopeRadioButtonNavigationItem(this.identifier, this.displayName, this._panelNavigationInfo, this._initiallySelectedPanel.navigationInfo);
    … …  
    7879        this._switchPanels(this._rulesStyleDetailsPanel);
    7980
    80         this._navigationItem.selectedItemIdentifier = this._lastSelectedSectionSetting.value;
     81        this._navigationItem.selectedItemIdentifier = this._lastSelectedPanelSetting.value;
    8182    }
    8283
    … …  
    202203        WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetAdded, this._styleSheetAddedOrRemoved, this);
    203204        WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetRemoved, this._styleSheetAddedOrRemoved, this);
     205
     206        if (this._classListContainerToggledSetting.value)
     207            this._classToggleButtonClicked();
    204208    }
    205209
    … …  
    279283        this._selectedPanel.shown();
    280284
    281         this._lastSelectedSectionSetting.value = selectedPanel.navigationInfo.identifier;
     285        this._lastSelectedPanelSetting.value = selectedPanel.navigationInfo.identifier;
    282286    }
    283287
    … …  
    330334        this._classToggleButton.classList.toggle("selected");
    331335        this._classListContainer.hidden = !this._classListContainer.hidden;
     336        this._classListContainerToggledSetting.value = !this._classListContainer.hidden;
    332337        if (this._classListContainer.hidden)
    333338            return;
    … …  
    352357    _addClassInputBlur(event)
    353358    {
    354         this._toggleClass.call(this, this._addClassInput.value, true);
     359        this.domNode.toggleClass(this._addClassInput.value, true);
    355360        this._addClassContainer.classList.remove("active");
    356361        this._addClassInput.value = null;
    … …  
    406411        let classNameTitle = classNameContainer.createChild("span");
    407412        classNameTitle.textContent = className;
    408 
    409         function classNameToggleChanged(event) {
    410             this._toggleClass.call(this, className, classNameToggle.checked);
     413        classNameTitle.draggable = true;
     414        classNameTitle.addEventListener("dragstart", (event) => {
     415            event.dataTransfer.setData(WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType, className);
     416            event.dataTransfer.effectAllowed = "copy";
     417        });
     418
     419        let classNameToggleChanged = (event) => {
     420            this.domNode.toggleClass(className, classNameToggle.checked);
    411421            classToggledMap.set(className, classNameToggle.checked);
    412         }
    413 
    414         classNameToggle.addEventListener("click", classNameToggleChanged.bind(this));
     422        };
     423
     424        classNameToggle.addEventListener("click", classNameToggleChanged);
    415425        classNameTitle.addEventListener("click", (event) => {
    416426            classNameToggle.checked = !classNameToggle.checked;
    417             classNameToggleChanged.call(this);
     427            classNameToggleChanged();
    418428        });
    419429
    420430        this._classListContainer.appendChild(classNameContainer);
    421     }
    422 
    423     _toggleClass(className, flag)
    424     {
    425         if (!className || !className.length)
    426             return;
    427 
    428         let effectiveNode = this.domNode;
    429         if (effectiveNode && effectiveNode.isPseudoElement())
    430             effectiveNode = effectiveNode.parentNode;
    431 
    432         console.assert(effectiveNode);
    433         if (!effectiveNode)
    434             return;
    435 
    436         if (effectiveNode.nodeType() !== Node.ELEMENT_NODE)
    437             return;
    438 
    439         function resolvedNode(object)
    440         {
    441             if (!object)
    442                 return;
    443 
    444             function toggleClass(className, flag)
    445             {
    446                 this.classList.toggle(className, flag);
    447             }
    448 
    449             object.callFunction(toggleClass, [className, flag]);
    450             object.release();
    451         }
    452 
    453         WebInspector.RemoteObject.resolveNode(effectiveNode, "", resolvedNode);
    454431    }
    455432
    … …  
    475452
    476453WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol = Symbol("css-style-details-sidebar-panel-toggled-classes-symbol");
     454WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType = "text/classname";

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js

    r205425 r206008  
    388388    _ondragover(event)
    389389    {
     390        if (event.dataTransfer.types.includes(WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType)) {
     391            event.preventDefault();
     392            event.dataTransfer.dropEffect = "copy";
     393            return false;
     394        }
     395
    390396        if (!this._nodeBeingDragged)
    391397            return false;
    392398
    393         var treeElement = this._treeElementFromEvent(event);
     399        let treeElement = this._treeElementFromEvent(event);
    394400        if (!this._isValidDragSourceOrTarget(treeElement))
    395401            return false;
    396402
    397         var node = treeElement.representedObject;
     403        let node = treeElement.representedObject;
    398404        while (node) {
    399405            if (node === this._nodeBeingDragged)
    … …  
    448454        }
    449455
    450         var treeElement = this._treeElementFromEvent(event);
     456        let treeElement = this._treeElementFromEvent(event);
    451457        if (this._nodeBeingDragged && treeElement) {
    452             var parentNode;
    453             var anchorNode;
     458            let parentNode = null;
     459            let anchorNode = null;
    454460
    455461            if (treeElement._elementCloseTag) {
    … …  
    457463                parentNode = treeElement.representedObject;
    458464            } else {
    459                 var dragTargetNode = treeElement.representedObject;
     465                let dragTargetNode = treeElement.representedObject;
    460466                parentNode = dragTargetNode.parentNode;
    461467                anchorNode = dragTargetNode;
    … …  
    463469
    464470            this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
     471        } else {
     472            let className = event.dataTransfer.getData(WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType);
     473            if (className && treeElement)
     474                treeElement.representedObject.toggleClass(className, true);
    465475        }
    466476
Note: See TracChangeset for help on using the changeset viewer.