Changeset 214843 in webkit


Ignore:
Timestamp:
Apr 3, 2017 3:07:46 PM (7 years ago)
Author:
Matt Baker
Message:

Web Inspector: DetailsSection should hide header "options" when collapsed
​https://bugs.webkit.org/show_bug.cgi?id=170029

Reviewed by Timothy Hatcher.

  • UserInterface/Views/DOMNodeDetailsSidebarPanel.css:

(.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter):
(.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners.collapsed > .header > .filter): Deleted.
DetailsSection is responsible for hiding options when collapsed.

  • UserInterface/Views/DebuggerSidebarPanel.css:

(.sidebar > .panel.navigation.debugger .details-section.paused-reason.collapsed > .header > .options):

  • UserInterface/Views/DetailsSection.css:

(body[dir=ltr] .details-section > .header > .options,):
(body[dir=ltr] .details-section > .header::before,):
(.details-section.collapsed > .header > .options):
(body[dir=ltr] .details-section > .header > :matches(label, .node-link, .go-to-arrow),): Deleted.
(.details-section.collapsed > .header > label): Deleted.
Removed unnecessary rules. The "options" class covers these cases.

  • UserInterface/Views/DetailsSection.js:

(WebInspector.DetailsSection.prototype.get titleElement):
(WebInspector.DetailsSection.prototype.set titleElement):
Added title element customization so that the hack used by ProbeSetDetailsSection
to get a link into the title can be removed. Yuck!

  • UserInterface/Views/ProbeSetDetailsSection.js:

(WebInspector.ProbeSetDetailsSection):
(WebInspector.ProbeSetDetailsSection.prototype._updateLinkElement):
Use the new DetailsSection title element setter.

  • UserInterface/Views/VisualStyleDetailsPanel.css:

(.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > .options):
(.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > .visual-style-section-clear): Deleted.
(.sidebar > .panel.details.css-style .visual > .details-section .details-section.collapsed > .header > .visual-style-section-clear,): Deleted.
Remove the "visual-style-section-clear" class, as it's no longer needed.

  • UserInterface/Views/VisualStyleDetailsPanel.js:

(WebInspector.VisualStyleDetailsPanel.prototype._generateSection.createOptionsElement):
(WebInspector.VisualStyleDetailsPanel.prototype._generateSection):

