[Nala]: Remove $web-components/select (#33590)

2026-02-03 23:05:56 +00:00
parent 42a4d9fc16
commit 728a2d763e
3 changed files with 76 additions and 147 deletions
@@ -7,7 +7,7 @@ import * as React from 'react'
 import Toggle from '@brave/leo/react/toggle'
 import { getLocale } from '$web-common/locale'
 import { loadTimeData } from '$web-common/loadTimeData'
-import Select from '$web-components/select'
+import Dropdown from '@brave/leo/react/dropdown'

 import * as S from './style'
 import getPanelBrowserAPI, {
@@ -22,6 +22,13 @@ import { ViewType } from '../../state/component_types'
 import {
  ContentSetting
 } from 'gen/components/content_settings/core/common/content_settings.mojom.m'
+import styled from 'styled-components'
+import { color } from '@brave/leo/tokens/css/variables'
+
+const PanelDropdown = styled(Dropdown)`
+  color: ${color.text.primary};
+  width: 100%;
+`

 const adBlockModeOptions = [
  { value: AdBlockMode.AGGRESSIVE, text: getLocale('braveShieldsTrackersAndAdsBlockedAgg') },
@@ -51,7 +58,7 @@ interface Props {
  showAdblockLists: boolean
 }

-export function GlobalSettings (props: Props) {
+export function GlobalSettings(props: Props) {
  const onAdBlockListsClick = () => {
    chrome.tabs.create({ url: 'chrome://settings/shields/filters', active: true })
  }
@@ -68,7 +75,7 @@ export function GlobalSettings (props: Props) {
            onClick={onAdBlockListsClick}
          >
            <i>
-            <svg aria-hidden="true" width="18" height="14" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M17.01 2.41H4.26a.709.709 0 0 1 0-1.418h12.75a.709.709 0 0 1 0 1.417ZM.717 11.616h1.416v1.417H.718v-1.417Zm0-3.541h1.416v1.416H.718V8.076Zm0-3.542h1.416v1.417H.718V4.534Zm0-3.542h1.416V2.41H.718V.992Zm3.541 3.542h9.917a.709.709 0 0 1 0 1.417H4.26a.709.709 0 0 1 0-1.417Zm0 3.542h12.75a.709.709 0 0 1 0 1.416H4.26a.709.709 0 0 1 0-1.416Zm0 3.541h9.917a.709.709 0 0 1 0 1.417H4.26a.709.709 0 0 1 0-1.417Z"/></svg>
+              <svg aria-hidden="true" width="18" height="14" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M17.01 2.41H4.26a.709.709 0 0 1 0-1.418h12.75a.709.709 0 0 1 0 1.417ZM.717 11.616h1.416v1.417H.718v-1.417Zm0-3.541h1.416v1.416H.718V8.076Zm0-3.542h1.416v1.417H.718V4.534Zm0-3.542h1.416V2.41H.718V.992Zm3.541 3.542h9.917a.709.709 0 0 1 0 1.417H4.26a.709.709 0 0 1 0-1.417Zm0 3.542h12.75a.709.709 0 0 1 0 1.416H4.26a.709.709 0 0 1 0-1.416Zm0 3.541h9.917a.709.709 0 0 1 0 1.417H4.26a.709.709 0 0 1 0-1.417Z" /></svg>
            </i>
            {getLocale('braveShieldsCustomizeAdblockLists')}
          </button>
@@ -76,7 +83,7 @@ export function GlobalSettings (props: Props) {
        <button
          onClick={onSettingsClick}>
          <i>
-            <svg aria-hidden="true" width="18" height="18" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M14.03 11.126a3.191 3.191 0 0 1 3.188 3.186A3.191 3.191 0 0 1 14.03 17.5a3.191 3.191 0 0 1-3.187-3.188 3.191 3.191 0 0 1 3.187-3.186Zm0 1.417c-.227 0-.443.046-.643.125l2.289 2.288c.078-.2.125-.416.125-.644 0-.976-.795-1.77-1.77-1.77Zm0 3.54c.228 0 .444-.046.644-.125l-2.29-2.29c-.078.2-.125.417-.125.644 0 .977.795 1.772 1.771 1.772Z"/><path d="M8.718.5C4.043.5.218 4.325.218 9s3.825 8.5 8.5 8.5h.354a.71.71 0 0 0 .708-.708c0-.355-.354-.638-.708-.638-.708-.92-1.558-2.267-2.054-3.966H8.93c.425 0 .709-.284.709-.709s-.284-.708-.709-.708H6.734c0-.142-.07-.284-.07-.425-.142-1.133-.071-2.054.07-2.975h3.896c.071.637.142 1.346.142 2.054 0 .425.283.708.708.708a.71.71 0 0 0 .709-.708c0-.708 0-1.417-.142-2.125h3.542c.141.496.212 1.063.212 1.63 0 .283 0 .566-.07.85-.072.353.212.708.637.778.354.071.708-.212.779-.637.07-.213.07-.567.07-.921 0-4.675-3.824-8.5-8.5-8.5ZM7.23 2.058c-.566.992-1.275 2.267-1.629 3.896H2.343c.92-1.983 2.762-3.4 4.887-3.896Zm0 13.884c-2.125-.496-3.896-1.913-4.816-3.825H5.6a11.962 11.962 0 0 0 1.63 3.825Zm-1.983-5.525c0 .07 0 .212.07.283h-3.47c-.142-.496-.213-1.133-.213-1.7s.071-1.133.213-1.63h3.471c-.142.922-.213 1.984-.071 3.047Zm3.33-4.463H7.088a12.229 12.229 0 0 1 1.629-3.47c.566.85 1.204 1.983 1.629 3.47h-1.77Zm6.516 0h-3.33c-.424-1.629-1.062-2.975-1.7-3.896 2.196.425 4.109 1.913 5.03 3.896Z"/></svg>
+            <svg aria-hidden="true" width="18" height="18" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M14.03 11.126a3.191 3.191 0 0 1 3.188 3.186A3.191 3.191 0 0 1 14.03 17.5a3.191 3.191 0 0 1-3.187-3.188 3.191 3.191 0 0 1 3.187-3.186Zm0 1.417c-.227 0-.443.046-.643.125l2.289 2.288c.078-.2.125-.416.125-.644 0-.976-.795-1.77-1.77-1.77Zm0 3.54c.228 0 .444-.046.644-.125l-2.29-2.29c-.078.2-.125.417-.125.644 0 .977.795 1.772 1.771 1.772Z" /><path d="M8.718.5C4.043.5.218 4.325.218 9s3.825 8.5 8.5 8.5h.354a.71.71 0 0 0 .708-.708c0-.355-.354-.638-.708-.638-.708-.92-1.558-2.267-2.054-3.966H8.93c.425 0 .709-.284.709-.709s-.284-.708-.709-.708H6.734c0-.142-.07-.284-.07-.425-.142-1.133-.071-2.054.07-2.975h3.896c.071.637.142 1.346.142 2.054 0 .425.283.708.708.708a.71.71 0 0 0 .709-.708c0-.708 0-1.417-.142-2.125h3.542c.141.496.212 1.063.212 1.63 0 .283 0 .566-.07.85-.072.353.212.708.637.778.354.071.708-.212.779-.637.07-.213.07-.567.07-.921 0-4.675-3.824-8.5-8.5-8.5ZM7.23 2.058c-.566.992-1.275 2.267-1.629 3.896H2.343c.92-1.983 2.762-3.4 4.887-3.896Zm0 13.884c-2.125-.496-3.896-1.913-4.816-3.825H5.6a11.962 11.962 0 0 0 1.63 3.825Zm-1.983-5.525c0 .07 0 .212.07.283h-3.47c-.142-.496-.213-1.133-.213-1.7s.071-1.133.213-1.63h3.471c-.142.922-.213 1.984-.071 3.047Zm3.33-4.463H7.088a12.229 12.229 0 0 1 1.629-3.47c.566.85 1.204 1.983 1.629 3.47h-1.77Zm6.516 0h-3.33c-.424-1.629-1.062-2.975-1.7-3.896 2.196.425 4.109 1.913 5.03 3.896Z" /></svg>
          </i>
          {getLocale('braveShieldsChangeDefaults')}
        </button>
@@ -85,15 +92,15 @@ export function GlobalSettings (props: Props) {
  )
 }

-function AdvancedControlsContent () {
+function AdvancedControlsContent() {
  const { siteBlockInfo, siteSettings, getSiteSettings, setViewType } = React.useContext(DataContext)

-  const handleAdBlockModeChange = (value: string) => {
+  const handleAdBlockModeChange = ({ value }: { value: string }) => {
    getPanelBrowserAPI().dataHandler.setAdBlockMode(parseInt(value))
    if (getSiteSettings) getSiteSettings()
  }

-  const handleFingerprintModeSelectionChange = (value: string) => {
+  const handleFingerprintModeSelectionChange = ({ value }: { value: string }) => {
    getPanelBrowserAPI().dataHandler.setFingerprintMode(parseInt(value))
    if (getSiteSettings) getSiteSettings()
  }
@@ -103,12 +110,12 @@ function AdvancedControlsContent () {
    if (getSiteSettings) getSiteSettings()
  }

-  const handleCookieBlockModeChange = (value: string) => {
+  const handleCookieBlockModeChange = ({ value }: { value: string }) => {
    getPanelBrowserAPI().dataHandler.setCookieBlockMode(parseInt(value))
    if (getSiteSettings) getSiteSettings()
  }

-  const handleHttpsUpgradeModeChange = (value: string) => {
+  const handleHttpsUpgradeModeChange = ({ value }: { value: string }) => {
    getPanelBrowserAPI().dataHandler.setHttpsUpgradeMode(parseInt(value))
    if (getSiteSettings) getSiteSettings()
  }
@@ -159,11 +166,11 @@ function AdvancedControlsContent () {
  const isEnforced =
    siteSettings?.scriptsBlockedOverrideStatus?.overrideSource !== undefined
    && siteSettings?.scriptsBlockedOverrideStatus?.status
-      !== ContentSetting.DEFAULT
+    !== ContentSetting.DEFAULT
    && siteSettings?.scriptsBlockedOverrideStatus?.overrideSource
-      !== ContentSettingSource.kUser
+    !== ContentSettingSource.kUser
    && siteSettings?.scriptsBlockedOverrideStatus?.overrideSource
-      !== ContentSettingSource.kNone
+    !== ContentSettingSource.kNone

  return (
    <section
@@ -173,20 +180,23 @@ function AdvancedControlsContent () {
      <S.SettingsBox>
        <S.ControlGroup>
          <div className="col-2">
-            <Select
-              value={siteSettings?.adBlockMode}
-              ariaLabel={getLocale('braveShieldsTrackersAndAds')}
+            <PanelDropdown
+              size="small"
+              value={siteSettings?.adBlockMode?.toString()}
              onChange={handleAdBlockModeChange}
              disabled={siteBlockInfo?.isBraveShieldsManaged}
            >
+              <span slot="label">
+                {getLocale('braveShieldsTrackersAndAds')}
+              </span>
              {adBlockModeOptions.map(entry => {
                return (
-                  <option key={entry.value} value={entry.value}>
+                  <leo-option key={entry.value} value={entry.value?.toString()}>
                    {entry.text}
-                  </option>
+                  </leo-option>
                )
              })}
-            </Select>
+            </PanelDropdown>
          </div>
          <S.CountButton
            title={adsListCount.toString()}
@@ -199,17 +209,20 @@ function AdvancedControlsContent () {
        </S.ControlGroup>
        {(isHttpsByDefaultEnabled && !isTorProfile) && <S.ControlGroup>
          <div className="col-2">
-            <Select
-              value={siteSettings?.httpsUpgradeMode}
-              ariaLabel={getLocale('braveShieldsHttpsUpgradeModeStandard')}
+            <PanelDropdown
+              size="small"
+              value={siteSettings?.httpsUpgradeMode?.toString()}
              onChange={handleHttpsUpgradeModeChange}
            >
-            {httpsUpgradeModeOptions.map(entry => {
+              <span slot="label">
+                {getLocale('braveShieldsHttpsUpgradeModeStandard')}
+              </span>
+              {httpsUpgradeModeOptions.map(entry => {
                return (
-                  <option key={entry.value} value={entry.value}>{entry.text}</option>
+                  <leo-option key={entry.value} value={entry.value?.toString()}>{entry.text}</leo-option>
                )
              })}
-            </Select>
+            </PanelDropdown>
          </div>
        </S.ControlGroup>}
        <S.ControlGroup>
@@ -242,54 +255,60 @@ function AdvancedControlsContent () {
        </S.ControlGroup>
        <S.ControlGroup>
          <div className="col-2">
-            {showStrictFingerprintingMode ? <Select
-              value={siteSettings?.fingerprintMode}
-              ariaLabel={getLocale('braveShieldsFingerprintingBlocked')}
+            {showStrictFingerprintingMode ? <PanelDropdown
+              size="small"
+              value={siteSettings?.fingerprintMode?.toString()}
              onChange={handleFingerprintModeSelectionChange}
              disabled={siteBlockInfo?.isBraveShieldsManaged}
            >
-            {fingerprintModeOptions.map(entry => {
+              <span slot="label">
+                {getLocale('braveShieldsFingerprintingBlocked')}
+              </span>
+              {fingerprintModeOptions.map(entry => {
                return (
-                  <option key={entry.value} value={entry.value}>{entry.text}</option>
+                  <leo-option key={entry.value} value={entry.value?.toString()}>{entry.text}</leo-option>
                )
              })}
-            </Select> :
-            <label>
-            <span>{getLocale('braveShieldsFingerprintingBlockedStd')}</span>
-            <Toggle
-              aria-label={getLocale('braveShieldsFingerprintingBlockedStd')}
-              onChange={handleFingerprintModeToggleChange}
-              checked={siteSettings?.fingerprintMode !== FingerprintMode.ALLOW_MODE}
-              size='small'
-              disabled={siteBlockInfo?.isBraveShieldsManaged}
-            />
-            </label>}
-            </div>
-            <S.CountButton
-              title={invokedWebcompatListCount.toString()}
-              hidden={!isWebcompatExceptionsServiceEnabled}
-              aria-label={getLocale('braveShieldsFingerprintingBlockedStd')}
-              onClick={() => setViewType?.(ViewType.FingerprintList)}
-              disabled={invokedWebcompatListCount <= 0 || siteSettings?.fingerprintMode === FingerprintMode.ALLOW_MODE}
-            >
-              &gt;
-            </S.CountButton>
+            </PanelDropdown> :
+              <label>
+                <span>{getLocale('braveShieldsFingerprintingBlockedStd')}</span>
+                <Toggle
+                  aria-label={getLocale('braveShieldsFingerprintingBlockedStd')}
+                  onChange={handleFingerprintModeToggleChange}
+                  checked={siteSettings?.fingerprintMode !== FingerprintMode.ALLOW_MODE}
+                  size='small'
+                  disabled={siteBlockInfo?.isBraveShieldsManaged}
+                />
+              </label>}
+          </div>
+          <S.CountButton
+            title={invokedWebcompatListCount.toString()}
+            hidden={!isWebcompatExceptionsServiceEnabled}
+            aria-label={getLocale('braveShieldsFingerprintingBlockedStd')}
+            onClick={() => setViewType?.(ViewType.FingerprintList)}
+            disabled={invokedWebcompatListCount <= 0 || siteSettings?.fingerprintMode === FingerprintMode.ALLOW_MODE}
+          >
+            &gt;
+          </S.CountButton>
        </S.ControlGroup>
        <S.ControlGroup>
          <div className="col-2">
-            <Select
-              value={siteSettings?.cookieBlockMode}
-              ariaLabel={getLocale('braveShieldsCookiesBlockAll')}
+            <PanelDropdown
+              size="small"
+              value={siteSettings?.cookieBlockMode?.toString()}
              onChange={handleCookieBlockModeChange}
              disabled={siteBlockInfo?.isBraveShieldsManaged}
            >
+              <span slot="label">
+                {getLocale('braveShieldsCookiesBlockAll')}
+              </span>
              {cookieBlockModeOptions.map(entry => {
                return (
-                  <option key={entry.value} value={entry.value}>{entry.text}</option>
+                  <leo-option key={entry.value} value={entry.value.toString()}>{entry.text}</leo-option>
                )
              })}
-            </Select>
-            </div>
+            </PanelDropdown>
+          </div>
        </S.ControlGroup>
        {isBraveForgetFirstPartyStorageFeatureEnabled && <S.ControlGroup>
          <label>
@@ -308,7 +327,7 @@ function AdvancedControlsContent () {
        </S.SettingsDesc>
      </S.SettingsBox>
      <GlobalSettings showAdblockLists={true} />
-  </section>
+    </section>
  )
 }

@@ -1,41 +0,0 @@
-// Copyright (c) 2022 The Brave Authors. All rights reserved.
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this file,
-// you can obtain one at https://mozilla.org/MPL/2.0/.
-import * as React from 'react'
-
-import * as S from './style'
-
-type ValueType = string | number
-
-interface BaseSelectProps {
-  value?: ValueType
-  onChange?: (value: ValueType) => unknown
-  ariaLabel: string
-  disabled?: boolean
-}
-
-type SelectProps = React.PropsWithChildren<BaseSelectProps>
-
-function Select (props: SelectProps) {
-  const handleChange = (e: React.FormEvent<HTMLSelectElement>) => {
-    const target = e.target as HTMLSelectElement
-    props.onChange?.(target.value)
-  }
-
-  return (
-    <S.SelectBox>
-      <S.Select
-        value={props.value}
-        onChange={handleChange}
-        aria-label={props.ariaLabel}
-        disabled={props.disabled}
-      >
-        {props.children}
-      </S.Select>
-      <svg width="13" height="7" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M6.718 4.781 11.624.693a.667.667 0 1 1 .854 1.024L7.145 6.161a.667.667 0 0 1-.854 0L.958 1.717A.667.667 0 0 1 1.81.693L6.718 4.78Z"/></svg>
-    </S.SelectBox>
-  )
-}
-
-export default Select
@@ -1,49 +0,0 @@
-// Copyright (c) 2022 The Brave Authors. All rights reserved.
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this file,
-// you can obtain one at https://mozilla.org/MPL/2.0/.
-import styled from 'styled-components'
-
-export const SelectBox = styled.div`
-  position: relative;
-
-  svg {
-    position: absolute;
-    right: 10px;
-    top: 40%;
-    pointer-events: none;
-
-    path {
-      fill: ${(p) => p.theme.color.text02};
-    }
-  }
-`
-
-export const Select = styled.select`
-  font-family: ${(p) => p.theme.fontFamily.heading};
-  font-size: 12px;
-  line-height: 1.2;
-  padding: 9px calc(8px + 20px) 9px 8px; /* Offset left of svg icon */
-  color: ${(p) => p.theme.color.text01};
-  background-color: ${(p) => p.theme.color.background01};
-  border-radius: 4px;
-  border: 2px solid transparent;
-  width: 100%;
-  appearance: none;
-  transition: box-shadow 0.1s ease-in-out;
-
-  &:hover {
-    @media (prefers-color-scheme: dark) {
-      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.36);
-    }
-
-    @media (prefers-color-scheme: light) {
-      box-shadow: 0px 1px 4px rgba(99, 105, 110, 0.2);
-    }
-  }
-
-  &:focus-visible {
-    outline: 0;
-    border-color: ${(p) => p.theme.color.focusBorder};
-  }
-`