From f3ec1a25a11e8248bdc55ec30ee92490f6c4b321 Mon Sep 17 00:00:00 2001
From: Julien Wajsberg <felash@gmail.com>
Date: Wed, 18 Mar 2015 17:37:23 +0100
Subject: [PATCH] Bug 1140613 - [Contacts] The star indicating a favorite
 contact overlaps long contact names in the header of the contact details page
 r=francisco

---
 apps/communications/contacts/elements/details.html  |  1 +
 apps/communications/contacts/js/views/details.js    |  7 ++-----
 apps/communications/contacts/style/contacts.css     | 13 +++++++++----
 .../contacts/test/marionette/details_test.js        |  2 +-
 .../contacts/test/unit/views/details_test.js        |  4 ++--
 5 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/apps/communications/contacts/elements/details.html b/apps/communications/contacts/elements/details.html
index 7b742a189098..308f96f81012 100644
--- a/apps/communications/contacts/elements/details.html
+++ b/apps/communications/contacts/elements/details.html
@@ -2,6 +2,7 @@
   <template>
     <gaia-header id='details-view-header' action="back">
       <h1 id='contact-name-title'><bdi class="ellipsis-dir-fix"></bdi></h1>
+      <div class='favorite-indicator'></div>
       <button id="edit-contact-button" data-icon="edit-contact" data-l10n-id="editButton"></button>
     </gaia-header>
 
diff --git a/apps/communications/contacts/js/views/details.js b/apps/communications/contacts/js/views/details.js
index 00f496f102bb..c6a27978b597 100644
--- a/apps/communications/contacts/js/views/details.js
+++ b/apps/communications/contacts/js/views/details.js
@@ -312,11 +312,8 @@ contacts.Details = (function() {
   var renderFavorite = function cd_renderFavorite(contact) {
     var favorite = isFavorite(contact);
     toggleFavoriteMessage(favorite);
-    if (contact.category && contact.category.indexOf('favorite') != -1) {
-      detailsName.classList.add('favorite');
-    } else {
-      detailsName.classList.remove('favorite');
-    }
+
+    header.classList.toggle('favorite', !!favorite);
   };
 
   var isFavorite = function isFavorite(contact) {
diff --git a/apps/communications/contacts/style/contacts.css b/apps/communications/contacts/style/contacts.css
index 0fa704923db0..ffa64d73a35c 100755
--- a/apps/communications/contacts/style/contacts.css
+++ b/apps/communications/contacts/style/contacts.css
@@ -6,10 +6,15 @@
 }
 
 /* Fav star in header */
-#contact-name-title.favorite {
-  background: url(/contacts/style/gphx/bitmap/default/vw-header/icons/fav-star.png) no-repeat right 1rem / 3rem;
-  padding-right: 3rem;
-  margin-right: -1rem;
+.favorite-indicator {
+  display: none;
+
+  background: url(/contacts/style/gphx/bitmap/default/vw-header/icons/fav-star.png) no-repeat center / 3rem;
+  padding: 0 1rem;
+}
+
+.favorite .favorite-indicator {
+  display: unset;
 }
 
 section[role="region"] > gaia-header .icon.icon-edit-contact {
diff --git a/apps/communications/contacts/test/marionette/details_test.js b/apps/communications/contacts/test/marionette/details_test.js
index 9a2bef0ee999..d828e374c195 100644
--- a/apps/communications/contacts/test/marionette/details_test.js
+++ b/apps/communications/contacts/test/marionette/details_test.js
@@ -110,7 +110,7 @@ marionette('Contacts > Details', function() {
 
     // Click on favorite
     client.helper.waitForElement(selectors.detailsFavoriteButton).click();
-    nameNode = client.helper.waitForElement(selectors.detailsContactName);
+    nameNode = client.helper.waitForElement(selectors.detailsHeader);
     client.waitFor(function() {
       return nameNode.getAttribute('class').indexOf('favorite') != -1;
     });
diff --git a/apps/communications/contacts/test/unit/views/details_test.js b/apps/communications/contacts/test/unit/views/details_test.js
index 0233c9673bca..c5db5fcab5ea 100644
--- a/apps/communications/contacts/test/unit/views/details_test.js
+++ b/apps/communications/contacts/test/unit/views/details_test.js
@@ -250,14 +250,14 @@ suite('Render contact', function() {
   suite('Render favorite', function() {
     test('with favorite contact', function() {
       subject.render(null, TAG_OPTIONS);
-      assert.isTrue(detailsName.classList.contains('favorite'));
+      assert.isTrue(header.classList.contains('favorite'));
     });
     test('without favorite contact', function() {
       var contactWoFav = new MockContactAllFields(true);
       contactWoFav.category = [];
       subject.setContact(contactWoFav);
       subject.render(null, TAG_OPTIONS);
-      assert.isFalse(detailsName.classList.contains('favorite'));
+      assert.isFalse(header.classList.contains('favorite'));
     });
     test('change in favorite not render the window', function(done) {
       var contactWoPhoto = new MockContactAllFields();