Bug 602895: When the window gets too small for the deck we need to show a horizontal scrollbar. r=Unfocused, a=blocks-final
authorDave Townsend <dtownsend@oxymoronical.com>
Tue, 16 Nov 2010 11:30:26 -0800
changeset 57595 3d846420a9077b61d28dd3cb4960da8aa8cdc957
parent 57594 da98fe199be07789f077b6902014a95c93198195
child 57596 1b815a3b4250c99f643befc06d74a83b1a9f8a36
push id16998
push userdtownsend@mozilla.com
push dateTue, 16 Nov 2010 19:31:08 +0000
treeherdermozilla-central@3d846420a907 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersUnfocused, blocks-final
bugs602895
milestone2.0b8pre
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 602895: When the window gets too small for the deck we need to show a horizontal scrollbar. r=Unfocused, a=blocks-final
toolkit/mozapps/extensions/content/extensions.xul
toolkit/mozapps/extensions/test/browser/browser_globalwarnings.js
toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
toolkit/themes/pinstripe/mozapps/extensions/extensions.css
toolkit/themes/winstripe/mozapps/extensions/extensions.css
--- a/toolkit/mozapps/extensions/content/extensions.xul
+++ b/toolkit/mozapps/extensions/content/extensions.xul
@@ -259,30 +259,38 @@
               <radio id="search-filter-remote" class="search-filter-radio"
                      label="&search.filter2.available.label;" value="remote"
                      tooltiptext="&search.filter2.available.tooltip;"/>
             </radiogroup>
           </hbox>
           <hbox class="view-header global-warning-container" align="center">
             <!-- global warnings -->
             <hbox class="global-warning" flex="1">
-              <image class="warning-icon"/>
-              <label class="global-warning-safemode" flex="1">
-                &warning.safemode.label;
-              </label>
-              <label class="global-warning-checkcompatibility" flex="1">
-                &warning.checkcompatibility.label;
-              </label>
+              <hbox class="global-warning-safemode" flex="1" align="center"
+                    tooltiptext="&warning.safemode.label;">
+                <image class="warning-icon"/>
+                <label class="global-warning-text" flex="1" crop="end"
+                       value="&warning.safemode.label;"/>
+              </hbox>
+              <hbox class="global-warning-checkcompatibility" flex="1" align="center"
+                    tooltiptext="&warning.checkcompatibility.label;">
+                <image class="warning-icon"/>
+                <label class="global-warning-text" flex="1" crop="end"
+                       value="&warning.checkcompatibility.label;"/>
+              </hbox>
               <button class="button-link global-warning-checkcompatibility"
                       label="&warning.checkcompatibility.enable.label;"
                       tooltiptext="&warning.checkcompatibility.enable.tooltip;"
                       command="cmd_enableCheckCompatibility"/>
-              <label class="global-warning-updatesecurity" flex="1">
-                &warning.updatesecurity.label;
-              </label>
+              <hbox class="global-warning-updatesecurity" flex="1" align="center"
+                    tooltiptext="&warning.updatesecurity.label;">
+                <image class="warning-icon"/>
+                <label class="global-warning-text" flex="1" crop="end"
+                       value="&warning.updatesecurity.label;"/>
+              </hbox>
               <button class="button-link global-warning-updatesecurity"
                       label="&warning.updatesecurity.enable.label;"
                       tooltiptext="&warning.updatesecurity.enable.tooltip;"
                       command="cmd_enableUpdateSecurity"/>
               <spacer flex="5000"/> <!-- Necessary to allow the message to wrap -->
             </hbox>
             <spacer flex="1"/>
             <hbox id="search-sorters" class="sort-controls"
@@ -299,34 +307,42 @@
           <richlistbox id="search-list" class="list" flex="1">
             <hbox pack="center">
               <label id="search-allresults-link" class="text-link"/>
             </hbox>
           </richlistbox>
         </vbox>
 
         <!-- list view -->
-        <vbox id="list-view" flex="1" class="view-pane">
-          <hbox class="view-header global-warning-container" align="center">
+        <vbox id="list-view" flex="1" class="view-pane" align="stretch">
+          <hbox class="view-header global-warning-container">
             <!-- global warnings -->
             <hbox class="global-warning" flex="1">
