| 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 |