Bug 896757 - Defect - Remove > from narrow version of grid title strings r=mbrubeck
authorRodrigo Silveira <rsilveira@mozilla.com>
Mon, 29 Jul 2013 18:11:16 -0700
changeset 152957 78c21048912ddac37f3666d1ad2e932e18e09911
parent 152956 3da9c3dc6758734cc71e815ae2a1a0964dbc2712
child 152958 018ef921c94581b572db7a8644674c1cc9421853
push id2859
push userakeybl@mozilla.com
push dateMon, 16 Sep 2013 19:14:59 +0000
treeherdermozilla-beta@87d3c51cd2bf [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmbrubeck
bugs896757
milestone25.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 896757 - Defect - Remove > from narrow version of grid title strings r=mbrubeck
browser/metro/base/content/browser-ui.js
browser/metro/base/content/browser.xul
browser/metro/locales/en-US/chrome/browser.dtd
browser/metro/theme/browser.css
browser/metro/theme/platform.css
--- a/browser/metro/base/content/browser-ui.js
+++ b/browser/metro/base/content/browser-ui.js
@@ -1180,26 +1180,26 @@ var StartUI = {
       // of the keyboard transition.
       ContentAreaObserver.navBarWillBlur();
     }
 
     if (aEvent.button == 0)
       ContextUI.dismissTabs();
   },
 
-  onNarrowTitleClick: function onNarrowTitleClick(gridId) {
-    let grid = document.getElementById(gridId);
+  onNarrowTitleClick: function onNarrowTitleClick(sectionId) {
+    let section = document.getElementById(sectionId);
 
-    if (grid.hasAttribute("expanded"))
+    if (section.hasAttribute("expanded"))
       return;
 
-    for (let expandedGrid of Elements.startUI.querySelectorAll("[expanded]"))
-      expandedGrid.removeAttribute("expanded")
+    for (let expandedSection of Elements.startUI.querySelectorAll(".meta-section[expanded]"))
+      expandedSection.removeAttribute("expanded")
 
-    grid.setAttribute("expanded", "true");
+    section.setAttribute("expanded", "true");
   },
 
   handleEvent: function handleEvent(aEvent) {
     switch (aEvent.type) {
       case "contextmenu":
         let event = document.createEvent("Events");
         event.initEvent("MozEdgeUICompleted", true, false);
         window.dispatchEvent(event);
--- a/browser/metro/base/content/browser.xul
+++ b/browser/metro/base/content/browser.xul
@@ -192,41 +192,45 @@
           </vbox>
         </hbox>
 
         <!-- Start UI -->
         <hbox id="start-container" flex="1" observes="bcast_windowState" class="meta content-height content-width">
           <!-- portrait/landscape/filled view -->
 
           <scrollbox id="start-scrollbox" observes="bcast_preciseInput" flex="1">
-            <vbox id="start-topsites" class="meta-section">
+            <vbox id="start-topsites" class="meta-section" expanded="true">
               <label class="meta-section-title wide-title" value="&topSitesHeader.label;"/>
-              <label class="meta-section-title narrow-title" value="&snappedTopSitesHeader.label;"
-                onclick="StartUI.onNarrowTitleClick('start-topsites-grid')"/>
-              <richgrid id="start-topsites-grid" set-name="topSites" rows="3" columns="3" tiletype="thumbnail" seltype="multiple" flex="1" expanded="true"/>
+              <html:div class="meta-section-title narrow-title" onclick="StartUI.onNarrowTitleClick('start-topsites')">
+                &narrowTopSitesHeader.label;
+              </html:div>
+              <richgrid id="start-topsites-grid" set-name="topSites" rows="3" columns="3" tiletype="thumbnail" seltype="multiple" flex="1"/>
             </vbox>
 
             <vbox id="start-bookmarks" class="meta-section">
               <label class="meta-section-title wide-title" value="&bookmarksHeader.label;"/>
-              <label class="meta-section-title narrow-title" value="&snappedBookmarksHeader.label;"
-                onclick="StartUI.onNarrowTitleClick('start-bookmarks-grid')"/>
+              <html:div class="meta-section-title narrow-title" onclick="StartUI.onNarrowTitleClick('start-bookmarks')">
+                &narrowBookmarksHeader.label;
+              </html:div>
               <richgrid id="start-bookmarks-grid" set-name="bookmarks" seltype="multiple" flex="1"/>
             </vbox>
 
             <vbox id="start-history" class="meta-section">
               <label class="meta-section-title wide-title" value="&recentHistoryHeader.label;"/>
-              <label class="meta-section-title narrow-title" value="&snappedRecentHistoryHeader.label;"
-                onclick="StartUI.onNarrowTitleClick('start-history-grid')"/>
+              <html:div class="meta-section-title narrow-title" onclick="StartUI.onNarrowTitleClick('start-history')">
+                &narrowRecentHistoryHeader.label;
+              </html:div>
               <richgrid id="start-history-grid" set-name="recentHistory" seltype="multiple" flex="1"/>
             </vbox>
 
             <vbox id="start-remotetabs" class="meta-section">
               <label class="meta-section-title wide-title" value="&remoteTabsHeader.label;"/>
-              <label id="snappedRemoteTabsLabel" class="meta-section-title narrow-title" value="&snappedRemoteTabsHeader.label;"
-                onclick="StartUI.onNarrowTitleClick('start-remotetabs-grid')"/>
+              <html:div id="snappedRemoteTabsLabel" class="meta-section-title narrow-title" onclick="StartUI.onNarrowTitleClick('start-remotetabs')">
+                &narrowRemoteTabsHeader.label;
+              </html:div>
               <richgrid id="start-remotetabs-grid" set-name="remoteTabs" seltype="multiple" flex="1"/>
             </vbox>
 
             <!-- Spacer to take extra space in snapped mode. -->
             <spacer flex="999"/>
           </scrollbox>
 
         </hbox>
--- a/browser/metro/locales/en-US/chrome/browser.dtd
+++ b/browser/metro/locales/en-US/chrome/browser.dtd
@@ -20,27 +20,27 @@
 <!ENTITY appbarFindInPage2.label    "Find in page">
 <!ENTITY appbarViewOnDesktop2.label "View on desktop">
 
 <!ENTITY topSitesHeader.label        "Top Sites">
 <!ENTITY bookmarksHeader.label       "Bookmarks">
 <!ENTITY recentHistoryHeader.label   "Recent History">
 <!ENTITY remoteTabsHeader.label      "Tabs from Other Devices">
 
-<!-- LOCALIZATION NOTE (snappedRemoteTabsHeader.label): shortened version of startRemoteTabsHeader.label.
-     Needs to be two words or shorter to fit in narrow vertical space.-->
-<!-- LOCALIZATION NOTE (snappedRemoteTabsHeader.label,
-                        snappedBookmarksHeader.label,
-                        snappedHistoryHeader.label,
-                        snappedTopSitesHeader.label )
-      The '>' character is not part of the name, but is an indicator of more content. Please do not localize the '>' -->
-<!ENTITY snappedRemoteTabsHeader.label    "Remote Tabs >">
-<!ENTITY snappedBookmarksHeader.label     "Bookmarks >">
-<!ENTITY snappedRecentHistoryHeader.label "Recent History >">
-<!ENTITY snappedTopSitesHeader.label      "Top Sites >">
+<!-- LOCALIZATION NOTE (narrowTopSitesHeader.label,
+                        narrowBookmarksHeader.label,
+                        narrowHistoryHeader.label,
+                        narrowRemoteTabsHeader.label )
+     are shortened versions of topSitesHeader.label, bookmarksHeader.label, recentHistoryHeader.label
+     and remoteTabsHeader.label. Need to be two words or shorter to fit in narrow vertical space.
+      -->
+<!ENTITY narrowTopSitesHeader.label      "Top Sites">
+<!ENTITY narrowBookmarksHeader.label     "Bookmarks">
+<!ENTITY narrowRecentHistoryHeader.label "Recent History">
+<!ENTITY narrowRemoteTabsHeader.label    "Remote Tabs">
 
 <!ENTITY downloadsHeader.label     "Downloads">
 <!ENTITY downloadShowPage.label    "Go to Page">
 <!ENTITY downloadShow2.label       "Find">
 <!ENTITY downloadOpen2.label       "Open">
 <!ENTITY downloadCancel.label      "Cancel">
 <!ENTITY downloadPause.label       "Pause">
 <!ENTITY downloadResume.label      "Resume">
--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -244,17 +244,17 @@ documenttab[selected] .documenttab-selec
   min-width: @grid_double_column_width@;
   -moz-box-flex: 1;
   -moz-box-align: center;
 }
 #start-container[viewstate="snapped"] richgrid {
   visibility: collapse;
 }
 
-#start-container[viewstate="snapped"] richgrid[expanded] {
+#start-container[viewstate="snapped"] .meta-section[expanded] > richgrid {
   visibility: visible;
 }
 
 /* Browser Content Areas ==================================================== */
 
 /* Hide the browser while the start UI is visible */
 #content-viewport[startpage],
 #content-viewport[filtering] {
