OLD | NEW |
1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
2 <link rel="import" href="chrome://resources/polymer/v1_0/app-layout/app-drawer/a
pp-drawer.html"> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/app-layout/app-drawer/a
pp-drawer.html"> |
| 3 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-f
lex-layout.html"> |
3 <link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-sele
ctor.html"> | 4 <link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-sele
ctor.html"> |
4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.h
tml"> | |
5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> | 5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> |
| 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/typography
.html"> |
6 <link rel="import" href="chrome://history/browser_service.html"> | 7 <link rel="import" href="chrome://history/browser_service.html"> |
7 <link rel="import" href="chrome://history/shared_style.html"> | 8 <link rel="import" href="chrome://history/shared_style.html"> |
8 | 9 |
9 <dom-module id="history-side-bar"> | 10 <dom-module id="history-side-bar"> |
10 <template> | 11 <template> |
11 <style include="shared-style"> | 12 <style include="shared-style"> |
12 :host { | 13 :host { |
13 display: block; | 14 display: block; |
14 height: 100%; | 15 height: 100%; |
15 padding-top: 5px; | 16 padding-top: 5px; |
(...skipping 18 matching lines...) Expand all Loading... |
34 div.separator { | 35 div.separator { |
35 background-color: rgba(0, 0, 0, 0.08); | 36 background-color: rgba(0, 0, 0, 0.08); |
36 height: 1px; | 37 height: 1px; |
37 margin: 8px 0; | 38 margin: 8px 0; |
38 } | 39 } |
39 | 40 |
40 #clear-browsing-data { | 41 #clear-browsing-data { |
41 text-transform: uppercase; | 42 text-transform: uppercase; |
42 } | 43 } |
43 | 44 |
44 paper-item { | 45 iron-selector { |
| 46 -webkit-user-select: none; |
| 47 background-color: transparent; |
| 48 color: #5a5a5a; |
| 49 } |
| 50 |
| 51 iron-selector a { |
| 52 @apply(--paper-font-subhead); |
45 -webkit-padding-start: 24px; | 53 -webkit-padding-start: 24px; |
| 54 align-items: center; |
| 55 box-sizing: border-box; |
| 56 color: inherit; |
46 cursor: pointer; | 57 cursor: pointer; |
| 58 display: flex; |
47 font-size: 14px; | 59 font-size: 14px; |
48 font-weight: 500; | 60 font-weight: 500; |
| 61 min-height: 48px; |
| 62 outline: none; |
| 63 position: relative; |
| 64 text-decoration: none; |
49 } | 65 } |
50 | 66 |
51 paper-item.iron-selected { | 67 iron-selector a:focus { |
| 68 outline: 0; |
| 69 position: relative; |
| 70 } |
| 71 |
| 72 iron-selector a:focus::before { |
| 73 @apply(--layout-fit); |
| 74 |
| 75 background: currentColor; |
| 76 content: ''; |
| 77 opacity: var(--dark-divider-opacity); |
| 78 pointer-events: none; |
| 79 } |
| 80 |
| 81 iron-selector a.iron-selected { |
52 color: var(--google-blue-500); | 82 color: var(--google-blue-500); |
53 font-weight: 500; | 83 font-weight: 500; |
54 } | 84 } |
55 | 85 |
56 iron-selector { | 86 iron-selector { |
57 -webkit-user-select: none; | 87 -webkit-user-select: none; |
58 color: #5a5a5a; | 88 color: #5a5a5a; |
59 } | 89 } |
60 | 90 |
61 #footer { | 91 #footer { |
(...skipping 16 matching lines...) Expand all Loading... |
78 text-decoration: none; | 108 text-decoration: none; |
79 } | 109 } |
80 </style> | 110 </style> |
81 | 111 |
82 <app-drawer id="drawer" tabindex="0" on-focus="onDrawerFocus_" swipe-open | 112 <app-drawer id="drawer" tabindex="0" on-focus="onDrawerFocus_" swipe-open |
83 align="start"> | 113 align="start"> |
84 <div id="drawer-header"> | 114 <div id="drawer-header"> |
85 <h1>$i18n{title}</h1> | 115 <h1>$i18n{title}</h1> |
86 </div> | 116 </div> |
87 <iron-selector id="menu" selected="{{selectedPage}}" | 117 <iron-selector id="menu" selected="{{selectedPage}}" |
88 selectable=".page-item" attr-for-selected="view-id" | 118 selectable=".page-item" attr-for-selected="path" |
| 119 fallback-selection="history" |
89 on-iron-activate="onSelectorActivate_"> | 120 on-iron-activate="onSelectorActivate_"> |
90 <paper-item view-id="history" class="page-item"> | 121 <a href="/" class="page-item" path="history"> |
91 $i18n{historyMenuItem} | 122 $i18n{historyMenuItem} |
92 </paper-item> | 123 </a> |
93 <paper-item view-id="synced-devices" class="page-item"> | 124 <a href="/syncedTabs" class="page-item" path="syncedTabs"> |
94 $i18n{openTabsMenuItem} | 125 $i18n{openTabsMenuItem} |
95 </paper-item> | 126 </a> |
96 <div class="separator"></div> | 127 <div class="separator"></div> |
97 <paper-item on-tap="onClearBrowsingDataTap_" id="clear-browsing-data"> | 128 <a href="chrome://settings/clearBrowserData" |
| 129 on-tap="onClearBrowsingDataTap_" id="clear-browsing-data"> |
98 $i18n{clearBrowsingData} | 130 $i18n{clearBrowsingData} |
99 </paper-item> | 131 </a> |
100 <div id="footer" hidden="[[!showFooter]]"> | 132 <div id="footer" hidden="[[!showFooter]]"> |
101 <div class="separator"></div> | 133 <div class="separator"></div> |
102 <div id="footer-text">$i18nRaw{sidebarFooter}</div> | 134 <div id="footer-text">$i18nRaw{sidebarFooter}</div> |
103 </div> | 135 </div> |
104 </iron-selector> | 136 </iron-selector> |
105 </app-drawer> | 137 </app-drawer> |
106 </template> | 138 </template> |
107 <script src="chrome://history/side_bar.js"></script> | 139 <script src="chrome://history/side_bar.js"></script> |
108 </dom-module> | 140 </dom-module> |
OLD | NEW |