chrome-devtools-frontend 1.0.938678 → 1.0.939473

package/front_end/panels/elements/platformFontsWidget.css

@@ -44,5 +44,5 @@
 }
 
 .font-stats-item .font-delimeter {
-  margin: 0 1ex 0 1ex;
+  margin: 0 1ex;
 }

package/front_end/panels/elements/stylesSectionTree.css

@@ -137,7 +137,7 @@ ol.expanded {
 
 .tree-outline li.editing-sub-part {
   padding: 3px 6px 8px 18px;
-  margin: -1px -6px -8px -6px;
+  margin: -1px -6px -8px;
   text-overflow: clip;
 }
 

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -301,10 +301,6 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
 
   private setTitle(object: SDK.RemoteObject.RemoteObject, linkifier: Components.Linkifier.Linkifier): void {
     const title = this.listItemElement.createChild('span', 'event-listener-details');
-    const subtitle = this.listItemElement.createChild('span', 'event-listener-tree-subtitle');
-    const linkElement =
-        linkifier.linkifyRawLocation(this.eventListenerInternal.location(), this.eventListenerInternal.sourceURL());
-    subtitle.appendChild(linkElement);
 
     const propertyValue = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(
         object, /* wasThrown */ false, /* showPreview */ false);
@@ -333,6 +329,11 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
       title.appendChild(passiveButton);
     }
 
+    const subtitle = title.createChild('span', 'event-listener-tree-subtitle');
+    const linkElement =
+        linkifier.linkifyRawLocation(this.eventListenerInternal.location(), this.eventListenerInternal.sourceURL());
+    subtitle.appendChild(linkElement);
+
     this.listItemElement.addEventListener('contextmenu', event => {
       const menu = new UI.ContextMenu.ContextMenu(event);
       if (event.target !== linkElement) {

package/front_end/panels/event_listeners/eventListenersView.css

@@ -33,7 +33,8 @@
   color: var(--color-syntax-2);
 }
 
-.tree-outline-disclosure .object-value-node {
+.tree-outline-disclosure .object-value-node,
+.tree-outline-disclosure .object-value-object {
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -53,7 +54,7 @@
   background-color: var(--color-background-elevation-1);
   border-radius: 3px;
   border: 1px solid var(--color-details-hairline);
-  margin-left: 10px;
+  margin-left: 5px;
   display: block;
   cursor: pointer;
   opacity: 80%;

package/front_end/panels/issues/IssueKindView.ts

@@ -110,12 +110,6 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     header.appendChild(countAdorner);
     header.appendChild(title);
     header.appendChild(hideAvailableIssuesBtn);
-    header.addEventListener('mouseenter', () => {
-      hideAvailableIssuesBtn.setVisible(true);
-    });
-    header.addEventListener('mouseleave', () => {
-      hideAvailableIssuesBtn.setVisible(false);
-    });
 
     this.listItemElement.appendChild(header);
   }

package/front_end/panels/issues/IssueView.ts

@@ -222,7 +222,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   private hasBeenExpandedBefore: boolean;
   private throttle: Common.Throttler.Throttler;
   private needsUpdateOnExpand = true;
-  private hiddenIssuesMenu: Components.HideIssuesMenu.HideIssuesMenu;
+  private hiddenIssuesMenu?: Components.HideIssuesMenu.HideIssuesMenu;
   private contentCreated: boolean = false;
 
   constructor(issue: AggregatedIssue, description: IssuesManager.MarkdownIssueDescription.IssueDescription) {
@@ -256,8 +256,9 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       new WasmCrossOriginModuleSharingAffectedResourcesView(this, this.issue),
       new AffectedRawCookieLinesView(this, this.issue),
     ];
-
-    this.hiddenIssuesMenu = new Components.HideIssuesMenu.HideIssuesMenu();
+    if (Root.Runtime.experiments.isEnabled('hideIssuesFeature')) {
+      this.hiddenIssuesMenu = new Components.HideIssuesMenu.HideIssuesMenu();
+    }
     this.aggregatedIssuesCount = null;
     this.hasBeenExpandedBefore = false;
   }
@@ -318,10 +319,6 @@ export class IssueView extends UI.TreeOutline.TreeElement {
 
   private appendHeader(): void {
     const header = document.createElement('div');
-    if (Root.Runtime.experiments.isEnabled('hideIssuesFeature')) {
-      header.addEventListener('mouseenter', this.showHiddenIssuesMenu.bind(this));
-      header.addEventListener('mouseleave', this.hideHiddenIssuesMenu.bind(this));
-    }
     header.classList.add('header');
     this.issueKindIcon = new IconButton.Icon.Icon();
     this.issueKindIcon.classList.add('leading-issue-icon');
@@ -339,19 +336,12 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     title.classList.add('title');
     title.textContent = this.description.title;
     header.appendChild(title);
-    if (Root.Runtime.experiments.isEnabled('hideIssuesFeature')) {
+    if (this.hiddenIssuesMenu) {
       header.appendChild(this.hiddenIssuesMenu);
     }
     this.updateFromIssue();
     this.listItemElement.appendChild(header);
   }
-  private showHiddenIssuesMenu(): void {
-    this.hiddenIssuesMenu?.setVisible(true);
-  }
-
-  private hideHiddenIssuesMenu(): void {
-    this.hiddenIssuesMenu?.setVisible(false);
-  }
 
   onexpand(): void {
     Host.userMetrics.issuesPanelIssueExpanded(this.issue.getCategory());
@@ -378,18 +368,20 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       this.aggregatedIssuesCount.textContent = `${this.issue.getAggregatedIssuesCount()}`;
     }
     this.listItemElement.classList.toggle('hidden-issue', this.issue.isHidden());
-    const data: HiddenIssuesMenuData = {
-      menuItemLabel: this.issue.isHidden() ? i18nString(UIStrings.unhideIssuesLikeThis) :
-                                             i18nString(UIStrings.hideIssuesLikeThis),
-      menuItemAction: () => {
-        const setting = IssuesManager.IssuesManager.getHideIssueByCodeSetting();
-        const values = setting.get();
-        values[this.issue.code()] = this.issue.isHidden() ? IssuesManager.IssuesManager.IssueStatus.Unhidden :
-                                                            IssuesManager.IssuesManager.IssueStatus.Hidden;
-        setting.set(values);
-      },
-    };
-    this.hiddenIssuesMenu.data = data;
+    if (this.hiddenIssuesMenu) {
+      const data: HiddenIssuesMenuData = {
+        menuItemLabel: this.issue.isHidden() ? i18nString(UIStrings.unhideIssuesLikeThis) :
+                                               i18nString(UIStrings.hideIssuesLikeThis),
+        menuItemAction: () => {
+          const setting = IssuesManager.IssuesManager.getHideIssueByCodeSetting();
+          const values = setting.get();
+          values[this.issue.code()] = this.issue.isHidden() ? IssuesManager.IssuesManager.IssueStatus.Unhidden :
+                                                              IssuesManager.IssuesManager.IssueStatus.Hidden;
+          setting.set(values);
+        },
+      };
+      this.hiddenIssuesMenu.data = data;
+    }
   }
 
   updateAffectedResourceVisibility(): void {

package/front_end/panels/issues/components/HideIssuesMenu.ts

@@ -30,7 +30,6 @@ export interface HiddenIssuesMenuData {
 export class HideIssuesMenu extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-hide-issues-menu`;
   private readonly shadow: ShadowRoot = this.attachShadow({mode: 'open'});
-  private visible: boolean = false;
   private menuItemLabel: Common.UIString.LocalizedString = Common.UIString.LocalizedEmptyString;
   private menuItemAction: () => void = () => {};
 
@@ -44,23 +43,20 @@ export class HideIssuesMenu extends HTMLElement {
     this.shadow.adoptedStyleSheets = [hideIssuesMenuStyles];
   }
 
-  setVisible(x: boolean): void {
-    if (this.visible === x) {
-      return;
-    }
-    this.visible = x;
-    this.render();
-  }
-
   onMenuOpen(event: Event): void {
     event.stopPropagation();
-    const contextMenu = new UI.ContextMenu.ContextMenu(event, {useSoftMenu: true});
+    const contextMenu = new UI.ContextMenu.ContextMenu(event, {
+      useSoftMenu: true,
+      onSoftMenuClosed: (): void => {
+        this.classList.toggle('has-context-menu-opened', false);
+      },
+    });
     contextMenu.headerSection().appendItem(this.menuItemLabel, () => this.menuItemAction());
     contextMenu.show();
+    this.classList.toggle('has-context-menu-opened', true);
   }
 
   private render(): void {
-    this.classList.toggle('hidden', !this.visible);
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
       LitHtml.render(LitHtml.html`

package/front_end/panels/issues/components/hideIssuesMenu.css

@@ -16,4 +16,12 @@
   border-radius: 0;
   cursor: pointer;
   border: none;
+
+  --icon-color: var(--color-text-primary);
+
+  opacity: 50%;
+}
+
+.hide-issues-menu-btn:hover {
+  opacity: 100%;
 }

package/front_end/panels/issues/issuesTree.css

@@ -51,7 +51,7 @@
 
 .issue-category.hidden-issues.parent.expanded,
 .issue-kind.parent.expanded {
-  border-width: 0 0 1px 0;
+  border-width: 0 0 1px;
   background-color: var(--color-background-elevation-1);
 }
 
@@ -95,6 +95,18 @@ p {
   width: 100%;
 }
 
+.header devtools-hide-issues-menu {
+  display: none;
+}
+
+.header:hover devtools-hide-issues-menu {
+  display: block;
+}
+
+.header devtools-hide-issues-menu.has-context-menu-opened {
+  display: block;
+}
+
 .issue-category .header,
 .issue-kind .header {
   line-height: 24px;
@@ -131,7 +143,7 @@ p {
 
 /* Show a colored border on the left side of opened issues. */
 .body::before {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   left: calc(var(--issue-indent) + 23px);
@@ -181,7 +193,7 @@ devtools-icon.leading-issue-icon {
 }
 
 .separator::before {
-  content: '·';
+  content: "·";
   padding-left: 1ex;
   padding-right: 1ex;
 }
@@ -250,7 +262,7 @@ ul > li.plain-enum::before {
 }
 
 .affected-resources-label + .affected-resources {
-  padding: 3px 0 0 0;
+  padding: 3px 0 0;
   position: relative;
   user-select: text;
 }
@@ -382,7 +394,7 @@ ul > li.plain-enum::before {
 
 .affected-resources > .parent {
   margin-top: 0;
-  padding: 2px 5px 0 5px;
+  padding: 2px 5px 0;
 }
 
 .affected-resources > .parent.expanded {

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -52,7 +52,7 @@
 }
 
 .lighthouse-form-section-label {
-  margin: 7px 0 7px;
+  margin: 7px 0;
   font-weight: 500;
 }
 
@@ -129,6 +129,6 @@ input[type="radio"]:focus {
 }
 
 .lighthouse-warning-text::before {
-  content: '⚠';
+  content: "⚠";
   margin-right: 10px;
 }

package/front_end/panels/media/playerListView.css

@@ -10,7 +10,7 @@
 }
 
 li.storage-group-list-item {
-  padding: 10px 8px 6px 8px;
+  padding: 10px 8px 6px;
 }
 
 li.storage-group-list-item:not(:first-child) {

package/front_end/panels/mobile_throttling/throttlingSettingsTab.css

@@ -30,7 +30,7 @@
 }
 
 .conditions-list-item {
-  padding: 3px 5px 3px 5px;
+  padding: 3px 5px;
   height: 30px;
   display: flex;
   align-items: center;

package/front_end/panels/network/NetworkLogView.ts

@@ -958,11 +958,24 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
           (initiatorLink as HTMLElement).focus();
         }
       }
+
       if (isEnterOrSpaceKey(event)) {
         this.dispatchEventToListeners(Events.RequestActivated, {showPanel: true, takeFocus: true});
         event.consume(true);
       }
     });
+    this.dataGrid.element.addEventListener('keyup', event => {
+      if ((event.key === 'r' || event.key === 'R') && this.dataGrid.selectedNode) {
+        const request = (this.dataGrid.selectedNode as NetworkNode).request();
+        if (!request) {
+          return;
+        }
+
+        if (SDK.NetworkManager.NetworkManager.canReplayRequest(request)) {
+          SDK.NetworkManager.NetworkManager.replayRequest(request);
+        }
+      }
+    });
     this.dataGrid.element.addEventListener('focus', this.onDataGridFocus.bind(this), true);
     this.dataGrid.element.addEventListener('blur', this.onDataGridBlur.bind(this), true);
     return this.dataGrid;

package/front_end/panels/network/NetworkSearchScope.ts

@@ -4,6 +4,7 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
 import type * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -89,7 +90,8 @@ export class NetworkSearchScope implements Search.SearchConfig.SearchScope {
 
     function stringMatchesQuery(string: string): boolean {
       const flags = searchConfig.ignoreCase() ? 'i' : '';
-      const regExps = searchConfig.queries().map(query => new RegExp(query, flags));
+      const regExps =
+          searchConfig.queries().map(query => new RegExp(Platform.StringUtilities.escapeForRegExp(query), flags));
       let pos = 0;
       for (const regExp of regExps) {
         const match = string.substr(pos).match(regExp);

package/front_end/panels/network/RequestPayloadView.ts

@@ -491,6 +491,8 @@ export class RequestPayloadView extends UI.Widget.VBox {
   private createToggleButton(title: string): Element {
     const button = document.createElement('span');
     button.classList.add('payload-toggle');
+    button.tabIndex = 0;
+    button.setAttribute('role', 'button');
     button.textContent = title;
     return button;
   }

package/front_end/panels/network/blockedURLsPane.css

@@ -66,7 +66,7 @@
   flex: none;
   display: flex;
   flex-direction: row;
-  margin: 7px 5px 0 5px;
+  margin: 7px 5px 0;
   align-items: center;
 }
 

package/front_end/panels/network/networkConfigView.css

@@ -72,7 +72,7 @@
   width: calc(100% - 20px);
 }
 
-.network-config-ua input[type=text],
+.network-config-ua input[type="text"],
 .network-config-ua .chrome-select {
   margin-top: 8px;
 }

package/front_end/panels/network/networkLogView.css

@@ -62,7 +62,7 @@
   border-bottom: 0;
 }
 
-.network-summary-bar span[is=dt-icon-label] {
+.network-summary-bar span[is="dt-icon-label"] {
   margin-right: 6px;
 }
 
@@ -243,7 +243,7 @@
   filter: brightness(0) invert(1);
 }
 
-.network-log-grid.data-grid:focus .data-grid-data-grid-node.selected [is=ui-icon].icon-mask {
+.network-log-grid.data-grid:focus .data-grid-data-grid-node.selected [is="ui-icon"].icon-mask {
   --network-grid-selected-color: #dadce0;
   --override-icon-mask-background-color: var(--network-grid-selected-color);
 }
@@ -446,7 +446,7 @@
     background-color: canvas;
   }
 
-  .network-waterfall-header:hover .sort-order-icon-container [is=ui-icon].icon-mask {
+  .network-waterfall-header:hover .sort-order-icon-container [is="ui-icon"].icon-mask {
     background-color: HighlightText;
   }
 }

package/front_end/panels/network/requestPayloadTree.css

@@ -64,6 +64,11 @@
   color: var(--color-text-primary);
 }
 
+.tree-outline li.expanded .payload-toggle:focus-visible {
+  border: 2px solid var(--color-button-outline-focus);
+  border-radius: 5px;
+}
+
 .tree-outline li .header-toggle:hover {
   color: var(--color-text-secondary);
   cursor: pointer;

package/front_end/panels/profiler/profileLauncherView.css

@@ -16,10 +16,10 @@
 .profile-launcher-view-content h1 {
   font-size: 15px;
   font-weight: normal;
-  margin: 6px 0 10px 0;
+  margin: 6px 0 10px;
 }
 
-.profile-launcher-view-content [is=dt-radio] {
+.profile-launcher-view-content [is="dt-radio"] {
   font-size: 13px;
 }
 
@@ -29,7 +29,7 @@
   margin-left: 22px;
 }
 
-.profile-launcher-view-content p [is=dt-checkbox] {
+.profile-launcher-view-content p [is="dt-checkbox"] {
   display: flex;
 }
 

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -142,6 +142,7 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
     clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, () => {
       this.messages = [];
       this.dataGridIntegrator.update({...this.dataGridIntegrator.data(), rows: []});
+      this.infoWidget.render(null);
     });
     topToolbar.appendToolbarItem(clearButton);
 

package/front_end/panels/security/mainView.css

@@ -35,7 +35,7 @@
   flex: none;
   width: 16px;
   height: 16px;
-  margin: 0 0;
+  margin: 0;
 }
 /* Separate the middle icon from the other two. */
 
@@ -65,7 +65,7 @@
 
 .triangle-pointer-container {
   margin: 8px 24px 0;
-  padding: 0 0;
+  padding: 0;
 }
 
 .triangle-pointer-wrapper {

package/front_end/panels/security/originView.css

@@ -5,7 +5,7 @@
  */
 
 .title-section {
-  padding: 16px 0 24px 0;
+  padding: 16px 0 24px;
   border-bottom: 1px solid var(--color-background-elevation-2);
 }
 

package/front_end/panels/sensors/sensors.css

@@ -185,7 +185,7 @@
 .orientation-left::after,
 .orientation-right::before,
 .orientation-right::after {
-  content: '';
+  content: "";
   width: 8px;
   height: 6px;
 }
@@ -242,7 +242,7 @@
 .orientation-top::after,
 .orientation-bottom::before,
 .orientation-bottom::after {
-  content: '';
+  content: "";
   width: 8px;
   height: 8px;
 }

package/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -127,7 +127,7 @@
     border: 1px solid;
   }
 
-  .tree-title[aria-disabled='true'] {
+  .tree-title[aria-disabled="true"] {
     color: GrayText;
   }
 }

package/front_end/panels/settings/emulation/devicesSettingsTab.css

@@ -29,7 +29,7 @@
 }
 
 .devices-list-item {
-  padding: 3px 5px 3px 5px;
+  padding: 3px 5px;
   height: 30px;
   display: flex;
   align-items: center;
@@ -104,7 +104,7 @@ li .devices-edit-client-hints-heading {
 
 .devices-edit-fields input {
   flex: auto;
-  margin: 8px 5px 0 5px;
+  margin: 8px 5px 0;
 }
 
 li.devices-edit-client-hints-field {
@@ -114,7 +114,7 @@ li.devices-edit-client-hints-field {
 
 .devices-edit-client-hints-field input {
   flex: auto;
-  margin: 8px 5px 0 5px;
+  margin: 8px 5px 0;
 }
 
 .devices-edit-fields .device-edit-fixed {
@@ -122,5 +122,5 @@ li.devices-edit-client-hints-field {
 }
 
 .devices-edit-fields select {
-  margin: 8px 5px 0 5px;
+  margin: 8px 5px 0;
 }

package/front_end/panels/settings/frameworkIgnoreListSettingsTab.css

@@ -47,7 +47,7 @@
 }
 
 .ignore-list-item {
-  padding: 3px 5px 3px 5px;
+  padding: 3px 5px;
   height: 30px;
   display: flex;
   align-items: center;

package/front_end/panels/settings/settingsScreen.css

@@ -7,7 +7,7 @@
 .settings-window-main {
   color: var(--color-text-primary);
   background-color: var(--color-background);
-  padding: 11px 0 0 0;
+  padding: 11px 0 0;
 }
 
 .settings-content {
@@ -101,7 +101,7 @@ fieldset {
   color: inherit;
 }
 
-.settings-content input[type=checkbox] {
+.settings-content input[type="checkbox"] {
   margin: 1px 7px 1px 2px;
 }
 

package/front_end/panels/sources/CoveragePlugin.ts

@@ -25,7 +25,7 @@ const UIStrings = {
   *@description Text to show in the status bar if coverage data is available
   *@example {12.3} PH1
   */
-  coverageS: 'Coverage: {PH1} %',
+  coverageS: 'Coverage: {PH1}',
   /**
   *@description Text to be shown in the status bar if no coverage data is available
   */
@@ -96,7 +96,12 @@ export class CoveragePlugin extends Plugin {
   private updateStats(): void {
     if (this.coverage) {
       this.infoInToolbar.setTitle(i18nString(UIStrings.showDetails));
-      this.infoInToolbar.setText(i18nString(UIStrings.coverageS, {PH1: this.coverage.usedPercentage().toFixed(1)}));
+      const formatter = new Intl.NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
+        style: 'percent',
+        maximumFractionDigits: 1,
+      });
+      this.infoInToolbar.setText(
+          i18nString(UIStrings.coverageS, {PH1: formatter.format(this.coverage.usedPercentage())}));
     } else {
       this.infoInToolbar.setTitle(i18nString(UIStrings.clickToShowCoveragePanel));
       this.infoInToolbar.setText(i18nString(UIStrings.coverageNa));

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -191,13 +191,20 @@ export class DebuggerPausedMessage {
     } else if (details.reason === Protocol.Debugger.PausedEventReason.EventListener) {
       let eventNameForUI = '';
       if (details.auxData) {
-        eventNameForUI =
-            SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpointTitle((details.auxData as {
-              directiveText: string,
-              eventName: string,
-              targetName: string,
-              webglErrorName: string,
-            }));
+        const maybeNonDomEventNameForUI =
+            SDK.EventBreakpointsModel.EventBreakpointsManager.instance().resolveEventListenerBreakpointTitle(
+                (details.auxData as {eventName: string}));
+        if (maybeNonDomEventNameForUI) {
+          eventNameForUI = maybeNonDomEventNameForUI;
+        } else {
+          eventNameForUI = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpointTitle(
+              (details.auxData as {
+                directiveText: string,
+                eventName: string,
+                targetName: string,
+                webglErrorName: string,
+              }));
+        }
       }
       messageWrapper = buildWrapper(i18nString(UIStrings.pausedOnEventListener), eventNameForUI);
     } else if (details.reason === Protocol.Debugger.PausedEventReason.XHR) {

package/front_end/panels/sources/callStackSidebarPane.css

@@ -87,7 +87,7 @@
 .call-frame-location {
   color: var(--color-text-secondary);
   margin-left: auto;
-  padding: 0 10px 0 10px;
+  padding: 0 10px;
 }
 
 .async-header::before {

package/front_end/panels/sources/dialog.css

@@ -16,7 +16,7 @@ label {
   white-space: nowrap;
 }
 
-input[type=text].add-source-map {
+input[type="text"].add-source-map {
   box-shadow: 0 0 0 1px var(--box-shadow-outline-color);
   font-size: inherit;
   margin: 0 8px 0 5px;

package/front_end/panels/sources/javaScriptBreakpointsSidebarPane.css

@@ -15,7 +15,7 @@
   background-color: var(--legacy-focus-bg-color);
 }
 
-.breakpoint-entry [is=dt-checkbox] {
+.breakpoint-entry [is="dt-checkbox"] {
   max-width: 100%;
   white-space: nowrap;
   border-left-width: 3px;