<style include="settings-shared cr-icons"> | |
:host { | |
box-sizing: border-box; | |
display: block; | |
padding-bottom: 5px; /* Prevents focus outlines from being cropped. */ | |
padding-top: 8px; | |
} | |
:host * { | |
-webkit-tap-highlight-color: transparent; | |
} | |
#topMenu { | |
display: flex; | |
flex-direction: column; | |
min-width: fit-content; | |
} | |
a[href], | |
#advancedButton { | |
align-items: center; | |
color: var(--settings-nav-item-color); | |
display: flex; | |
font-weight: 500; | |
margin-inline-end: 2px; /* Margin so selected outline is visible. */ | |
margin-inline-start: 1px; | |
min-height: 20px; | |
padding-bottom: 10px; | |
padding-inline-start: 23px; /* 24px - 1px from margin for outline. */ | |
padding-top: 10px; | |
} | |
a[href].iron-selected { | |
color: var(--cr-link-color); | |
} | |
a[href]:focus { | |
background: transparent; | |
outline: auto 5px -webkit-focus-ring-color; | |
} | |
iron-icon { | |
--iron-icon-fill-color: var(--settings-nav-icon-color); | |
margin-inline-end: 24px; | |
pointer-events: none; | |
vertical-align: top; | |
} | |
.iron-selected > iron-icon { | |
fill: var(--cr-link-color); | |
} | |
#advancedButton { | |
--ink-color: var(--settings-nav-item-color); | |
background: none; | |
border: none; | |
border-radius: initial; | |
box-shadow: none; | |
height: unset; | |
margin-top: 8px; | |
padding-inline-end: 0; | |
text-transform: none; | |
} | |
#advancedButton:focus { | |
outline: none; | |
} | |
:host-context(.focus-outline-visible) #advancedButton:focus { | |
outline: auto 5px -webkit-focus-ring-color; | |
} | |
#advancedButton > span, | |
#extensionsLink > span { | |
flex: 1; | |
} | |
#advancedButton > iron-icon, | |
#extensionsLink > .cr-icon { | |
height: var(--cr-icon-size); | |
margin-inline-end: 14px; /* 16px - 2px from margin for outline. */ | |
width: var(--cr-icon-size); | |
} | |
#menuSeparator { | |
/* Per bettes@, this is different from the other separator lines. */ | |
border-bottom: 1px solid rgba(0, 0, 0, 0.08); | |
margin-bottom: 8px; | |
margin-top: 8px; | |
} | |
@media (prefers-color-scheme: dark) { | |
#menuSeparator { | |
border-bottom: var(--cr-separator-line); /* override */ | |
} | |
} | |
</style> | |
<div role="navigation"> | |
<cr-menu-selector> | |
<iron-selector id="topMenu" selectable="a:not(#extensionsLink)" | |
attr-for-selected="href" on-iron-activate="onSelectorActivate_" | |
on-click="onLinkClick_"> | |
<a role="menuitem" | |
id="people" href="/people" hidden="[[!pageVisibility.people]]"> | |
<iron-icon icon="cr:person"></iron-icon> | |
$i18n{peoplePageTitle} | |
</a> | |
<a role="menuitem" id="autofill" href="/autofill" | |
hidden="[[!pageVisibility.autofill]]"> | |
<iron-icon icon="settings:assignment"></iron-icon> | |
$i18n{autofillPageTitle} | |
</a> | |
<a role="menuitem" href="/safetyCheck" | |
hidden="[[!pageVisibility.safetyCheck]]" | |
id="safetyCheck"> | |
<iron-icon icon="settings20:safety-check"></iron-icon> | |
$i18n{safetyCheckSectionTitle} | |
</a> | |
<a role="menuitem" href="/privacy" | |
hidden="[[!pageVisibility.privacy]]"> | |
<iron-icon icon="cr:security"></iron-icon> | |
$i18n{privacyPageTitle} | |
</a> | |
<a role="menuitem" id="appearance" href="/appearance" | |
hidden="[[!pageVisibility.appearance]]"> | |
<iron-icon icon="settings:palette"></iron-icon> | |
$i18n{appearancePageTitle} | |
</a> | |
<a role="menuitem" href="/search"> | |
<iron-icon icon="cr:search"></iron-icon> | |
$i18n{searchPageTitle} | |
</a> | |
<if expr="not chromeos and not lacros"> | |
<a role="menuitem" id="defaultBrowser" | |
href="/defaultBrowser" | |
hidden="[[!pageVisibility.defaultBrowser]]"> | |
<iron-icon icon="settings:web"></iron-icon> | |
$i18n{defaultBrowser} | |
</a> | |
</if> | |
<a role="menuitem" id="onStartup" href="/onStartup" | |
hidden="[[!pageVisibility.onStartup]]"> | |
<iron-icon icon="settings:power-settings-new"></iron-icon> | |
$i18n{onStartup} | |
</a> | |
<cr-button | |
role="menuitem" tabindex="-1" | |
id="advancedButton" | |
aria-expanded$="[[boolToString_(advancedOpened)]]" | |
on-click="onAdvancedButtonToggle_" | |
hidden="[[!pageVisibility.advancedSettings]]"> | |
<span>$i18n{advancedPageTitle}</span> | |
<iron-icon icon="[[arrowState_(advancedOpened)]]"> | |
</iron-icon></cr-button> | |
<iron-collapse id="advancedSubmenu" opened="[[advancedOpened]]" | |
hidden="[[!pageVisibility.advancedSettings]]"> | |
<iron-selector id="subMenu" selectable="a" attr-for-selected="href" | |
role="navigation" on-click="onLinkClick_"> | |
<a role="menuitem" href="/languages" | |
disabled$="[[!advancedOpened]]"> | |
<iron-icon icon="settings:language"></iron-icon> | |
$i18n{languagesPageTitle} | |
</a> | |
<a role="menuitem" href="/downloads" | |
disabled$="[[!advancedOpened]]"> | |
<iron-icon icon="cr:file-download"></iron-icon> | |
$i18n{downloadsPageTitle} | |
</a> | |
<a role="menuitem" href="/accessibility" | |
disabled$="[[!advancedOpened]]"> | |
<iron-icon icon="settings:accessibility"></iron-icon> | |
$i18n{a11yPageTitle} | |
</a> | |
<if expr="not chromeos and not lacros"> | |
<a role="menuitem" href="/system" | |
disabled$="[[!advancedOpened]]"> | |
<iron-icon icon="settings:build"></iron-icon> | |
$i18n{systemPageTitle} | |
</a> | |
</if> | |
<a role="menuitem" id="reset" href="/reset" | |
disabled$="[[!advancedOpened]]" | |
hidden="[[!pageVisibility.reset]]"> | |
<iron-icon icon="settings:restore"></iron-icon> | |
$i18n{resetPageTitle} | |
</a> | |
</iron-selector> | |
</iron-collapse> | |
<div id="menuSeparator"></div> | |
<a role="menuitem" id="extensionsLink" | |
href="chrome://extensions" target="_blank" | |
hidden="[[!pageVisibility.extensions]]" | |
on-click="onExtensionsLinkClick_" | |
title="$i18n{extensionsLinkTooltip}"> | |
<span>$i18n{extensionsPageTitle}</span> | |
<div class="cr-icon icon-external"></div> | |
</a> | |
<a role="menuitem" id="about-menu" href="/help"> | |
$i18n{aboutPageTitle} | |
</a> | |
</iron-selector> | |
</cr-menu-selector> | |
</div> |