Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(513)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/settings/settings_menu/settings_menu.html

Issue 2651293003: Make MD Settings side bar keyboard accessible. (Closed)
Patch Set: Fix Tests Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | chrome/browser/resources/settings/settings_menu/settings_menu.js » ('j') | chrome/browser/resources/settings/settings_menu/settings_menu.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <link rel="import" href="chrome://resources/cr_elements/icons.html"> 1 <link rel="import" href="chrome://resources/cr_elements/icons.html">
2 <link rel="import" href="chrome://resources/html/assert.html"> 2 <link rel="import" href="chrome://resources/html/assert.html">
3 <link rel="import" href="chrome://resources/html/polymer.html"> 3 <link rel="import" href="chrome://resources/html/polymer.html">
4 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-coll apse.html">
4 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm l"> 5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm l">
5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.h tml"> 6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-sele ctor.html">
6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-submen u.html"> 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt on.html">
7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripp le.html">
8 <link rel="import" href="../icons.html"> 8 <link rel="import" href="../icons.html">
9 <link rel="import" href="../route.html"> 9 <link rel="import" href="../route.html">
10 <link rel="import" href="../settings_shared_css.html"> 10 <link rel="import" href="../settings_shared_css.html">
11 11
12 <dom-module id="settings-menu"> 12 <dom-module id="settings-menu">
13 <template> 13 <template>
14 <style include="settings-shared"> 14 <style include="settings-shared">
15 #about-menu[about-selected] { 15 :host {
16 display: block;
17 margin-top: 8px;
18 }
19
20 a[href],
21 #advancedButton {
22 --cr-selectable-focus: {
23 outline: auto 5px -webkit-focus-ring-color;
24 };
25 -webkit-margin-end: 2px; /* Margin so selected outline is visible. */
26 -webkit-margin-start: 1px;
27 -webkit-padding-start: 23px; /* 24px - 1px from margin for outline. */
28 color: var(--settings-nav-grey);
29 display: block;
30 font-size: 100%;
31 font-weight: 500;
32 min-height: 20px;
33 padding-bottom: 10px;
34 padding-top: 10px;
35 word-break: break-word;
36 }
37
38 a[href].iron-selected {
16 color: var(--google-blue-700); 39 color: var(--google-blue-700);
17 } 40 }
18 41
19 iron-icon { 42 iron-icon {
20 --iron-icon-fill-color: var(--settings-nav-grey); 43 --iron-icon-fill-color: var(--settings-nav-grey);
21 -webkit-margin-end: 24px; 44 -webkit-margin-end: 24px;
45 vertical-align: top;
22 } 46 }
23 47
24 .iron-selected:not(.menu-trigger) > iron-icon { 48 .iron-selected > iron-icon {
25 fill: var(--google-blue-700); 49 fill: var(--google-blue-700);
26 } 50 }
27 51
28 .menu-trigger span { 52 #advancedButton {
29 -webkit-margin-end: 16px; 53 -webkit-padding-end: 0;
54 background-color: unset;
55 display: flex;
56 height: unset;
57 margin-top: 8px;
58 text-transform: none;
59 }
60
61 #advancedButton:focus {
62 outline: none;
63 }
64
65 #advancedButton.keyboard-focus:focus {
66 outline: auto 5px -webkit-focus-ring-color;
67 }
68
69 #advancedButton > span {
30 flex: 1; 70 flex: 1;
31 } 71 }
32 72
33 paper-menu { 73 #advancedButton > iron-icon {
34 --paper-menu-selected-item: { 74 -webkit-margin-end: 22px; /* 24px - 2px from margin for outline. */
35 font-weight: 500;
36 };
37 --paper-menu-focused-item-after: {
38 background: none;
39 };
40 color: var(--settings-nav-grey);
41 font-size: 100%;
42 padding: 0;
43 }
44
45 div[data-path] {
46 @apply(--settings-actionable);
47 }
48
49 #basicPage {
50 margin-top: 8px;
51 }
52
53 .page-menu > div {
54 margin-top: 8px;
55 }
56
57 .page-menu {
58 --paper-menu-selected-item: {
59 font-weight: 500;
60 };
61 }
62
63 paper-menu div {
64 position: relative; /* Needed for paper-ripple. */
65 }
66
67 paper-ripple {
68 color: var(--google-blue-700);
69 opacity: .5;
70 }
71
72 .page-menu paper-menu {
73 --paper-menu-selected-item: {
74 color: var(--google-blue-700);
75 font-weight: 500;
76 };
77 }
78
79 .page-menu div {
80 -webkit-padding-start: 24px;
81 align-items: center;
82 display: flex;
83 font-size: 100%;
84 font-weight: 500;
85 min-height: 40px;
86 word-break: break-word;
87 }
88
89 .page-menu div iron-icon {
90 flex-shrink: 0;
91 } 75 }
92 76
93 .separator { 77 .separator {
94 /* Per Alan@, this line is different from the other separator lines. */ 78 /* Per Alan@, this line is different from the other separator lines. */
95 border-bottom: 1px solid rgba(0, 0, 0, 0.08); 79 border-bottom: 1px solid rgba(0, 0, 0, 0.08);
80 margin-bottom: 8px;
96 margin-top: 8px; 81 margin-top: 8px;
97 } 82 }
98 </style> 83 </style>
99 <paper-menu name="root-menu"> 84 <iron-selector id="topMenu" selectable="a" attr-for-selected="href"
100 <div class="page-menu" id="basicPage"> 85 on-iron-activate="onSelectorActivate_">
101 <paper-menu attr-for-selected="data-path" class="menu-content"
102 id="basicMenu" selected="[[currentRoute.path]]">
103 <if expr="chromeos"> 86 <if expr="chromeos">
104 <div data-path="/internet" on-tap="openPage_"> 87 <a href="/internet" on-click="onLinkTap_">
Dan Beam 2017/02/13 20:04:06 why did you change to on-click?
Dan Beam 2017/02/13 20:04:06 why can't we just put 1 event listener on #topMenu
hcarmona 2017/02/13 23:42:34 on-click didn't focus the link, while on-tap did.
hcarmona 2017/02/13 23:42:34 This worked. Done.
105 <iron-icon icon="settings:network-wifi"></iron-icon> 88 <iron-icon icon="settings:network-wifi">
106 $i18n{internetPageTitle} 89 </iron-icon>$i18n{internetPageTitle}
107 </div> 90 </a>
108 <div data-path="/bluetooth" on-tap="openPage_"> 91 <a href="/bluetooth" on-click="onLinkTap_">
109 <iron-icon icon="settings:bluetooth"></iron-icon> 92 <iron-icon icon="settings:bluetooth">
110 $i18n{bluetoothPageTitle} 93 </iron-icon>$i18n{bluetoothPageTitle}
111 </div> 94 </a>
112 </if> 95 </if>
113 <div id="people" data-path="/people" on-tap="openPage_" 96 <a id="people" href="/people" on-click="onLinkTap_"
114 hidden="[[!pageVisibility.people]]"> 97 hidden="[[!pageVisibility.people]]">
115 <iron-icon icon="settings:people"></iron-icon> 98 <iron-icon icon="settings:people">
116 $i18n{peoplePageTitle} 99 </iron-icon>$i18n{peoplePageTitle}
117 </div> 100 </a>
118 <div data-path="/appearance" on-tap="openPage_" 101 <a href="/appearance" on-click="onLinkTap_"
119 hidden="[[!pageVisibility.appearance]]"> 102 hidden="[[!pageVisibility.appearance]]">
120 <iron-icon icon="settings:palette"></iron-icon> 103 <iron-icon icon="settings:palette">
121 $i18n{appearancePageTitle} 104 </iron-icon>$i18n{appearancePageTitle}
122 </div> 105 </a>
123 <if expr="chromeos"> 106 <if expr="chromeos">
124 <div data-path="/device" on-tap="openPage_"> 107 <a href="/device" on-click="onLinkTap_">
125 <iron-icon icon="settings:laptop-chromebook"></iron-icon> 108 <iron-icon icon="settings:laptop-chromebook">
126 $i18n{devicePageTitle} 109 </iron-icon>$i18n{devicePageTitle}
127 </div> 110 </a>
128 </if> 111 </if>
129 <div data-path="/search" on-tap="openPage_"> 112 <a href="/search" on-click="onLinkTap_">
130 <iron-icon icon="cr:search"></iron-icon> 113 <iron-icon icon="cr:search">
131 $i18n{searchPageTitle} 114 </iron-icon>$i18n{searchPageTitle}
132 </div> 115 </a>
133 <if expr="chromeos"> 116 <if expr="chromeos">
134 <div data-path="/androidApps" on-tap="openPage_" 117 <a href="/androidApps" on-click="onLinkTap_"
135 hidden="[[!showAndroidApps]]"> 118 hidden="[[!showAndroidApps]]">
136 <iron-icon icon="settings:android"></iron-icon> 119 <iron-icon icon="settings:android">
137 $i18n{androidAppsPageTitle} 120 </iron-icon>$i18n{androidAppsPageTitle}
138 </div> 121 </a>
139 </if> 122 </if>
140 <if expr="not chromeos"> 123 <if expr="not chromeos">
141 <div data-path="/defaultBrowser" on-tap="openPage_" 124 <a href="/defaultBrowser" on-click="onLinkTap_"
142 hidden="[[!pageVisibility.defaultBrowser]]"> 125 hidden="[[!pageVisibility.defaultBrowser]]">
143 <iron-icon icon="settings:web"></iron-icon> 126 <iron-icon icon="settings:web">
144 $i18n{defaultBrowser} 127 </iron-icon>$i18n{defaultBrowser}
145 </div> 128 </a>
146 </if> 129 </if>
147 <div data-path="/onStartup" on-tap="openPage_" 130 <a href="/onStartup" on-click="onLinkTap_"
148 hidden="[[!pageVisibility.onStartup]]"> 131 hidden="[[!pageVisibility.onStartup]]">
149 <iron-icon icon="settings:power-settings-new"></iron-icon> 132 <iron-icon icon="settings:power-settings-new">
150 $i18n{onStartup} 133 </iron-icon>$i18n{onStartup}
151 </div> 134 </a>
152 </paper-menu> 135 <paper-button toggles id="advancedButton"
153 </div> 136 aria-active-attribute="aria-expanded" active="{{advancedOpened}}">
154 <paper-submenu class="page-menu" id="advancedSubmenu" actionable 137 <span>$i18n{advancedPageTitle}</span>
155 opened="{{advancedOpened}}" 138 <iron-icon icon="[[arrowState_(advancedOpened)]]">
156 hidden="[[!pageVisibility.advancedSettings]]"> 139 </iron-icon></paper-button>
157 <div class="menu-trigger"> 140 <iron-collapse id="advancedSubmenu" opened="[[advancedOpened]]">
158 <span>$i18n{advancedPageTitle}</span> 141 <iron-selector id="subMenu" selectable="a" attr-for-selected="href"
159 <iron-icon icon="[[arrowState_(advancedOpened)]]"></iron-icon> 142 on-iron-activate="onSelectorActivate_">
160 <paper-ripple></paper-ripple>
161 </div>
162 <paper-menu attr-for-selected="data-path" class="menu-content"
163 id="advancedMenu" selected="[[currentRoute.path]]">
164 <if expr="chromeos"> 143 <if expr="chromeos">
165 <div data-path="/dateTime" on-tap="openPage_"> 144 <a href="/dateTime" on-click="onLinkTap_">
166 <iron-icon icon="settings:access-time"></iron-icon> 145 <iron-icon icon="settings:access-time">
167 $i18n{dateTimePageTitle} 146 </iron-icon>$i18n{dateTimePageTitle}
168 </div> 147 </a>
169 </if> 148 </if>
170 <div data-path="/privacy" on-tap="openPage_"> 149 <a href="/privacy" on-click="onLinkTap_">
171 <iron-icon icon="settings:security"></iron-icon> 150 <iron-icon icon="settings:security">
172 $i18n{privacyPageTitle} 151 </iron-icon>$i18n{privacyPageTitle}
173 </div> 152 </a>
174 <div data-path="/passwordsAndForms" on-tap="openPage_" 153 <a href="/passwordsAndForms" on-click="onLinkTap_"
175 hidden="[[!pageVisibility.passwordsAndForms]]"> 154 hidden="[[!pageVisibility.passwordsAndForms]]">
176 <iron-icon icon="settings:assignment"></iron-icon> 155 <iron-icon icon="settings:assignment">
177 $i18n{passwordsAndAutofillPageTitle} 156 </iron-icon>$i18n{passwordsAndAutofillPageTitle}
178 </div> 157 </a>
179 <div data-path="/languages" on-tap="openPage_"> 158 <a href="/languages" on-click="onLinkTap_">
180 <iron-icon icon="settings:language"></iron-icon> 159 <iron-icon icon="settings:language">
181 $i18n{languagesPageTitle} 160 </iron-icon>$i18n{languagesPageTitle}
182 </div> 161 </a>
183 <div data-path="/downloads" on-tap="openPage_"> 162 <a href="/downloads" on-click="onLinkTap_">
184 <iron-icon icon="cr:file-download"></iron-icon> 163 <iron-icon icon="cr:file-download">
185 $i18n{downloadsPageTitle} 164 </iron-icon>$i18n{downloadsPageTitle}
186 </div> 165 </a>
187 <div data-path="/printing" on-tap="openPage_"> 166 <a href="/printing" on-click="onLinkTap_">
188 <iron-icon icon="cr:print"></iron-icon> 167 <iron-icon icon="cr:print">
189 $i18n{printingPageTitle} 168 </iron-icon>$i18n{printingPageTitle}
190 </div> 169 </a>
191 <div data-path="/accessibility" on-tap="openPage_"> 170 <a href="/accessibility" on-click="onLinkTap_">
192 <iron-icon icon="settings:accessibility"></iron-icon> 171 <iron-icon icon="settings:accessibility">
193 $i18n{a11yPageTitle} 172 </iron-icon>$i18n{a11yPageTitle}
194 </div> 173 </a>
195 <if expr="not chromeos"> 174 <if expr="not chromeos">
196 <div data-path="/system" on-tap="openPage_"> 175 <a href="/system" on-click="onLinkTap_">
197 <iron-icon icon="settings:build"></iron-icon> 176 <iron-icon icon="settings:build">
198 $i18n{systemPageTitle} 177 </iron-icon>$i18n{systemPageTitle}
199 </div> 178 </a>
200 </if> 179 </if>
201 <div data-path="/reset" on-tap="openPage_" 180 <a href="/reset" on-click="onLinkTap_"
202 hidden="[[!pageVisibility.reset]]"> 181 hidden="[[!pageVisibility.reset]]">
203 <iron-icon icon="settings:restore"></iron-icon> 182 <iron-icon icon="settings:restore">
204 $i18n{resetPageTitle} 183 </iron-icon>$i18n{resetPageTitle}
205 </div> 184 </a>
206 </paper-menu> 185 </iron-selector>
207 </paper-submenu> 186 </iron-collapse>
208 <div class="separator"></div> 187 <div class="separator"></div>
209 <paper-submenu class="page-menu"> 188 <a id="about-menu" on-click="onLinkTap_" href="/help">
210 <div about-selected$="[[aboutSelected_]]" class="menu-trigger" 189 $i18n{aboutPageTitle}
211 id="about-menu" on-tap="openPage_" data-path="/help"> 190 </a>
212 $i18n{aboutPageTitle} 191 </iron-selector>
213 </div>
214 </paper-submenu>
215 </paper-menu>
216 </template> 192 </template>
217 <script src="settings_menu.js"></script> 193 <script src="settings_menu.js"></script>
218 </dom-module> 194 </dom-module>
OLDNEW
« no previous file with comments | « no previous file | chrome/browser/resources/settings/settings_menu/settings_menu.js » ('j') | chrome/browser/resources/settings/settings_menu/settings_menu.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698