Changeset 273148 in webkit


Ignore:
Timestamp:
Feb 19, 2021 10:53:42 AM (3 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Truncate long node display names in Grid Overlay list
​https://bugs.webkit.org/show_bug.cgi?id=222057

Patch by Razvan Caliman <Razvan Caliman> on 2021-02-19
Reviewed by BJ Burg.

Truncate long node display names for grid overlays in the Layout panel.

  • UserInterface/Views/CSSGridSection.css:

(.css-grid-section .node-link,):
(.css-grid-section .node-overlay-list):
(.css-grid-section .node-overlay-list-item-container):
(.css-grid-section .node-overlay-list-item-container label):
(.css-grid-section .node-overlay-list-item-container .inline-swatch):

  • UserInterface/Views/CSSGridSection.js:

(WI.CSSGridSection.prototype.initialLayout):
(WI.CSSGridSection.prototype.layout):

  • UserInterface/Views/LayoutDetailsSidebarPanel.css:

(.details-section.layout-css-grid > .content > .group > .row > .css-grid-section):
(.details-section.layout-css-grid > .content,):
Resetting to display: block for .details-section and descendants that use display: table-*
otherwise it messes with the Flexbox layout of nested children.

Location:
trunk/Source/WebInspectorUI
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r273097 r273148  
     12021-02-19  Razvan Caliman  <rcaliman@apple.com>
     2
     3        Web Inspector: Truncate long node display names in Grid Overlay list
     4        https://bugs.webkit.org/show_bug.cgi?id=222057
     5
     6        Reviewed by BJ Burg.
     7
     8        Truncate long node display names for grid overlays in the Layout panel.
     9
     10        * UserInterface/Views/CSSGridSection.css:
     11        (.css-grid-section .node-link,):
     12        (.css-grid-section .node-overlay-list):
     13        (.css-grid-section .node-overlay-list-item-container):
     14        (.css-grid-section .node-overlay-list-item-container label):
     15        (.css-grid-section .node-overlay-list-item-container .inline-swatch):
     16        * UserInterface/Views/CSSGridSection.js:
     17        (WI.CSSGridSection.prototype.initialLayout):
     18        (WI.CSSGridSection.prototype.layout):
     19        * UserInterface/Views/LayoutDetailsSidebarPanel.css:
     20        (.details-section.layout-css-grid > .content > .group > .row > .css-grid-section):
     21        (.details-section.layout-css-grid > .content,):
     22        Resetting to `display: block` for .details-section and descendants that use `display: table-*`
     23        otherwise it messes with the Flexbox layout of nested children.
     24
    1252021-02-18  Nikita Vasilyev  <nvasilyev@apple.com>
    226

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

    r272737 r273148  
    2727.css-grid-section .editor-group > .editor > label {
    2828    margin-inline: 5px;
     29    text-decoration: none;
     30}
     31
     32.css-grid-section .node-overlay-list {
     33    list-style: none;
     34    margin: 0;
     35    padding: 0;
     36}
     37
     38.css-grid-section .node-overlay-list-item-container {
     39    display: flex;
     40    align-items: center;
     41}
     42
     43.css-grid-section .node-overlay-list-item-container label {
     44    flex-shrink: 1;
     45    min-width: 0;
     46    white-space: nowrap;
     47    overflow: hidden;
     48    text-overflow: ellipsis;
     49}
     50
     51.css-grid-section .node-overlay-list-item-container .inline-swatch {
     52    flex-shrink: 0;
    2953}
    3054

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

    r272934 r273148  
    7373
    7474        this._listElement = this.element.appendChild(document.createElement("ul"));
    75         this._listElement.classList.add("node-link-list");
     75        this._listElement.classList.add("node-overlay-list");
    7676
    7777        let settingsGroup = new WI.SettingsGroup(WI.UIString("Grid Overlay Settings", "Page Overlay Settings @ Layout Panel Section Header", "Heading for list of grid overlay settings"));
    … …  
    9595        for (let domNode of this._gridNodeSet) {
    9696            let itemElement = this._listElement.appendChild(document.createElement("li"));
    97             let labelElement = itemElement.appendChild(document.createElement("label"));
     97            let itemContainerElement = itemElement.appendChild(document.createElement("span"));
     98            itemContainerElement.classList.add("node-overlay-list-item-container");
     99
     100            let labelElement = itemContainerElement.appendChild(document.createElement("label"));
    98101            let checkboxElement = labelElement.appendChild(document.createElement("input"));
    99102            checkboxElement.type = "checkbox";
    … …  
    111114
    112115            let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, WI.Color.fromString("magenta"));
    113             itemElement.append(swatch.element);
     116            itemContainerElement.append(swatch.element);
    114117
    115118            swatch.addEventListener(WI.InlineSwatch.Event.ValueChanged, (event) => {

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

    r272670 r273148  
    2525
    2626.details-section.layout-css-grid > .content > .group > .row > .css-grid-section {
    27     margin-inline-start: 6px;
    28     margin-inline-end: 4px;
     27    margin-inline: 6px;
    2928    margin-bottom: 4px;
    3029}
     30
     31.details-section.layout-css-grid > .content,
     32.details-section.layout-css-grid > .content > .group {
     33    display: block;
     34}
Note: See TracChangeset for help on using the changeset viewer.