[settings] Don't show borders for empty lists.

Drive-by-fix: Also fix an error that is thrown when the last item in a
list is removed.

Fixed: 378853303
Change-Id: I237bcb45dd2880bd0860ec76b49ae266951b5280
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6017890
Auto-Submit: Benedikt Meurer <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: bmeurer

front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -133,7 +133,7 @@ export class ThrottlingSettingsTab extends UI.Widget.VBox implements
 
     const settingsContent =
         this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
-    settingsContent.classList.add('settings-card-container', 'ignore-list-settings');
+    settingsContent.classList.add('settings-card-container', 'throttling-conditions-settings');
 
     const addButton = new Buttons.Button.Button();
     addButton.classList.add('add-conditions-button');

front_end/ui/legacy/ListWidget.ts

@@ -199,8 +199,10 @@ export class ListWidget<T> extends VBox {
       this.element.focus();
       this.delegate.removeItemRequested(this.items[index], index);
       ARIAUtils.alert(i18nString(UIStrings.removedItem));
-      // focus on the next item in the list, or the last item if we're removing the last item
-      (this.elements[Math.min(index, this.elements.length - 1)] as HTMLElement).focus();
+      if (this.elements.length >= 1) {
+        // focus on the next item in the list, or the last item if we're removing the last item
+        (this.elements[Math.min(index, this.elements.length - 1)] as HTMLElement).focus();
+      }
     }
   }
 

front_end/ui/legacy/listWidget.css

@@ -7,10 +7,13 @@
 .list {
   flex: auto 0 1;
   overflow-y: auto;
-  border: 1px solid var(--sys-color-divider);
   flex-direction: column;
 
   --override-background-list-item-color: hsl(0deg 0% 96%);
+
+  &:has(div) {
+    border: var(--sys-size-1) solid var(--sys-color-divider);
+  }
 }
 
 .theme-with-dark-background .list,