From 880eb7ee5407bc96d04f7ad3b24df05298db211a Mon Sep 17 00:00:00 2001
From: "arv@chromium.org"
 <arv@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>
Date: Fri, 15 May 2009 00:30:58 +0000
Subject: Fix issue where the star in the history page could be hidden by long
 entry titles or by making the window narrow enough to truncate the text.

BUG=9712

TEST=Bookmark a page and go to the history page. Resize the window so
that it is narrow enough to truncate the entry title of the page you
just bookmarked. You still be able to see the star icon.

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

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@16132 0039d316-1c4b-4281-b951-d872f2087c98
---
 chrome/browser/resources/history.html | 53 +++++++++++++++++++++++++++++++++--
 1 file changed, 50 insertions(+), 3 deletions(-)

(limited to 'chrome')

diff --git a/chrome/browser/resources/history.html b/chrome/browser/resources/history.html
index 81c72e5..e3cee3c 100644
--- a/chrome/browser/resources/history.html
+++ b/chrome/browser/resources/history.html
@@ -134,6 +134,7 @@ Page.prototype.getTitleDOM_ = function() {
   node.appendChild(link);
 
   if (this.starred_) {
+    node.className += ' starred';
     node.appendChild(createElementWithClassName('div', 'starred'));
   }
 
@@ -406,6 +407,11 @@ function HistoryView(model) {
   this.lastDisplayed_ = [];
 
   this.model_.setView(this);
+
+  var self = this;
+  window.onresize = function() {
+    self.updateEntryAnchorWidth_();
+  };
 }
 
 // HistoryView, public: -------------------------------------------------------
@@ -513,6 +519,7 @@ HistoryView.prototype.displayResults_ = function() {
 
   this.displaySummaryBar_();
   this.displayNavBar_();
+  this.updateEntryAnchorWidth_();
 }
 
 /**
@@ -561,6 +568,37 @@ HistoryView.prototype.createPageNavHTML_ = function(page, name) {
             '>' + name + '</a>';
 }
 
+/**
+ * Updates the CSS rule for the entry anchor.
+ * @private
+ */
+HistoryView.prototype.updateEntryAnchorWidth_ = function() {
+  // We need to have at least on .title div to be able to calculate the
+  // desired width of the anchor.
+  var titleElement = document.querySelector('.entry .title');
+  if (!titleElement)
+    return;
+
+  // Create new CSS rules and add them last to the last stylesheet.
+  if (!this.entryAnchorRule_) {
+    var styleSheets = document.styleSheets;
+    var styleSheet = styleSheets[styleSheets.length - 1];
+    var rules = styleSheet.cssRules;
+    var createRule = function(selector) {
+      styleSheet.insertRule(selector + '{}', rules.length);
+      return rules[rules.length - 1];
+    };
+    this.entryAnchorRule_ = createRule('.entry .title > a');
+    // The following rule needs to be more specific to have higher priority.
+    this.entryAnchorStarredRule_ = createRule('.entry .title.starred > a');
+  }
+
+  var anchorMaxWith = titleElement.offsetWidth;
+  this.entryAnchorRule_.style.maxWidth = anchorMaxWith + 'px';
+  // Adjust by the width of star plus its margin.
+  this.entryAnchorStarredRule_.style.maxWidth = anchorMaxWith - 23 + 'px';
+};
+
 ///////////////////////////////////////////////////////////////////////////////
 // State object:
 /**
@@ -825,21 +863,30 @@ html[dir='rtl'] .time {
 .results .time, .results .title {
   margin-top:18px;
 }
-.starred {
+.title > .starred {
   background:url('../../app/theme/star_small.png');
   background-repeat:no-repeat;
   display:inline-block;
   margin-left:12px;
+  margin-right:0;
   width:11px;
   height:11px;
 }
-.entry .title a {
+html[dir='rtl'] .title > .starred {
+  margin-left:0;
+  margin-right:12px;
+}
+.entry .title > a {
+  -webkit-box-sizing: border-box;
   background-repeat:no-repeat;
   background-size:16px;
   background-position:0px 1px;
   padding:1px 0px 4px 22px;
+  display:inline-block;
+  overflow:hidden;
+  text-overflow:ellipsis;
 }
-html[dir='rtl'] .entry .title a {
+html[dir='rtl'] .entry .title > a {
   background-position-x:right;
   padding-left:0px;
   padding-right:22px;
-- 
cgit v1.1