OLD | NEW |
1 <!doctype html> | 1 <!doctype html> |
2 <html dir="$i18n{textdirection}" lang="$i18n{language}"> | 2 <html dir="$i18n{textdirection}" lang="$i18n{language}"> |
3 <head> | 3 <head> |
4 <meta charset="utf8"> | 4 <meta charset="utf8"> |
5 <title>$i18n{title}</title> | 5 <title>$i18n{title}</title> |
6 | 6 |
7 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> | 7 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> |
8 <link rel="stylesheet" href="chrome://resources/css/md_colors.css"> | 8 <link rel="stylesheet" href="chrome://resources/css/md_colors.css"> |
9 | 9 |
10 <style> | 10 <style> |
11 html, | 11 html, |
12 body { | 12 body { |
13 height: 100%; | 13 height: 100%; |
14 margin: 0; | 14 margin: 0; |
15 } | 15 } |
16 | 16 |
17 body { | 17 body { |
18 background: var(--md-background-color); | 18 background: var(--md-background-color); |
19 display: flex; | 19 display: flex; |
20 flex-direction: column; | 20 flex-direction: column; |
21 min-width: 800px; | |
22 } | |
23 | |
24 #toolbar { | |
25 flex: 0 0 56px; | |
26 } | |
27 | |
28 #history-list, | |
29 #history-synced-device-manager { | |
30 flex: 1 0 0; | |
31 } | |
32 | |
33 #main-container { | |
34 display: flex; | |
35 flex: 1 0 0; | |
36 overflow: hidden; | |
37 } | 21 } |
38 | 22 |
39 /* Minimal styling required to display app shim. */ | 23 /* Minimal styling required to display app shim. */ |
40 .loading #main-container, | 24 .loading history-app, |
41 .loading history-toolbar, | |
42 .app-shim { | 25 .app-shim { |
43 display: none; | 26 display: none; |
44 } | 27 } |
45 | 28 |
| 29 history-app { |
| 30 flex: 1; |
| 31 } |
| 32 |
46 .loading .app-shim { | 33 .loading .app-shim { |
47 display: flex; | 34 display: flex; |
48 font-size: 123%; | 35 font-size: 123%; |
49 } | 36 } |
50 | 37 |
51 .loading #loading-toolbar { | 38 .loading #loading-toolbar { |
52 -webkit-padding-start: 24px; | 39 -webkit-padding-start: 24px; |
53 align-items: center; | 40 align-items: center; |
54 color: #fff; | 41 color: #fff; |
55 flex-direction: row; | 42 flex-direction: row; |
56 font-weight: 400; | 43 font-weight: 400; |
57 height: 56px; | 44 height: 56px; |
58 } | 45 } |
59 | 46 |
60 history-toolbar, | |
61 .loading #loading-toolbar { | 47 .loading #loading-toolbar { |
62 background: var(--md-toolbar-color); | 48 background: var(--md-toolbar-color); |
63 } | 49 } |
64 | 50 |
65 .loading #loading-message { | 51 .loading #loading-message { |
66 align-items: center; | 52 align-items: center; |
67 color: #b4b4b4; | 53 color: #b4b4b4; |
68 flex: 1; | 54 flex: 1; |
69 font-weight: 500; | 55 font-weight: 500; |
70 justify-content: center; | 56 justify-content: center; |
71 } | 57 } |
72 </style> | 58 </style> |
73 </head> | 59 </head> |
74 | 60 |
75 <body class="loading"> | 61 <body class="loading"> |
76 <history-toolbar class="paper-header" id="toolbar"></history-toolbar> | 62 <history-app id="history-app"></history-app> |
77 | |
78 <div id="main-container"> | |
79 <history-side-bar id="history-side-bar"></history-side-bar> | |
80 <history-list id="history-list"></history-list> | |
81 <history-synced-device-manager id="history-synced-device-manager" hidden> | |
82 </history-synced-device-manager> | |
83 </div> | |
84 | |
85 <span class="app-shim" id="loading-toolbar">$i18n{title}</span> | 63 <span class="app-shim" id="loading-toolbar">$i18n{title}</span> |
86 <span class="app-shim" id="loading-message">$i18n{loading}</span> | 64 <span class="app-shim" id="loading-message">$i18n{loading}</span> |
87 | 65 |
88 <link rel="import" href="chrome://resources/html/cr.html"> | 66 <link rel="import" href="chrome://resources/html/cr.html"> |
89 <link rel="import" href="chrome://resources/html/util.html"> | 67 <link rel="import" href="chrome://resources/html/util.html"> |
90 <link rel="import" href="chrome://resources/html/load_time_data.html"> | 68 <link rel="import" href="chrome://resources/html/load_time_data.html"> |
91 <link rel="import" href="chrome://history/constants.html"> | 69 <link rel="import" href="chrome://history/constants.html"> |
92 <script src="strings.js"></script> | 70 <script src="strings.js"></script> |
93 <script src="history.js"></script> | 71 <script src="history.js"></script> |
94 | 72 |
95 <link rel="import" href="chrome://history/elements.html" async id="bundle"> | 73 <link rel="import" href="chrome://history/app.html" async id="bundle"> |
96 </body> | 74 </body> |
97 | 75 |
98 </html> | 76 </html> |
OLD | NEW |