Bug 1263698 - Correctly place the em dash separator between title and URL in awesomebar popup in RTL. r=mak

MozReview-Commit-ID: JiD70fqK9EU

browser/base/content/test/general/browser_search_favicon.js

@@ -53,8 +53,7 @@ add_task(function*() {
   let actionHbox = result._actionText.parentNode.parentNode;
   ok(actionHbox.classList.contains("ac-action"), "Action hbox sanity check");
   is_element_hidden(actionHbox, "Action element should be hidden because it is not selected");
-  // \u2014 == em dash
-  is(result._actionText.textContent, "\u2014Search with SearchEngine", "Action text should be as expected");
+  is(result._actionText.textContent, "Search with SearchEngine", "Action text should be as expected");
 
   gBrowser.removeCurrentTab();
 });

browser/base/content/test/general/browser_urlbarDecode.js

@@ -94,6 +94,5 @@ function* checkInput(inputStr) {
                "type");
 
   Assert.equal(item._titleText.textContent, inputStr.replace("\\","/"), "Visible title");
-  // \u2014 == em dash
-  Assert.equal(item._actionText.textContent, "\u2014Visit", "Visible action");
+  Assert.equal(item._actionText.textContent, "Visit", "Visible action");
 }

browser/themes/linux/browser.css

@@ -1141,6 +1141,7 @@ html|span.ac-tag {
   padding: 0 1px;
 }
 
