Bug 214898 – Web Inspector: REGRESSION(r255396): Audit: button to exit edit mode in main content area is missing border

• Component: Web Inspector
• Status: RESOLVED FIXED

[Devin Rousso]

# STEPS TO REPRODUCE
1. inspect any page
2. go to the Audit Tab
3. enter Edit mode from the navigation sidebar
  => the Done button in the main content area is missing a border

[Radar WebKit Bug Importer]

<rdar://problem/66238391>

[Devin Rousso]

I'm pretty sure this was caused by the following change from r255396 <https://webkit.org/b/205434>:
```
-.message-text-view .navigation-item-help .navigation-bar > .item {
+.navigation-item-help > .navigation-bar > .item {
```

[Blaze Burg]

Created attachment 405425 [details]
Patch

[Devin Rousso]

Comment on attachment 405425 [details]
Patch

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

r=me

> Source/WebInspectorUI/UserInterface/Views/Main.css:239
>  .navigation-item-help > .navigation-bar > .item {

we could also adjust `WI.createNavigationItemHelp` to always expect `console.assert(navigationItem instanceof WI.ButtonNavigationItem);` so that we could add `.button` to the CSS since `.text-only` only exists for `WI.ButtonNavigationItem`

> Source/WebInspectorUI/UserInterface/Views/Main.css:246
> +.navigation-item-help > .navigation-bar > .item:not(.text-only) {

ditto (:239)

> Source/WebInspectorUI/UserInterface/Views/Main.css:250
> +.navigation-item-help > .navigation-bar > .item.text-only {

ditto (:239)

> Source/WebInspectorUI/UserInterface/Views/Main.css:251
> +    border: solid 1px var(--border-color);

It's a bit odd that we have the same CSS property repeated twice exactly as is for two rules that should both match the same thing.  Perhaps you could add a comment above it explaining that this is necessary due to the specificity of `.navigation-bar .item.button.text-only`?

[Blaze Burg]

Committed r265027: <https://trac.webkit.org/changeset/265027>