<!DOCTYPE HTML>
<html i18n-values="dir:textdirection;">
<head>
<meta charset="utf-8">
<include src="content_security_policy.html"/>
<title i18n-content="title"></title>
<link rel="icon" href="../../app/theme/history_favicon.png">

<link rel="stylesheet" href="chrome://resources/css/menu.css">

<script src="chrome://resources/js/event_tracker.js"></script>
<script src="chrome://resources/js/cr.js"></script>
<script src="chrome://resources/js/cr/ui.js"></script>
<script src="chrome://resources/js/cr/ui/command.js"></script>
<script src="chrome://resources/js/cr/ui/menu_item.js"></script>
<script src="chrome://resources/js/cr/ui/menu.js"></script>
<script src="chrome://resources/js/cr/ui/position_util.js"></script>
<script src="chrome://resources/js/cr/ui/menu_button.js"></script>

<script src="chrome://resources/js/local_strings.js"></script>

<script src="chrome://history2/history2.js"></script>
<script src="chrome://history2/strings.js"></script>

<link rel="stylesheet" href="webui2.css">

<style>
#results-separator {
  margin-top:12px;
  border-top:1px solid #9cc2ef;
  background-color:#ebeff9;
  font-weight:bold;
  padding:3px;
  margin-bottom:-8px;
}
#results-separator table {
  width: 100%;
}
#results-summary {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 50%;
}
#edit-button {
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 50%;
}
#editing-controls button {
  margin-top: 18px;
  margin-bottom: -8px;
}
#results-display {
  max-width: 740px;
  margin: 16px 4px 0 4px;
}
.day {
  color: #6a6a6a;
  font-weight: bold;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  font-size: 13px;
}
.edit-button {
  display: inline;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: blue; /* -webkit-link makes it purple :'( */
  cursor: pointer;
  text-decoration: underline;
  padding:0px 9px;
  display:inline-block;
  font:inherit;
}
.gap,
.entry,
.no-entries {
  margin: 0;
  padding: 0;
  list-style: none;
}
.gap {
  width: 15px;
  -webkit-border-end: 1px solid #ddd;
  height: 14px;
}
.entry {
  overflow: auto; /* Make sure it's at least as large as its children. */
}
.entry-box {
  line-height: 1.6em;

  display: -webkit-box;
  -webkit-box-orient: horizontal;
  max-width: 100%; /* Don't allow it to be bigger than its parent... */
  float: left;     /* ..but make the box shrink to fit its content. */
  overflow: hidden;
}
html[dir=rtl] .entry-box {
  float: right; /* To make the box shrink to fit its content. */
}
.search-results, .day-results {
  margin: 0 0 24px 0;
  padding: 0;
}
.snippet {
  font-size: 12px;
  line-height: 1.6em;
  margin-bottom: 12px;
  -webkit-margin-start: 90px; /* Align it with .domain. */
  clear: both;
}
.entry .domain {
  color: #282;
  -webkit-padding-start: 20px;
  -webkit-padding-end: 8px;
  background-repeat: no-repeat;
  background-position-y: center;
}
.drop-down {
  background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center;
  border: 1px solid hsl(214, 91%, 85%);
  border-radius: 2px;
  width: 13px;
  height: 13px;
  -webkit-margin-start: 8px;
  position: relative;
  top: 2px;
}
.drop-down:hover {
  border-color: #6A86DE;
  background-image: -webkit-canvas(drop-down-arrow-hover);
}
.drop-down[menu-shown], .drop-down:focus {
  border-color: #6A86DE;
  background-color: #6A86DE;
  background-image: -webkit-canvas(drop-down-arrow-active);
}
html[dir='rtl'] .entry .domain {
  background-position-x: right;
}
.entry .time {
  color:#9a9a9a;
  width: 90px;
}
.entry .title {
  -webkit-box-flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.entry .title > .starred {
  background:url('shared/images/star_small.png');
  background-repeat:no-repeat;
  display:inline-block;
  -webkit-margin-start: 4px;
  width:11px;
  height: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;
}
</style>
</head>
<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
<div class="header">
  <a id="history-section" href="">
    <img src="shared/images/history_section.png"
         width="67" height="67" class="logo" border="0"></a>
  <form id="search-form" method="post" action="" class="form">
    <input type="text" name="term" id="term">
    <input type="submit" name="submit" i18n-values="value:searchbutton">
  </form>
</div>
<div class="main">
  <div id="results-separator">
    <table border="0" cellPadding="0" cellSpacing="0">
      <tr><td id="results-summary"></td><td id="edit-button"><p></p></td></tr>
    </table>
  </div>
  <div id="editing-controls"></div>
  <div id="results-display"></div>
  <div id="results-pagination"></div>
</div>
<div class="footer">
</div>

<menu id="action-menu">
  <button id="more-from-site" i18n-content="moreFromSite"></button>
  <button id="remove-page" i18n-content="removeFromHistory"></button>
</menu>

<script src="chrome://resources/js/i18n_template.js"></script>
<script src="chrome://resources/js/i18n_process.js"></script>
</body>
</html>