Location:
trunk/Source/WebInspectorUI
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r214841 r214843  
     12017-04-03  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: DetailsSection should hide header "options" when collapsed
     4        https://bugs.webkit.org/show_bug.cgi?id=170029
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        * UserInterface/Views/DOMNodeDetailsSidebarPanel.css:
     9        (.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter):
     10        (.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners.collapsed > .header > .filter): Deleted.
     11        DetailsSection is responsible for hiding options when collapsed.
     12
     13        * UserInterface/Views/DebuggerSidebarPanel.css:
     14        (.sidebar > .panel.navigation.debugger .details-section.paused-reason.collapsed > .header > .options):
     15
     16        * UserInterface/Views/DetailsSection.css:
     17        (body[dir=ltr] .details-section > .header > .options,):
     18        (body[dir=ltr] .details-section > .header::before,):
     19        (.details-section.collapsed  > .header > .options):
     20        (body[dir=ltr] .details-section > .header > :matches(label, .node-link, .go-to-arrow),): Deleted.
     21        (.details-section.collapsed  > .header > label): Deleted.
     22        Removed unnecessary rules. The "options" class covers these cases.
     23
     24        * UserInterface/Views/DetailsSection.js:
     25        (WebInspector.DetailsSection.prototype.get titleElement):
     26        (WebInspector.DetailsSection.prototype.set titleElement):
     27        Added title element customization so that the hack used by ProbeSetDetailsSection
     28        to get a link into the title can be removed. Yuck!
     29
     30        * UserInterface/Views/ProbeSetDetailsSection.js:
     31        (WebInspector.ProbeSetDetailsSection):
     32        (WebInspector.ProbeSetDetailsSection.prototype._updateLinkElement):
     33        Use the new DetailsSection title element setter.
     34
     35        * UserInterface/Views/VisualStyleDetailsPanel.css:
     36        (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > .options):
     37        (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > .visual-style-section-clear): Deleted.
     38        (.sidebar > .panel.details.css-style .visual > .details-section .details-section.collapsed > .header > .visual-style-section-clear,): Deleted.
     39        Remove the "visual-style-section-clear" class, as it's no longer needed.
     40
     41        * UserInterface/Views/VisualStyleDetailsPanel.js:
     42        (WebInspector.VisualStyleDetailsPanel.prototype._generateSection.createOptionsElement):
     43        (WebInspector.VisualStyleDetailsPanel.prototype._generateSection):
     44
    1452017-04-03  Joseph Pecoraro  <pecoraro@apple.com>
    246

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

    r213874 r214843  
    2525
    2626.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter {
    27     display: inline-block;
    2827    position: relative;
    2928    width: 14px;
    … …  
    4746}
    4847
    49 .sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners.collapsed > .header > .filter {
    50     display: none;
    51 }
    52 
    5348.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter > select {
    5449    position: absolute;

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

    r213765 r214843  
    8080}
    8181
     82.sidebar > .panel.navigation.debugger .details-section.paused-reason.collapsed > .header > .options {
     83    display: block;
     84}
     85
    8286.sidebar > .panel.navigation.debugger .details-section > .content {
    8387    display: block;

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

    r213874 r214843  
    8080}
    8181
    82 body[dir=ltr] .details-section > .header > :matches(label, .node-link, .go-to-arrow),
    83 body[dir=ltr] .details-section > .header > .options > .navigation-bar,
     82body[dir=ltr] .details-section > .header > .options,
    8483body[dir=rtl] .details-section > .header::before {
    8584    float: right;
    … …  
    8786
    8887body[dir=ltr] .details-section > .header::before,
    89 body[dir=rtl] .details-section > .header > .options > .navigation-bar,
    90 body[dir=rtl] .details-section > .header > :matches(label, .node-link, .go-to-arrow) {
     88body[dir=rtl] .details-section > .header > .options {
    9189    float: left;
    9290}
    … …  
    147145}
    148146
    149 .details-section.collapsed  > .header > label {
     147.details-section.collapsed  > .header > .options {
    150148    display: none;
    151149}

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

    r194490 r214843  
    8686    }
    8787
     88    get titleElement()
     89    {
     90        return this._titleElement;
     91    }
     92
     93    set titleElement(element)
     94    {
     95        console.assert(element instanceof HTMLElement, "Expected titleElement to be an HTMLElement.", element);
     96
     97        this._headerElement.replaceChild(element, this._titleElement);
     98        this._titleElement = element;
     99    }
     100
    88101    get collapsed()
    89102    {

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

    r214439 r214843  
    4242
    4343        this.element.classList.add("probe-set");
    44 
    45         this._optionsElement = optionsElement;
    4644
    4745        this._listenerSet = new WebInspector.EventListenerSet(this, "ProbeSetDetailsSection UI listeners");
    … …  
    9795    {
    9896        var breakpoint = this._probeSet.breakpoint;
    99         var titleElement = null;
    10097        if (breakpoint.sourceCodeLocation.sourceCode)
    101             titleElement = WebInspector.createSourceCodeLocationLink(breakpoint.sourceCodeLocation);
     98            this.titleElement = WebInspector.createSourceCodeLocationLink(breakpoint.sourceCodeLocation);
    10299        else {
    103100            // Fallback for when we can't create a live source link.
    … …  
    105102
    106103            var location = breakpoint.sourceCodeLocation;
    107             titleElement = WebInspector.linkifyLocation(breakpoint.contentIdentifier, location.displayLineNumber, location.displayColumnNumber);
     104            this.titleElement = WebInspector.linkifyLocation(breakpoint.contentIdentifier, location.displayLineNumber, location.displayColumnNumber);
    108105        }
    109106
    110         titleElement.classList.add(WebInspector.ProbeSetDetailsSection.DontFloatLinkStyleClassName);
    111 
    112         if (this._linkElement)
    113             this._optionsElement.removeChild(this._linkElement);
    114 
    115         this._linkElement = titleElement;
    116         this._optionsElement.appendChild(this._linkElement);
     107        this.titleElement.classList.add(WebInspector.ProbeSetDetailsSection.DontFloatLinkStyleClassName);
    117108    }
    118109

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

    r204757 r214843  
    3636}
    3737
    38 .sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > .visual-style-section-clear {
    39     position: absolute;
    40     right: 5px;
     38.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > .options {
    4139    width: 15px;
    4240    height: 15px;
    … …  
    4442    background-size: 15px 15px;
    4543    opacity: 0.7;
    46 }
    47 
    48 .sidebar > .panel.details.css-style .visual > .details-section .details-section.collapsed > .header > .visual-style-section-clear,
    49 .sidebar > .panel.details.css-style .visual > .details-section .details-section:not(.modified) > .header > .visual-style-section-clear {
    50     display: none;
    5144}
    5245

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

    r211462 r214843  
    148148        function createOptionsElement() {
    149149            let container = document.createElement("div");
    150             container.classList.add("visual-style-section-clear");
    151150            container.title = WebInspector.UIString("Clear modified properties");
    152151            container.addEventListener("click", this._clearModifiedSection.bind(this, camelCaseId));
Note: See TracChangeset for help on using the changeset viewer.