| <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> | |
| <template is="dom-if" if="[[!enableLandingPageRedesign_]]"> | |
| <a role="menuitem" href="/safetyCheck" | |
| hidden="[[!pageVisibility.safetyCheck]]" | |
| id="safetyCheck"> | |
| <iron-icon icon="settings20:safety-check"></iron-icon> | |
| $i18n{safetyCheckSectionTitle} | |
| </a> | |
| </template> | |
| <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> |