Bug 205033 – Web Inspector: REGRESSION(r253167): Elements: class list toggle doesn't stay sticky to the bottom of the sidebar

• Component: Web Inspector
• Status: RESOLVED FIXED

[Devin Rousso]

Created attachment 385200 [details]
[Image] Screenshot of issue

.

[Devin Rousso]

Created attachment 385202 [details]
Patch

[Devin Rousso]

*** Bug 205031 has been marked as a duplicate of this bug. ***

[Nikita Vasilyev]

Comment on attachment 385202 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=385202&action=review

> Source/WebInspectorUI/ChangeLog:15
> +        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
> +        (.spreadsheet-css-declaration:nth-last-child(n of .spreadsheet-css-declaration)): Added.
> +        Drive-by: remove the bottom border from the last section since there's a top border on both
> +                  the class list toggle area and the filter bar.

That's not what it does. It removes the border after every section.

I don't think we should remove this subtle 0.5px border for the last section. The background of the panel is different from the section background — I don't think it looks good without the border.

[Devin Rousso]

Comment on attachment 385202 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=385202&action=review

>> Source/WebInspectorUI/ChangeLog:15
>> +                  the class list toggle area and the filter bar.
> 
> That's not what it does. It removes the border after every section.
> 
> I don't think we should remove this subtle 0.5px border for the last section. The background of the panel is different from the section background — I don't think it looks good without the border.

I suppose.  I was trying to avoid a double-border when the content of the sidebar is scrolled all the way to the bottom.  I'll think of other alternatives.

> Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:37
> +.spreadsheet-css-declaration:nth-last-child(n of .spreadsheet-css-declaration) {

Ah, whoops.  I meant to use `1` instead of `n`.

[Nikita Vasilyev]

Comment on attachment 385202 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=385202&action=review

>> Source/WebInspectorUI/ChangeLog:15
>> +                  the class list toggle area and the filter bar.
> 
> That's not what it does. It removes the border after every section.
> 
> I don't think we should remove this subtle 0.5px border for the last section. The background of the panel is different from the section background — I don't think it looks good without the border.

(Also, I had to read MDN to undestand what this selector is supposed to do. It seems like this could be `.spreadsheet-css-declaration:last-of-type`.)

[Devin Rousso]

Created attachment 385213 [details]
Patch

[Nikita Vasilyev]

Comment on attachment 385202 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=385202&action=review

>>>> Source/WebInspectorUI/ChangeLog:15
>>>> +                  the class list toggle area and the filter bar.
>>> 
>>> That's not what it does. It removes the border after every section.
>>> 
>>> I don't think we should remove this subtle 0.5px border for the last section. The background of the panel is different from the section background — I don't think it looks good without the border.
>> 
>> I suppose.  I was trying to avoid a double-border when the content of the sidebar is scrolled all the way to the bottom.  I'll think of other alternatives.
> 
> (Also, I had to read MDN to undestand what this selector is supposed to do. It seems like this could be `.spreadsheet-css-declaration:last-of-type`.)

I agree that we shouldn't have a double-border when scrolled all the way to the bottom.

It didn't have double borders when we used absolute positioning:

.sidebar > .panel.details.css-style > .content.has-filter-bar {
    bottom: calc(var(--navigation-bar-height) - 1px);
}

[Nikita Vasilyev]

Comment on attachment 385213 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=385213&action=review

> Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:27
> +    flex-grow: 1;

This certanly fixes the regression.

[Blaze Burg]

Comment on attachment 385213 [details]
Patch

r=me

[WebKit Commit Bot]

Comment on attachment 385213 [details]
Patch

Clearing flags on attachment: 385213

Committed r253330: <https://trac.webkit.org/changeset/253330>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/57799143>