Bug 602895: When the window gets too small for the deck we need to show a horizontal scrollbar. r=Unfocused, a=blocks-final

This commit is contained in:
Dave Townsend 2010-11-16 11:30:26 -08:00
parent 7154c87e48
commit ebe5662ded
5 changed files with 113 additions and 48 deletions

View File

@ -264,20 +264,28 @@
<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;"
@ -304,24 +312,32 @@
</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;"
@ -348,20 +364,28 @@
<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;"
@ -393,20 +417,28 @@
<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;"

View File

@ -22,15 +22,15 @@ add_test(function() {
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() {
@ -47,15 +47,15 @@ add_test(function() {
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() {

View File

@ -87,6 +87,10 @@
/*** global warnings ***/
.global-warning-container {
overflow-x: hidden;
}
.global-warning {
-moz-box-align: center;
margin: 0 8px;
@ -101,6 +105,12 @@
background-repeat: repeat-x;
}
@media all and (max-width: 700px) {
.global-warning-text {
display: none;
}
}
/*** notification icons ***/
.warning-icon {
@ -491,6 +501,7 @@
#search-filter {
padding: 5px 20px;
font-size: 120%;
overflow-x: hidden;
}
#search-filter-label {

View File

@ -100,6 +100,10 @@
/*** global warnings ***/
.global-warning-container {
overflow-x: hidden;
}
.global-warning {
-moz-box-align: center;
margin: 0 8px;
@ -114,6 +118,12 @@
background-repeat: repeat-x;
}
@media all and (max-width: 700px) {
.global-warning-text {
display: none;
}
}
/*** notification icons ***/
.warning-icon {
@ -521,6 +531,7 @@
#search-filter {
padding: 5px 20px;
font-size: 120%;
overflow-x: hidden;
}
#search-filter-label {

View File

@ -71,6 +71,10 @@
/*** global warnings ***/
.global-warning-container {
overflow-x: hidden;
}
.global-warning {
-moz-box-align: center;
padding: 0 8px;
@ -94,6 +98,12 @@
border-bottom: 1px solid #A8A8A8;
}
@media all and (max-width: 700px) {
.global-warning-text {
display: none;
}
}
/*** notification icons ***/
.warning-icon {
@ -501,6 +511,7 @@
#search-filter {
padding: 5px 20px;
font-size: 120%;
overflow-x: hidden;
}
#search-filter-label {