-              <image class="warning-icon"/>
-              <label class="global-warning-safemode" flex="1">
-                &warning.safemode.label;
-              </label>
-              <label class="global-warning-checkcompatibility" flex="1">
-                &warning.checkcompatibility.label;
-              </label>
+              <hbox class="global-warning-safemode" flex="1" align="center"
+                    tooltiptext="&warning.safemode.label;">
+                <image class="warning-icon"/>
+                <label class="global-warning-text" flex="1" crop="end"
+                       value="&warning.safemode.label;"/>
+              </hbox>
+              <hbox class="global-warning-checkcompatibility" flex="1" align="center"
+                    tooltiptext="&warning.checkcompatibility.label;">
+                <image class="warning-icon"/>
+                <label class="global-warning-text" flex="1" crop="end"
+                       value="&warning.checkcompatibility.label;"/>
+              </hbox>
               <button class="button-link global-warning-checkcompatibility"
                       label="&warning.checkcompatibility.enable.label;"
                       tooltiptext="&warning.checkcompatibility.enable.tooltip;"
                       command="cmd_enableCheckCompatibility"/>
-              <label class="global-warning-updatesecurity" flex="1">
-                &warning.updatesecurity.label;
-              </label>
+              <hbox class="global-warning-updatesecurity" flex="1" align="center"
+                    tooltiptext="&warning.updatesecurity.label;">
+                <image class="warning-icon"/>
+                <label class="global-warning-text" flex="1" crop="end"
+                       value="&warning.updatesecurity.label;"/>
+              </hbox>
               <button class="button-link global-warning-updatesecurity"
                       label="&warning.updatesecurity.enable.label;"
                       tooltiptext="&warning.updatesecurity.enable.tooltip;"
                       command="cmd_enableUpdateSecurity"/>
               <spacer flex="5000"/> <!-- Necessary to allow the message to wrap -->
             </hbox>
             <spacer flex="1"/>
             <hbox id="list-sorters" class="sort-controls" sortby="name"
@@ -343,30 +359,38 @@
           <richlistbox id="addon-list" class="list" flex="1"/>
         </vbox>
 
         <!-- updates view -->
         <vbox id="updates-view" flex="1" class="view-pane">
           <hbox class="view-header global-warning-container" align="center">
             <!-- global warnings -->
             <hbox class="global-warning" flex="1">
-              <image class="warning-icon"/>
-              <label class="global-warning-safemode" flex="1">
-                &warning.safemode.label;
-              </label>
-              <label class="global-warning-checkcompatibility" flex="1">
-                &warning.checkcompatibility.label;
-              </label>
+              <hbox class="global-warning-safemode" flex="1" align="center"
+                    tooltiptext="&warning.safemode.label;">
+                <image class="warning-icon"/>
+                <label class="global-warning-text" flex="1" crop="end"
+                       value="&warning.safemode.label;"/>
+              </hbox>
+              <hbox class="global-warning-checkcompatibility" flex="1" align="center"
+                    tooltiptext="&warning.checkcompatibility.label;">
+                <image class="warning-icon"/>
+                <label class="global-warning-text" flex="1" crop="end"
+                       value="&warning.checkcompatibility.label;"/>
+              </hbox>
               <button class="button-link global-warning-checkcompatibility"
                       label="&warning.checkcompatibility.enable.label;"
                       tooltiptext="&warning.checkcompatibility.enable.tooltip;"
                       command="cmd_enableCheckCompatibility"/>
-              <label class="global-warning-updatesecurity" flex="1">
-                &warning.updatesecurity.label;
-              </label>
+              <hbox class="global-warning-updatesecurity" flex="1" align="center"
+                    tooltiptext="&warning.updatesecurity.label;">
+                <image class="warning-icon"/>
+                <label class="global-warning-text" flex="1" crop="end"
+                       value="&warning.updatesecurity.label;"/>
+              </hbox>
               <button class="button-link global-warning-updatesecurity"
                       label="&warning.updatesecurity.enable.label;"
                       tooltiptext="&warning.updatesecurity.enable.tooltip;"
                       command="cmd_enableUpdateSecurity"/>
               <spacer flex="5000"/> <!-- Necessary to allow the message to wrap -->
             </hbox>
             <spacer flex="1"/>
             <hbox id="updates-sorters" class="sort-controls" sortby="dateUpdated"
@@ -388,30 +412,38 @@
           </hbox>
           <richlistbox id="updates-list" class="list" flex="1"/>
         </vbox>
 
         <!-- detail view -->
         <scrollbox id="detail-view" flex="1" class="view-pane addon-view" orient="vertical">
           <!-- global warnings -->
           <hbox class="global-warning-container global-warning">
