Bug 1128237 - fix dialogs on small screen sizes, r=jaws
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Sat, 07 Feb 2015 01:01:49 +0000
changeset 256160 1900ac4cdf15ef9f8ff6bdb9105033c851d7aad1
parent 256159 7f9d625a5734983f370570b620b58c512a3cae39
child 256161 d522b57c3cb7282a513418e214083d5a8c1eab9b
push id4610
push userjlund@mozilla.com
push dateMon, 30 Mar 2015 18:32:55 +0000
treeherdermozilla-beta@4df54044d9ef [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1128237
milestone38.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 1128237 - fix dialogs on small screen sizes, r=jaws
browser/components/preferences/cookies.xul
browser/components/preferences/fonts.xul
browser/components/preferences/in-content/subdialogs.js
browser/components/preferences/languages.xul
browser/components/preferences/permissions.xul
browser/components/preferences/translation.xul
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/cookies.xul
+++ b/browser/components/preferences/cookies.xul
@@ -26,17 +26,17 @@
                 src="chrome://browser/locale/preferences/preferences.properties"/>
 
   <keyset>
     <key key="&windowClose.key;" modifiers="accel" oncommand="window.close();"/>
     <key key="&focusSearch1.key;" modifiers="accel" oncommand="gCookiesWindow.focusFilterBox();"/>
     <key key="&focusSearch2.key;" modifiers="accel" oncommand="gCookiesWindow.focusFilterBox();"/>
   </keyset>
 
-  <vbox flex="1" class="contentPane">
+  <vbox flex="1" class="contentPane largeDialogContainer">
     <hbox align="center">
       <label accesskey="&filter.accesskey;" control="filter">&filter.label;</label>
       <textbox type="search" id="filter" flex="1"
                aria-controls="cookiesList"
                oncommand="gCookiesWindow.filter();"/>
     </hbox>
     <separator class="thin"/>
     <label control="cookiesList" id="cookiesIntro" value="&cookiesonsystem.label;"/>
--- a/browser/components/preferences/fonts.xul
+++ b/browser/components/preferences/fonts.xul
@@ -17,16 +17,17 @@
             title="&fontsDialog.title;"
             dlgbuttons="accept,cancel,help"
             ondialoghelp="openPrefsHelp()"
             style="">
 
   <script type="application/javascript" src="chrome://browser/content/utilityOverlay.js"/>
 
   <prefpane id="FontsDialogPane"
+            class="largeDialogContainer"
             helpTopic="prefs-fonts-and-colors">
   
     <preferences id="fontPreferences">
       <preference id="font.language.group"  name="font.language.group"  type="wstring"/>
       <preference id="browser.display.use_document_fonts"
                   name="browser.display.use_document_fonts"
                   type="int"/>
       <preference id="intl.charset.fallback.override" name="intl.charset.fallback.override" type="string"/>
--- a/browser/components/preferences/in-content/subdialogs.js
+++ b/browser/components/preferences/in-content/subdialogs.js
@@ -159,16 +159,32 @@ let gSubDialog = {
     let groupBoxBody = document.getAnonymousElementByAttribute(this._box, "class", "groupbox-body");
     let boxVerticalPadding = 2 * parseFloat(getComputedStyle(groupBoxBody).paddingTop);
     let boxHorizontalPadding = 2 * parseFloat(getComputedStyle(groupBoxBody).paddingLeft);
     let frameWidth = docEl.style.width || docEl.scrollWidth + "px";
     let frameHeight = docEl.style.height || docEl.scrollHeight + "px";
     let boxVerticalBorder = 2 * parseFloat(getComputedStyle(this._box).borderTopWidth);
     let boxHorizontalBorder = 2 * parseFloat(getComputedStyle(this._box).borderLeftWidth);
 
+    let frameRect = this._frame.getBoundingClientRect();
+    let boxRect = this._box.getBoundingClientRect();
+    let frameSizeDifference = (frameRect.top - boxRect.top) + (boxRect.bottom - frameRect.bottom);
+
+    // Now check if the frame height we calculated is possible at this window size,
+    // accounting for titlebar, padding/border and some spacing.
+    let maxHeight = window.innerHeight - frameSizeDifference - 30;
+    if (frameHeight > maxHeight) {
+      // If not, we should probably let the dialog scroll:
+      frameHeight = maxHeight;
+      let containers = this._frame.contentDocument.querySelectorAll('.largeDialogContainer');
+      for (let container of containers) {
+        container.classList.add("doScroll");
+      }
+    }
+
     this._frame.style.width = frameWidth;
     this._frame.style.height = frameHeight;
     this._box.style.minHeight = "calc(" +
                                 (boxVerticalBorder + groupBoxTitleHeight + boxVerticalPadding) +
                                 "px + " + frameHeight + ")";
     this._box.style.minWidth = "calc(" +
                                (boxHorizontalBorder + boxHorizontalPadding) +
                                "px + " + frameWidth + ")";
--- a/browser/components/preferences/languages.xul
+++ b/browser/components/preferences/languages.xul
@@ -17,16 +17,17 @@
             title="&languages.customize.Header;"
             dlgbuttons="accept,cancel,help"
             ondialoghelp="openPrefsHelp()"
             style="width: &window.width;;">
 
   <script type="application/javascript" src="chrome://browser/content/utilityOverlay.js"/>
 
   <prefpane id="LanguagesDialogPane"
+            class="largeDialogContainer"
             onpaneload="gLanguagesDialog.init();"
             helpTopic="prefs-languages">
 
     <preferences>
       <preference id="intl.accept_languages" name="intl.accept_languages" type="wstring"/>
       <preference id="pref.browser.language.disable_button.up"
                   name="pref.browser.language.disable_button.up"
                   type="bool"/>
--- a/browser/components/preferences/permissions.xul
+++ b/browser/components/preferences/permissions.xul
@@ -24,17 +24,17 @@
 
   <stringbundle id="bundlePreferences"
                 src="chrome://browser/locale/preferences/preferences.properties"/>
 
   <keyset>
     <key key="&windowClose.key;" modifiers="accel" oncommand="window.close();"/>
   </keyset>
 
-  <vbox class="contentPane" flex="1">
+  <vbox class="contentPane largeDialogContainer" flex="1">
     <description id="permissionsText" control="url"/>
     <separator class="thin"/>
     <label id="urlLabel" control="url" value="&address.label;" accesskey="&address.accesskey;"/>
     <hbox align="start">
       <textbox id="url" flex="1" 
                oninput="gPermissionManager.onHostInput(event.target);"
                onkeypress="gPermissionManager.onHostKeyPress(event);"/>
     </hbox>
--- a/browser/components/preferences/translation.xul
+++ b/browser/components/preferences/translation.xul
@@ -23,55 +23,57 @@
 
   <stringbundle id="bundlePreferences"
                 src="chrome://browser/locale/preferences/preferences.properties"/>
 
   <keyset>
     <key key="&windowClose.key;" modifiers="accel" oncommand="window.close();"/>
   </keyset>
 
-  <vbox class="contentPane" flex="1">
-    <label id="languagesLabel" control="permissionsTree">&noTranslationForLanguages.label;</label>
-    <separator class="thin"/>
-    <tree id="languagesTree" flex="1" style="height: 12em;"
-          hidecolumnpicker="true"
-          onkeypress="gTranslationExceptions.onLanguageKeyPress(event)"
-          onselect="gTranslationExceptions.onLanguageSelected();">
-      <treecols>
-        <treecol id="languageCol" label="&treehead.languageName.label;" flex="1"/>
-      </treecols>
-      <treechildren/>
-    </tree>
-  </vbox>
-  <hbox align="end">
-    <hbox class="actionButtons" flex="1">
-      <button id="removeLanguage" disabled="true"
-              accesskey="&removeLanguage.accesskey;"
-              icon="remove" label="&removeLanguage.label;"
-              oncommand="gTranslationExceptions.onLanguageDeleted();"/>
-      <button id="removeAllLanguages"
-              icon="clear" label="&removeAllLanguages.label;"
-              accesskey="&removeAllLanguages.accesskey;"
-              oncommand="gTranslationExceptions.onAllLanguagesDeleted();"/>
-      <spacer flex="1"/>
+  <vbox class="largeDialogContainer">
+    <vbox class="contentPane" flex="1">
+      <label id="languagesLabel" control="permissionsTree">&noTranslationForLanguages.label;</label>
+      <separator class="thin"/>
+      <tree id="languagesTree" flex="1" style="height: 12em;"
+            hidecolumnpicker="true"
+            onkeypress="gTranslationExceptions.onLanguageKeyPress(event)"
+            onselect="gTranslationExceptions.onLanguageSelected();">
+        <treecols>
+          <treecol id="languageCol" label="&treehead.languageName.label;" flex="1"/>
+        </treecols>
+        <treechildren/>
+      </tree>
+    </vbox>
+    <hbox align="end">
+      <hbox class="actionButtons" flex="1">
+        <button id="removeLanguage" disabled="true"
+                accesskey="&removeLanguage.accesskey;"
+                icon="remove" label="&removeLanguage.label;"
+                oncommand="gTranslationExceptions.onLanguageDeleted();"/>
+        <button id="removeAllLanguages"
+                icon="clear" label="&removeAllLanguages.label;"
+                accesskey="&removeAllLanguages.accesskey;"
+                oncommand="gTranslationExceptions.onAllLanguagesDeleted();"/>
+        <spacer flex="1"/>
+      </hbox>
     </hbox>
-  </hbox>
-  <separator/>
-  <vbox class="contentPane" flex="1">
-    <label id="languagesLabel" control="permissionsTree">&noTranslationForSites.label;</label>
-    <separator class="thin"/>
-    <tree id="sitesTree" flex="1" style="height: 12em;"
-          hidecolumnpicker="true"
-          onkeypress="gTranslationExceptions.onSiteKeyPress(event)"
-          onselect="gTranslationExceptions.onSiteSelected();">
-      <treecols>
-        <treecol id="siteCol" label="&treehead.siteName.label;" flex="1"/>
-      </treecols>
-      <treechildren/>
-    </tree>
+    <separator/>
+    <vbox class="contentPane" flex="1">
+      <label id="languagesLabel" control="permissionsTree">&noTranslationForSites.label;</label>
+      <separator class="thin"/>
+      <tree id="sitesTree" flex="1" style="height: 12em;"
+            hidecolumnpicker="true"
+            onkeypress="gTranslationExceptions.onSiteKeyPress(event)"
+            onselect="gTranslationExceptions.onSiteSelected();">
+        <treecols>
+          <treecol id="siteCol" label="&treehead.siteName.label;" flex="1"/>
+        </treecols>
+        <treechildren/>
+      </tree>
+    </vbox>
   </vbox>
   <hbox align="end">
     <hbox class="actionButtons" flex="1">
       <button id="removeSite" disabled="true"
               accesskey="&removeSite.accesskey;"
               icon="remove" label="&removeSite.label;"
               oncommand="gTranslationExceptions.onSiteDeleted();"/>
       <button id="removeAllSites"
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -345,16 +345,21 @@ description > html|a {
 
 #dialogFrame {
   -moz-box-flex: 1;
   /* Default dialog dimensions */
   height: 20em;
   width: 66ch;
 }
 
+.largeDialogContainer.doScroll {
+  overflow-y: auto;
+  -moz-box-flex: 1;
+}
+
 /**
  * End Dialog
  */
 
 /**
  * Sync migration
  */
 #sync-migrate-upgrade-description {