chrome-devtools-frontend/front_end/panels/application/webMCPView.css

Chrome DevTools UI

/*
 * Copyright 2026 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

@scope to (devtools-widget > *) {
    .webmcp-view {
        height: 100%;
        width: 100%;
    }

    .call-log,
    .tool-list {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: auto;
        padding: 0;
    }

    .empty-view-scroller {
        flex: auto;
    }

    devtools-data-grid {
        flex: auto;
    }

    .data-grid {
      th {
        height: 26px;
      }

      td {
        vertical-align: middle;
      }

      tr.status-cancelled {
        color: var(--sys-color-on-surface-light);
      }

      tr.status-error {
        color: var(--sys-color-error);
      }

      tr.selected {
        background-color: var(--sys-color-tonal-container);
      }

      tbody tr.selected.status-error,
      tbody tr.selected.status-error.revealed {
        background-color: var(--sys-color-error-container);
        color: var(--sys-color-error);
      }
    }

    .section-title {
        display: flex;
        gap: var(--sys-size-2);
        background-color: var(--sys-color-surface1);
        padding: 0 5px;
        line-height: 22px;
        overflow: hidden;
        align-items: center;
        flex: none;
        color: var(--sys-color-on-surface);
    }

    .status-cell {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .tool-details {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: auto;
    }

    .tool-details-grid {
      display: grid;
      grid-template-columns: min-content 1fr;
      gap: 0 var(--sys-size-16);
      padding: calc(0.5*var(--sys-size-6)) var(--sys-size-8);
      align-items: flex-start;

      .label {
        color: var(--sys-color-on-surface-subtle);
        white-space: nowrap;
        padding: var(--sys-size-6) 0;
      }

      .value {
        &.source-code {
          color: var(--sys-color-token-attribute);
        }

        padding: var(--sys-size-6) 0;
        color: var(--sys-color-on-surface);
        overflow-wrap: anywhere;

        &:has(> .stack-preview-container) {
          padding: var(--sys-size-4) 0;
        }

        &.tool-origin-container {
          display: flex;
          align-items: center;
          gap: var(--sys-size-4);
        }

        .tool-origin-node {
          display: flex;
          align-items: center;
          cursor: default;
        }
      }

      .show-element {
        height: 1lh;
      }
    }

    devtools-list {
      flex: 1 1 auto;
      margin: 0;
      padding: var(--sys-size-4);
      box-sizing: border-box;
    }

    .tool-item {
        display: flex;
        flex-direction: column;
        padding: 8px 0;
        gap: 4px;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid var(--sys-color-divider);
        cursor: pointer;
    }

    .tool-item:hover {
        background-color: var(--sys-color-state-hover-on-subtle);
    }

    .tool-item.selected {
        background-color: var(--sys-color-tonal-container);
    }

    .tool-name-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
    }

    .tool-name.source-code {
        color: var(--sys-color-token-string);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1;
    }

    /* stylelint-disable-next-line selector-type-no-unknown */
    .tool-name-container icon-button {
        flex-shrink: 0;
        height: 0;
        overflow: visible;
        display: flex;
        align-items: center;
    }

    .tool-description {
        color: var(--sys-color-on-surface);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    devtools-toolbar-input {
        flex-grow: 1;
        flex-shrink: 1;
    }

    .toolbar-text.status-error-text {
      color: var(--sys-color-error);
    }

    .toolbar-text.status-cancelled-text {
      color: var(--sys-color-on-surface-light);
    }

    .call-details-tabbed-pane {
        flex: auto;
        border-bottom: 1px solid var(--sys-color-divider);
    }

    .call-payload-view {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .call-payload-content {
        padding: var(--sys-size-5);
        flex: auto;
        overflow: auto;
    }

    .payload-value.error-text {
      color: var(--sys-color-error);
      white-space: pre-wrap;
    }
}