-            <image class="warning-icon"/>
-            <label class="global-warning-safemode" flex="1">
-              &warning.safemode.label;
-            </label>
-            <label class="global-warning-checkcompatibility" flex="1">
-              &warning.checkcompatibility.label;
-            </label>
+            <hbox class="global-warning-safemode" flex="1" align="center"
+                  tooltiptext="&warning.safemode.label;">
+              <image class="warning-icon"/>
+              <label class="global-warning-text" flex="1" crop="end"
+                     value="&warning.safemode.label;"/>
+            </hbox>
+            <hbox class="global-warning-checkcompatibility" flex="1" align="center"
+                  tooltiptext="&warning.checkcompatibility.label;">
+              <image class="warning-icon"/>
+              <label class="global-warning-text" flex="1" crop="end"
+                     value="&warning.checkcompatibility.label;"/>
+            </hbox>
             <button class="button-link global-warning-checkcompatibility"
                     label="&warning.checkcompatibility.enable.label;"
                     tooltiptext="&warning.checkcompatibility.enable.tooltip;"
                     command="cmd_enableCheckCompatibility"/>
-            <label class="global-warning-updatesecurity" flex="1">
-              &warning.updatesecurity.label;
-            </label>
+            <hbox class="global-warning-updatesecurity" flex="1" align="center"
+                  tooltiptext="&warning.updatesecurity.label;">
+              <image class="warning-icon"/>
+              <label class="global-warning-text" flex="1" crop="end"
+                     value="&warning.updatesecurity.label;"/>
+            </hbox>
             <button class="button-link global-warning-updatesecurity"
                     label="&warning.updatesecurity.enable.label;"
                     tooltiptext="&warning.updatesecurity.enable.tooltip;"
                     command="cmd_enableUpdateSecurity"/>
             <spacer flex="5000"/> <!-- Necessary to allow the message to wrap -->
           </hbox>
           <hbox flex="1">
             <spacer flex="1"/>
--- a/toolkit/mozapps/extensions/test/browser/browser_globalwarnings.js
+++ b/toolkit/mozapps/extensions/test/browser/browser_globalwarnings.js
@@ -17,49 +17,49 @@ add_test(function() {
   info("Testing compatibility checking warning");
 
   var version = Services.appinfo.version.replace(/^([^\.]+\.[0-9]+[a-z]*).*/gi, "$1");
   var pref = "extensions.checkCompatibility." + version;
   info("Setting " + pref + " pref to false")
   Services.prefs.setBoolPref(pref, false);
 
   open_manager("addons://list/extension", function(aWindow) {
-    var label = aWindow.document.querySelector("#list-view label.global-warning-checkcompatibility");
-    is_element_visible(label, "Check Compatibility warning label should be visible");
+    var hbox = aWindow.document.querySelector("#list-view hbox.global-warning-checkcompatibility");
+    is_element_visible(hbox, "Check Compatibility warning hbox should be visible");
     var button = aWindow.document.querySelector("#list-view button.global-warning-checkcompatibility");
     is_element_visible(button, "Check Compatibility warning button should be visible");
 
     info("Clicking 'Enable' button");
     EventUtils.synthesizeMouse(button, 2, 2, { }, aWindow);
     is(Services.prefs.prefHasUserValue(pref), false, "Check Compatability pref should be cleared");
-    is_element_hidden(label, "Check Compatibility warning label should be hidden");
+    is_element_hidden(hbox, "Check Compatibility warning hbox should be hidden");
     is_element_hidden(button, "Check Compatibility warning button should be hidden");
 
     close_manager(aWindow, function() {
       run_next_test();
     });
   });
 });
 
 add_test(function() {
   info("Testing update security checking warning");
 
   var pref = "extensions.checkUpdateSecurity";
   info("Setting " + pref + " pref to false")
   Services.prefs.setBoolPref(pref, false);
 
   open_manager(null, function(aWindow) {
-    var label = aWindow.document.querySelector("#list-view label.global-warning-updatesecurity");
-    is_element_visible(label, "Check Update Security warning label should be visible");
+    var hbox = aWindow.document.querySelector("#list-view hbox.global-warning-updatesecurity");
+    is_element_visible(hbox, "Check Update Security warning hbox should be visible");
     var button = aWindow.document.querySelector("#list-view button.global-warning-updatesecurity");
     is_element_visible(button, "Check Update Security warning button should be visible");
 
     info("Clicking 'Enable' button");
     EventUtils.synthesizeMouse(button, 2, 2, { }, aWindow);
     is(Services.prefs.prefHasUserValue(pref), false, "Check Update Security pref should be cleared");
-    is_element_hidden(label, "Check Update Security warning label should be hidden");
+    is_element_hidden(hbox, "Check Update Security warning hbox should be hidden");
     is_element_hidden(button, "Check Update Security warning button should be hidden");
 
     close_manager(aWindow, function() {
       run_next_test();
     });
   });
 });
