History: Reduce visual importance of the domain in entries.

Make the domain gray, and move it to the right of the title so that
all titles are left aligned. Also get rid of the fade-in when entries
are hovered, because it makes the page feel laggy.

BUG=105425
TEST=Manual test of functionality on chrome://history.


Review URL: http://codereview.chromium.org/8658006

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@112679 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 1 insertions, 216 deletions

diff --git a/chrome/browser/resources/history.html b/chrome/browser/resources/history.html
index b156868..e3ceaad 100644
--- a/chrome/browser/resources/history.html
+++ b/chrome/browser/resources/history.html
@@ -24,222 +24,7 @@
 <script src="chrome://history/strings.js"></script>
 
 <link rel="stylesheet" href="old_webui.css">
-
-<style>
-#results-separator {
-  border-top: 1px solid #9cc2ef;
-  background-color: #ebeff9;
-  font-weight: bold;
-  padding: 3px;
-  margin-bottom: -8px;
-  margin-top: 12px;
-}
-
-#results-separator table {
-  width: 100%;
-}
-
-#results-summary {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 50%;
-}
-
-#editing-controls button {
-  margin: 18px 0 -8px 0;
-}
-
-#results-display {
-  margin: 16px 0 0 0;
-  max-width: 740px;
-}
-
-.day {
-  color: #6a6a6a;
-  font-size: 13px;
-  font-weight: bold;
-  margin: 0 0 4px 0;
-  text-transform: uppercase;
-}
-
-.edit-button {
-  -webkit-appearance: none;
-  background: none;
-  border: 0;
-  color: blue; /* -webkit-link makes it purple :'( */
-  cursor: pointer;
-  display: inline-block;
-  font: inherit;
-  text-decoration: underline;
-  padding: 0px 9px;
-}
-
-.gap,
-.entry,
-.no-entries {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.gap {
-  -webkit-border-end: 1px solid #ddd;
-  height: 14px;
-  width: 35px;
-}
-
-.entry {
-  overflow: auto; /* Make sure it's at least as large as its children. */
-}
-
-.entry-box {
-  -webkit-box-orient: horizontal;
-  cursor: default;
-  display: -webkit-box;
-  float: left;
-  line-height: 1.6em;
-/* Don't allow it to be bigger than its parent but make the box shrink to fit
- * its content. */
-  max-width: 100%;
-  overflow: hidden;
-}
-
-html[dir=rtl] .entry-box {
-  float: right; /* To make the box shrink to fit its content. */
-}
-
-.entry-box > label > * {
-  display: inline-block;
-  white-space: nowrap;
-}
-
-.search-results, .day-results {
-  margin: 0 0 24px 0;
-  padding: 0;
-}
-
-.snippet {
-  -webkit-margin-start: 90px; /* Align it with .domain. */
-  clear: both;
-  font-size: 12px;
-  line-height: 1.6em;
-  margin-bottom: 12px;
-}
-
-.entry .domain {
-  -webkit-padding-end: 8px;
-  -webkit-padding-start: 20px;
-  background-position-y: center;
-  background-repeat: no-repeat;
-  color: #282;
-}
-
-.drop-down {
-  -webkit-margin-end: 4px;
-  -webkit-margin-start: 8px;
-  background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center;
-  border: 1px solid hsl(214, 91%, 85%);
-  border-radius: 2px;
-  height: 13px;
-  position: relative;
-  top: 2px;
-  width: 13px;
-}
-
-.drop-down:hover {
-  background-image: -webkit-canvas(drop-down-arrow-hover);
-  border-color: #6A86DE;
-}
-
-.drop-down[menu-shown], .drop-down:focus {
-  background-color: #6A86DE;
-  background-image: -webkit-canvas(drop-down-arrow-active);
-  border-color: #6A86DE;
-}
-
-html[dir='rtl'] .entry .domain {
-  background-position-x: right;
-}
-
-.entry .time {
-  color:#9a9a9a;
-  width: 90px;
-}
-
-.entry input[type=checkbox] {
-  -webkit-margin-end: 6px;
-  -webkit-margin-start: 4px;
-  height: 13px;
-  line-height: 12px;
-  text-indent: -1px;
-  top: 2px;
-  width: 14px;
-}
-
-/* Checkboxes are shown when checked or focused, or when the entry is hovered.
-   Fade in on focus, but not on hover, because it makes the UI feel laggy. */
-.entry input[type=checkbox]:not(:checked) {
-  -webkit-transition: opacity 150ms;
-  opacity: 0;
-}
-
-.entry-box:hover input[type=checkbox],
-.entry-box input[type=checkbox]:focus {
-  opacity: 1;
-}
-
-.entry-box input[type=checkbox]:focus {
-  -webkit-transition: opacity 150ms;
-}
-
-.entry-box {
-  -webkit-transition: background-color 150ms;
-  background-color: none;
-}
-
-.entry-box:hover, .entry-box.contains-focus {
-  background-color: #e4ecf7;
-  border-radius: 2px;
-}
-.entry .title {
-  -webkit-box-flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.entry .title > .starred {
-  -webkit-margin-start: 4px;
-  background: url('shared/images/star_small.png');
-  background-repeat: no-repeat;
-  display: inline-block;
-  height: 11px;
-  width: 11px;
-}
-
-.entry .title > a {
-  color: #11c;
-  text-decoration: none;
-}
-
-.entry .title > a.to-be-removed {
-  text-decoration: line-through;
-}
-
-.entry .title > a:hover {
-  text-decoration: underline;
-}
-
-/* Since all history links are visited, we can make them blue. */
-.entry .title > a:visted {
-  color: #11c;
-}
-
-.fade-out {
-  -webkit-transition: opacity 200ms;
-  opacity: 0;
-}
-</style>
+<link rel="stylesheet" href="history.css">
 </head>
 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
 <div class="header">