Fix checkbox toggling in request conditions drawer

Fixed: 477868807
Change-Id: I2b62aeaec926cf685119ac1e75ecdb1ed1a3be1b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7511098
Commit-Queue: Philip Pfaffe <pfaffe@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>

Author: pfaffe

front_end/panels/network/RequestConditionsDrawer.ts

@@ -24,7 +24,7 @@ import * as PanelUtils from '../utils/utils.js';
 
 import requestConditionsDrawerStyles from './requestConditionsDrawer.css.js';
 
-const {ref} = Directives;
+const {ref, live} = Directives;
 const {widgetConfig} = UI.Widget;
 
 const UIStrings = {
@@ -439,10 +439,10 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
           // clang-format off
         html`
     <input class=blocked-url-checkbox
-      @click=${toggle}
+      @change=${toggle}
       type=checkbox
       title=${i18nString(UIStrings.enableThrottlingToggleLabel, {PH1: constructorStringOrWildcardURL})}
-      .checked=${enabled}
+      .checked=${live(enabled)}
       .disabled=${!editable || !originalOrUpgradedURLPattern}
       jslog=${VisualLogging.toggle().track({ change: true })}>
     <devtools-button
@@ -519,7 +519,7 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
           // clang-format off
         html`
     <input class=blocked-url-checkbox
-      @click=${toggle}
+      @change=${toggle}
       type=checkbox
       .checked=${condition.enabled}
       .disabled=${!editable}