blob: 0bcf8487656c8e11a5ccb0ff8b5fc69a2d4e2cf1 [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
<link rel="import" href="../icons.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">
<if expr="chromeos">
<!-- TODO(crbug.com/986596): Remove OS icons when SplitSettings is complete. -->
<link rel="import" href="../chromeos/os_icons.html">
</if>
<dom-module id="settings-menu">
<template>
<style include="settings-shared">
:host {
box-sizing: border-box;
display: block;
padding-bottom: 2px;
padding-top: 8px;
}
:host * {
-webkit-tap-highlight-color: transparent;
}
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 > iron-icon {
@apply --cr-icon-height-width;
margin-inline-end: 14px; /* 16px - 2px from margin for outline. */
}
#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>
<iron-selector id="topMenu" selectable="a:not(#extensionsLink)"
attr-for-selected="href" on-iron-activate="onSelectorActivate_"
role="navigation" on-click="onLinkClick_">
<if expr="chromeos">
<a href="/internet" hidden="[[!pageVisibility.internet]]">
<iron-icon icon="os-settings:network-wifi"></iron-icon>
$i18n{internetPageTitle}
</a>
<a href="/bluetooth" hidden="[[!pageVisibility.bluetooth]]">
<iron-icon icon="cr:bluetooth"></iron-icon>
$i18n{bluetoothPageTitle}
</a>
<a id="multidevice" href="/multidevice"
hidden="[[!pageVisibility.multidevice]]">
<iron-icon icon="os-settings:multidevice-better-together-suite">
</iron-icon>
$i18n{multidevicePageTitle}
</a>
</if>
<a id="people" href="/people" hidden="[[!pageVisibility.people]]">
<iron-icon icon="cr:person"></iron-icon>
$i18n{peoplePageTitle}
</a>
<a id="autofill" href="/autofill"
hidden="[[!pageVisibility.autofill]]">
<iron-icon icon="settings:assignment"></iron-icon>
$i18n{autofillPageTitle}
</a>
<a id="appearance" href="/appearance"
hidden="[[!pageVisibility.appearance]]">
<iron-icon icon="settings:palette"></iron-icon>
$i18n{appearancePageTitle}
</a>
<if expr="chromeos">
<a href="/device" hidden="[[!pageVisibility.device]]">
<iron-icon icon="os-settings:laptop-chromebook"></iron-icon>
$i18n{devicePageTitle}
</a>
</if>
<a href="/search">
<iron-icon icon="cr:search"></iron-icon>
$i18n{searchPageTitle}
</a>
<if expr="chromeos">
<a href="/androidApps" hidden="[[!showAndroidApps]]">
<iron-icon icon="os-settings:play-prism"></iron-icon>
$i18n{androidAppsPageTitle}
</a>
<a href="/crostini" hidden="[[!showCrostini]]">
<iron-icon icon="os-settings:crostini-mascot"></iron-icon>
$i18n{crostiniPageTitle}
</a>
<a href="/pluginVm" hidden="[[!showPluginVm]]">
<iron-icon icon="os-settings:plugin-vm"></iron-icon>
$i18n{pluginVmPageTitle}
</a>
</if>
<if expr="not chromeos">
<a id="defaultBrowser" href="/defaultBrowser"
hidden="[[!pageVisibility.defaultBrowser]]">
<iron-icon icon="settings:web"></iron-icon>
$i18n{defaultBrowser}
</a>
</if>
<a id="onStartup" href="/onStartup"
hidden="[[!pageVisibility.onStartup]]">
<iron-icon icon="settings:power-settings-new"></iron-icon>
$i18n{onStartup}
</a>
<cr-button 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_">
<if expr="chromeos">
<a href="/dateTime" hidden="[[!pageVisibility.dateTime]]">
<iron-icon icon="os-settings:access-time"></iron-icon>
$i18n{dateTimePageTitle}
</a>
</if>
<a href="/privacy">
<iron-icon icon="cr:security"></iron-icon>
$i18n{privacyPageTitle}
</a>
<a href="/languages">
<iron-icon icon="settings:language"></iron-icon>
$i18n{languagesPageTitle}
</a>
<a href="/downloads">
<iron-icon icon="cr:file-download"></iron-icon>
$i18n{downloadsPageTitle}
</a>
<a href="/printing" hidden="[[!pageVisibility.printing]]">
<iron-icon icon="cr:print"></iron-icon>
$i18n{printingPageTitle}
</a>
<a href="/accessibility">
<iron-icon icon="settings:accessibility"></iron-icon>
$i18n{a11yPageTitle}
</a>
<if expr="not chromeos">
<a href="/system">
<iron-icon icon="settings:build"></iron-icon>
$i18n{systemPageTitle}
</a>
</if>
<a id="reset" href="/reset" hidden="[[!pageVisibility.reset]]">
<iron-icon icon="settings:restore"></iron-icon>
$i18n{resetPageTitle}
</a>
</iron-selector>
</iron-collapse>
<div id="menuSeparator"></div>
<a id="extensionsLink" href="chrome://extensions" target="_blank"
hidden="[[!pageVisibility.extensions]]"
on-click="onExtensionsLinkClick_"
title="$i18n{extensionsLinkTooltip}">
<span>$i18n{extensionsPageTitle}</span>
<iron-icon class="cr-icon icon-external" actionable></iron-icon>
</a>
<a id="about-menu" href="/help">$i18n{aboutPageTitle}</a>
</iron-selector>
</template>
<script src="settings_menu.js"></script>
</dom-module>