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 id1
push usershaver@mozilla.com
push dateTue, 04 Jan 2011 17:58:04 +0000
reviewersUnfocused, blocks-final
bugs602895
milestone2.0b8pre
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 {