--- a/browser/metro/theme/platform.css
+++ b/browser/metro/theme/platform.css
@@ -648,28 +648,41 @@ arrowbox {
   background-image: url("chrome://browser/skin/images/firefox-watermark.png");
   background-repeat: no-repeat;
   background-position: center center;
   padding: @metro_spacing_normal@ @metro_spacing_xxnormal@;
   overflow: auto;
   max-width: 100%;
   width: 100%;
 }
+
 .meta-section {
   margin: 0 @metro_spacing_large@;
 }
+
 .meta-section-title {
   font-size: @metro_font_large@;
   font-weight: 100;
   display: none;
+  cursor: default;
 }
+
 #start-container[viewstate="snapped"] .meta-section-title.narrow-title,
 #start-container:not([viewstate="snapped"]) .meta-section-title.wide-title {
   display: block;
 }
+
+.meta-section:not([expanded]) > .meta-section-title.narrow-title:-moz-locale-dir(ltr):after {
+  content: ">";
+}
+
+.meta-section:not([expanded]) > .meta-section-title.narrow-title:-moz-locale-dir(rtl):before {
+  content: "<";
+}
+
 /* App bars ----------------------------------------------------------------- */
 appbar {
   display: block;
   position: fixed;
   bottom: 0;
   width: 100%;
   transform: translateY(100%);
   transition: transform @metro_animation_duration@ @metro_animation_easing@;