--- a/toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
+++ b/toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
@@ -82,30 +82,40 @@
 }
 
 #forward-btn[disabled="true"]:-moz-locale-dir(rtl) {
   list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=toolbar&state=disabled");
 }
 
 /*** global warnings ***/
 
+.global-warning-container {
+  overflow-x: hidden;
+}
+
 .global-warning {
   -moz-box-align: center;
   margin: 0 8px;
   color: #916D15;
   text-shadow: #FFFFFF 1px 1px 1px;
   font-weight: bold;
 }
 
 #addons-page[warning] .global-warning-container {
   background-color: rgba(255, 255, 0, 0.1);
   background-image: url("chrome://mozapps/skin/extensions/warning-stripes.png");
   background-repeat: repeat-x;
 }
 
+@media all and (max-width: 700px) {
+  .global-warning-text {
+    display: none;
+  }
+}
+
 /*** notification icons ***/
 
 .warning-icon {
   list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=menu");
   width: 16px;
   height: 16px;
   margin: 3px 0;
 }
@@ -486,16 +496,17 @@
 
 
 
 /*** search view ***/
 
 #search-filter {
   padding: 5px 20px;
   font-size: 120%;
+  overflow-x: hidden;
 }
 
 #search-filter-label {
   font-weight: bold;
   color: grey;
 }
 
 .search-filter-radio {
--- a/toolkit/themes/pinstripe/mozapps/extensions/extensions.css
+++ b/toolkit/themes/pinstripe/mozapps/extensions/extensions.css
@@ -95,30 +95,40 @@
 
 .nav-button:-moz-window-inactive {
   border-color: @toolbarbuttonInactiveBorderColor@;
   background-image: @toolbarbuttonInactiveBackgroundImage@;
 }
 
 /*** global warnings ***/
 
+.global-warning-container {
+  overflow-x: hidden;
+}
+
 .global-warning {
   -moz-box-align: center;
   margin: 0 8px;
   color: #916D15;
   text-shadow: #FFFFFF 1px 1px 1px;
   font-weight: bold;
 }
 
 #addons-page[warning] .global-warning-container {
   background-color: rgba(255, 255, 0, 0.1);
   background-image: url("chrome://mozapps/skin/extensions/warning-stripes.png");
   background-repeat: repeat-x;
 }
 
+@media all and (max-width: 700px) {
+  .global-warning-text {
+    display: none;
+  }
+}
+
 /*** notification icons ***/
 
 .warning-icon {
   list-style-image: url("chrome://global/skin/icons/warning-16.png");
   width: 16px;
   height: 16px;
   margin: 3px 0;
 }
@@ -516,16 +526,17 @@
 
 
 
 /*** search view ***/
 
 #search-filter {
   padding: 5px 20px;
   font-size: 120%;
+  overflow-x: hidden;
 }
 
 #search-filter-label {
   font-weight: bold;
   color: grey;
 }
 
 .search-filter-radio {
--- a/toolkit/themes/winstripe/mozapps/extensions/extensions.css
+++ b/toolkit/themes/winstripe/mozapps/extensions/extensions.css
@@ -66,16 +66,20 @@
 
 #back-btn:-moz-locale-dir(rtl),
 #forward-btn:-moz-locale-dir(ltr) {
   -moz-image-region: rect(0, 36px, 18px, 18px);
 }
 
 /*** global warnings ***/
 
+.global-warning-container {
+  overflow-x: hidden;
+}
+
 .global-warning {
   -moz-box-align: center;
   padding: 0 8px;
   color: #916D15;
   font-weight: bold;
 }
 
 .global-warning,
@@ -89,16 +93,22 @@
   background-repeat: repeat-x;
 }
 
 #detail-view .global-warning {
   padding: 4px 12px;
   border-bottom: 1px solid #A8A8A8;  
 }
 
+@media all and (max-width: 700px) {
+  .global-warning-text {
+    display: none;
+  }
+}
+
 /*** notification icons ***/
 
 .warning-icon {
   list-style-image: url("chrome://global/skin/icons/warning-16.png");
   width: 16px;
   height: 16px;
   margin: 3px 0;
 }
@@ -496,16 +506,17 @@
 
 
 
 /*** search view ***/
 
 #search-filter {
   padding: 5px 20px;
   font-size: 120%;
+  overflow-x: hidden;
 }
 
 #search-filter-label {
   font-weight: bold;
   color: grey;
 }
 
 .search-filter-radio {