Merge pull request #6917 from crdlc/bug-805977

Bug 805977 - Long app names should be dealt with in a better way [r=ving...
mozilla-b2g · Jan 8, 2013 · 1b1d055 · 1b1d055
2 parents 3a21ed0 + 792df26
commit 1b1d055
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 0 deletions.
diff --git a/apps/homescreen/index.html b/apps/homescreen/index.html
@@ -45,6 +45,13 @@
   <body data-mode="normal">
     <div id="search-overlay"></div>
     <div id="landing-overlay"></div>
+    <!-- This markup is just to detect text overflow with app names
+         because of pages are hidden after rendering -->
+    <div id="fake-icon">
+      <span id="fake-icon-name-wrapper" class="labelWrapper">
+        <span id="fake-icon-name"></span>
+      </span>
+    </div>
 
     <section id="confirm-dialog">
       <form role="dialog" data-type="confirm">

diff --git a/apps/homescreen/js/page.js b/apps/homescreen/js/page.js
@@ -106,6 +106,7 @@ Icon.prototype = {
     var label = this.label = document.createElement('span');
     label.textContent = localizedName;
     wrapper.appendChild(label);
+    this.applyOverflowTextMask();
 
     icon.appendChild(wrapper);
 
@@ -129,6 +130,15 @@ Icon.prototype = {
     }
   },
 
+  applyOverflowTextMask: function icon_applyOverflowTextMask() {
+    var label = this.label;
+    if (TextOverflowDetective.check(label.textContent)) {
+      label.parentNode.classList.add('mask');
+    } else {
+      label.parentNode.classList.remove('mask');
+    }
+  },
+
   fetchImageData: function icon_fetchImageData() {
     var descriptor = this.descriptor;
     var icon = descriptor.icon;
@@ -369,6 +379,8 @@ Icon.prototype = {
       descriptor.localizedName = localizedName;
       GridManager.markDirtyState();
     }
+
+    this.applyOverflowTextMask();
   },
 
   /*
@@ -800,3 +812,16 @@ dockProto.getChildren = function dk_getChildren() {
 };
 
 HTMLCollection.prototype.indexOf = Array.prototype.indexOf;
+
+const TextOverflowDetective = (function() {
+  var iconFakeWrapperWidht = document.querySelector('#fake-icon-name-wrapper').
+                                                                    offsetWidth;
+  var iconFakeLabel = document.querySelector('#fake-icon-name');
+
+  return {
+    check: function od_check(text) {
+      iconFakeLabel.textContent = text;
+      return iconFakeLabel.offsetWidth >= iconFakeWrapperWidht;
+    }
+  }
+})();
diff --git a/apps/homescreen/style/app_name_mask.svg b/apps/homescreen/style/app_name_mask.svg
diff --git a/apps/homescreen/style/grid.css b/apps/homescreen/style/grid.css
@@ -75,12 +75,30 @@
   word-wrap: break-word;
 }
 
+.apps ol > li > div > span.mask {
+	mask: url('app_name_mask.svg#fade_right_mask');
+	text-overflow: '';
+}
+
 /* text label */
 .apps ol > li > div > span > span {
   font-size: -moz-calc(5.75 * 0.226rem); /* was 5pt */
   text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
 }
 
+/* These classes detect text overflow from JS code */
+#fake-icon {
+  width: 8rem; /* Like li items */
+  position: fixed;
+  top: 200%; /* Outside viewport */
+  display: block;
+}
+
+#fake-icon-name {
+  font-size: -moz-calc(5.75 * 0.226rem);
+  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
+}
+
 .labelWrapper {
   color: #fff; /* App label color */
   white-space: nowrap; /* NO new lines */