+.ac-separator,
 .ac-url,
 .ac-action {
   font-size: 12px;
@@ -1148,6 +1149,7 @@ html|span.ac-tag {
 }
 
 .ac-title[selected=true],
+.ac-separator[selected],
 .ac-url[selected=true],
 .ac-action[selected=true] {
   color: inherit !important;

browser/themes/osx/browser.css

@@ -1761,8 +1761,17 @@ html|span.ac-emphasize-text-tag {
   color: hsl(0, 0%, 50%);
 }
 
-.ac-url {
+.ac-separator,
+.ac-url,
+.ac-action {
   font-size: 12px;
+}
+
+.ac-separator {
+  color: hsl(0, 0%, 50%);
+}
+
+.ac-url {
   color: hsl(210, 77%, 47%);
 }
 
@@ -1771,22 +1780,16 @@ html|span.ac-emphasize-text-url {
 }
 
 .ac-action {
-  font-size: 12px;
   color: hsl(178, 100%, 28%);
 }
 
-html|span.ac-title-urlaction-separator {
-  color: hsl(0, 0%, 50%);
-}
-
 .ac-title[selected],
+.ac-separator[selected],
 .ac-url[selected],
 .ac-action[selected],
 .ac-title-text[selected] > html|span.ac-emphasize-text,
 .ac-url-text[selected] > html|span.ac-emphasize-text,
-.ac-action-text[selected] > html|span.ac-emphasize-text,
-.ac-url-text[selected] > html|span.ac-title-urlaction-separator,
-.ac-action-text[selected] > html|span.ac-title-urlaction-separator {
+.ac-action-text[selected] > html|span.ac-emphasize-text {
   color: hsl(0, 0%, 100%);
 }
 

browser/themes/windows/browser.css

@@ -1449,8 +1449,17 @@ html|span.ac-emphasize-text-tag {
   color: hsl(0, 0%, 50%);
 }
 
-.ac-url {
+.ac-separator,
+.ac-url,
+.ac-action {
   font-size: 12px;
+}
+
+.ac-separator {
+  color: hsl(0, 0%, 50%);
+}
+
+.ac-url {
   color: hsl(210, 77%, 47%);
 }
 
@@ -1459,22 +1468,16 @@ html|span.ac-emphasize-text-url {
 }
 
 .ac-action {
-  font-size: 12px;
   color: hsl(178, 100%, 28%);
 }
 
-html|span.ac-title-urlaction-separator {
-  color: hsl(0, 0%, 50%);
-}
-
 .ac-title[selected=true],
+.ac-separator[selected],
 .ac-url[selected=true],
 .ac-action[selected=true],
 .ac-title-text[selected=true] > html|span.ac-emphasize-text,
 .ac-url-text[selected=true] > html|span.ac-emphasize-text,
-.ac-action-text[selected=true] > html|span.ac-emphasize-text,
-.ac-url-text[selected=true] > html|span.ac-title-urlaction-separator,
-.ac-action-text[selected=true] > html|span.ac-title-urlaction-separator {
+.ac-action-text[selected=true] > html|span.ac-emphasize-text {
   color: hsl(0, 0%, 100%);
 }
 
@@ -1503,10 +1506,10 @@ html|span.ac-title-urlaction-separator {
     color: -moz-Field;
   }
 
+  .ac-separator,
   .ac-url,
   .ac-action,
-  html|span.ac-emphasize-text-url,
-  html|span.ac-title-urlaction-separator {
+  html|span.ac-emphasize-text-url {
     color: -moz-nativehyperlinktext;
   }
 

toolkit/content/autocomplete.css

@@ -30,6 +30,7 @@ richlistitem {
   display: none;
 }
 
-.ac-action[actiontype=searchengine]:not([selected]) {
+.ac-action[actiontype=searchengine]:not([selected]),
+.ac-separator[actiontype=searchengine]:not([selected]) {
   display: none;
 }

toolkit/content/tests/chrome/test_autocomplete_emphasis.xul

@@ -139,23 +139,10 @@ function checkSearchCompleted() {
   let result = autocomplete.popup.richlistbox.firstChild;
 
   for (let attribute of [result._titleText, result._urlText]) {
-
-    let numChildren = currentTest.emphasis.length;
-    let childNodeStart = 0;
-    if (attribute == result._urlText) {
-      // For the URL description, the first child is the em dash separator that
-      // visually separates the the title string from the URL string.
-      numChildren++;
-      childNodeStart = 1;
-      let node = attribute.childNodes[0];
-      ok(node.classList.contains("ac-title-urlaction-separator"),
-         "First child of URL text should be separator");
-    }
-
-    is(attribute.childNodes.length, numChildren, "The element should have the expected number of children.");
-
+    is(attribute.childNodes.length, currentTest.emphasis.length,
+       "The element should have the expected number of children.");
     for (let i = 0; i < currentTest.emphasis.length; i++) {
-      let node = attribute.childNodes[childNodeStart + i];
+      let node = attribute.childNodes[i];
       // Emphasized parts strictly alternate.
       if ((i % 2 == 0) == currentTest.emphasizeFirst) {
         // Check that this part is correctly emphasized.

toolkit/content/widgets/autocomplete.xml

@@ -1359,6 +1359,12 @@ extends="chrome://global/content/bindings/popup.xml#popup">
                            xbl:inherits="selected"/>
         </xul:description>
       </xul:hbox>
+      <xul:hbox anonid="separator"
+                class="ac-separator"
+                align="center"
+                xbl:inherits="selected,actiontype">
+        <xul:description class="ac-separator-text">—</xul:description>
+      </xul:hbox>
       <xul:hbox class="ac-url"
                 align="center"
                 xbl:inherits="selected,actiontype">
@@ -1397,6 +1403,9 @@ extends="chrome://global/content/bindings/popup.xml#popup">
           this._tagsText = document.getAnonymousElementByAttribute(
             this, "anonid", "tags-text"
           );
+          this._separator = document.getAnonymousElementByAttribute(
+            this, "anonid", "separator"
+          );
           this._urlText = document.getAnonymousElementByAttribute(
             this, "anonid", "url-text"
           );
@@ -1560,17 +1569,6 @@ extends="chrome://global/content/bindings/popup.xml#popup">
           while (aDescriptionElement.hasChildNodes())
             aDescriptionElement.removeChild(aDescriptionElement.firstChild);
 
-          // Add a separator to the front of the URL and action.
-          if (aText &&
-              (aDescriptionElement == this._urlText ||
-               aDescriptionElement == this._actionText)) {
-            let span =
-              document.createElementNS("http://www.w3.org/1999/xhtml", "span");
-            aDescriptionElement.appendChild(span);
-            span.className = "ac-title-urlaction-separator";
-            span.textContent = "—";
-          }
-
           // If aNoEmphasis is specified, don't add any emphasis
           if (aNoEmphasis) {
             aDescriptionElement.appendChild(document.createTextNode(aText));
@@ -2005,9 +2003,11 @@ extends="chrome://global/content/bindings/popup.xml#popup">
           let itemRect = this.parentNode.getBoundingClientRect();
           let titleRect = this._titleText.getBoundingClientRect();
           let tagsRect = this._tagsText.getBoundingClientRect();
+          let separatorRect = this._separator.getBoundingClientRect();
           let urlRect = this._urlText.getBoundingClientRect();
           let actionRect = this._actionText.getBoundingClientRect();
-          let urlActionWidth = Math.max(urlRect.width, actionRect.width);
+          let separatorURLActionWidth =
+            separatorRect.width + Math.max(urlRect.width, actionRect.width);
 
           // Total width for the title and URL/action is the width of the item
           // minus the start of the title text minus a little extra padding.
@@ -2026,13 +2026,13 @@ extends="chrome://global/content/bindings/popup.xml#popup">
           }
 
           let titleTagsWidth = titleRect.width + tagsRect.width;
-          if (titleTagsWidth + urlActionWidth > itemWidth) {
+          if (titleTagsWidth + separatorURLActionWidth > itemWidth) {
             // Title + tags + URL/action overflows the item width.
 
             // The percentage of the item width allocated to the title and tags.
             let titleTagsPct = 0.66;
 
-            let titleTagsAvailable = itemWidth - urlActionWidth;
+            let titleTagsAvailable = itemWidth - separatorURLActionWidth;
             let titleTagsMaxWidth = Math.max(
               titleTagsAvailable,
               itemWidth * titleTagsPct
@@ -2057,11 +2057,11 @@ extends="chrome://global/content/bindings/popup.xml#popup">
               this._titleText.style.maxWidth = titleMaxWidth + "px";
               this._tagsText.style.maxWidth = tagsMaxWidth + "px";
             }
-            let urlActionAvailable = itemWidth - titleTagsWidth;
             let urlActionMaxWidth = Math.max(
-              urlActionAvailable,
+              itemWidth - titleTagsWidth,
               itemWidth * (1 - titleTagsPct)
             );
+            urlActionMaxWidth -= separatorRect.width;
             this._urlText.style.maxWidth = urlActionMaxWidth + "px";
             this._actionText.style.maxWidth = urlActionMaxWidth + "px";
           }

toolkit/themes/linux/global/autocomplete.css

@@ -148,13 +148,14 @@ html|span.ac-tag {
   -moz-margin-end: 4px;
 }
 
-html|span.ac-title-urlaction-separator {
+.ac-separator {
   padding-left: 0;
   padding-right: 6px;
 }
 
 /* Better align the URL/action with the title. */
 .ac-tags,
+.ac-separator,
 .ac-url,
 .ac-action {
   margin-bottom: -2px;
@@ -162,6 +163,7 @@ html|span.ac-title-urlaction-separator {
 
 .ac-title-text,
 .ac-tags-text,
+.ac-separator-text,
 .ac-url-text,
 .ac-action-text,
 .ac-text-overflow-container {

toolkit/themes/osx/global/autocomplete.css

@@ -126,13 +126,14 @@ html|span.ac-tag {
   -moz-margin-end: 4px;
 }
 
-html|span.ac-title-urlaction-separator {
+.ac-separator {
   -moz-margin-start: 0;
   -moz-margin-end: 6px;
 }
 
 /* Better align the URL/action with the title. */
 .ac-tags,
+.ac-separator,
 .ac-url,
 .ac-action {
   margin-bottom: -2px;
@@ -140,6 +141,7 @@ html|span.ac-title-urlaction-separator {
 
 .ac-title-text,
 .ac-tags-text,
+.ac-separator-text,
 .ac-url-text,
 .ac-action-text,
 .ac-text-overflow-container {

toolkit/themes/windows/global/autocomplete.css

@@ -130,13 +130,14 @@ html|span.ac-tag {
   -moz-margin-end: 4px;
 }
 
-html|span.ac-title-urlaction-separator {
+.ac-separator {
   padding-left: 0;
   padding-right: 6px;
 }
 
 /* Better align the URL/action with the title. */
 .ac-tags,
+.ac-separator,
 .ac-url,
 .ac-action {
   margin-bottom: -2px;
@@ -144,6 +145,7 @@ html|span.ac-title-urlaction-separator {
 
 .ac-title-text,
 .ac-tags-text,
+.ac-separator-text,
 .ac-url-text,
 .ac-action-text,
 .ac-text-overflow-container {