Bug 1125952 - Make about:sessionrestore use more available height. r=jaws, a=sledru
authorTim Nguyen <ntim.bugs@gmail.com>
Fri, 22 May 2015 09:58:00 -0400
changeset 266104 50bf62afd416
parent 266103 2b23a8be4f93
child 266105 edd045aad951
push id4755
push userryanvm@gmail.com
push date2015-05-25 19:46 +0000
treeherdermozilla-beta@46bb07934327 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, sledru
bugs1125952
milestone39.0
Bug 1125952 - Make about:sessionrestore use more available height. r=jaws, a=sledru
browser/components/sessionstore/content/aboutSessionRestore.xhtml
browser/themes/shared/aboutSessionRestore.css
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/shared/in-content/info-pages.inc.css
--- a/browser/components/sessionstore/content/aboutSessionRestore.xhtml
+++ b/browser/components/sessionstore/content/aboutSessionRestore.xhtml
@@ -10,78 +10,77 @@
   <!ENTITY % netErrorDTD SYSTEM "chrome://global/locale/netError.dtd">
   %netErrorDTD;
   <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
   %globalDTD;
   <!ENTITY % restorepageDTD SYSTEM "chrome://browser/locale/aboutSessionRestore.dtd">
   %restorepageDTD;
 ]>
 
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <head>
     <title>&restorepage.tabtitle;</title>
     <link rel="stylesheet" href="chrome://global/skin/in-content/info-pages.css" type="text/css" media="all"/>
     <link rel="stylesheet" href="chrome://browser/skin/aboutSessionRestore.css" type="text/css" media="all"/>
     <link rel="icon" type="image/png" href="chrome://global/skin/icons/warning-16.png"/>
 
     <script type="application/javascript;version=1.8" src="chrome://browser/content/aboutSessionRestore.js"/>
   </head>
 
   <body dir="&locale.dir;">
 
-    <div class="container">
+    <div class="container flex">
 
       <div class="title">
         <h1 class="title-text">&restorepage.errorTitle;</h1>
       </div>
       <div class="description">
         <p>&restorepage.problemDesc;</p>
 
         <div id="errorLongDesc">
           <p>&restorepage.tryThis;</p>
           <ul>
             <li>&restorepage.restoreSome;</li>
             <li>&restorepage.startNew;</li>
           </ul>
         </div>
-
-        <tree xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-              id="tabList" flex="1" seltype="single" hidecolumnpicker="true"
+      </div>
+      <div class="tree-container">
+        <xul:tree id="tabList" seltype="single" hidecolumnpicker="true"
               onclick="onListClick(event);" onkeydown="onListKeyDown(event);"
               available="true" _window_label="&restorepage.windowLabel;">
-          <treecols>
-            <treecol cycler="true" id="restore" type="checkbox" label="&restorepage.restoreHeader;"/>
-            <splitter class="tree-splitter"/>
-            <treecol primary="true" id="title" label="&restorepage.listHeader;" flex="1"/>
-          </treecols>
-          <treechildren flex="1"/>
-        </tree>
+          <xul:treecols>
+            <xul:treecol cycler="true" id="restore" type="checkbox" label="&restorepage.restoreHeader;"/>
+            <xul:splitter class="tree-splitter"/>
+            <xul:treecol primary="true" id="title" label="&restorepage.listHeader;" flex="1"/>
+          </xul:treecols>
+          <xul:treechildren flex="1"/>
+        </xul:tree>
       </div>
-
-      <hbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="button-container">
+      <div class="button-container">
 #ifdef XP_UNIX
-        <button id="errorCancel"
+        <xul:button id="errorCancel"
                 label="&restorepage.closeButton;"
                 accesskey="&restorepage.close.access;"
                 oncommand="startNewSession();"/>
-        <button class="primary"
+        <xul:button class="primary"
                 id="errorTryAgain"
                 label="&restorepage.tryagainButton;"
                 accesskey="&restorepage.restore.access;"
                 oncommand="restoreSession();"/>
 #else
-        <button class="primary"
+        <xul:button class="primary"
                 id="errorTryAgain"
                 label="&restorepage.tryagainButton;"
                 accesskey="&restorepage.restore.access;"
                 oncommand="restoreSession();"/>
-        <button id="errorCancel"
+        <xul:button id="errorCancel"
                 label="&restorepage.closeButton;"
                 accesskey="&restorepage.close.access;"
                 oncommand="startNewSession();"/>
 #endif
-      </hbox>
+      </div>
       <!-- holds the session data for when the tab is closed -->
       <input type="text" id="sessionData" style="display: none;"/>
     </div>
 
   </body>
 </html>
--- a/browser/themes/shared/aboutSessionRestore.css
+++ b/browser/themes/shared/aboutSessionRestore.css
@@ -30,9 +30,9 @@ treechildren::-moz-tree-image(checked, s
   list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted");
 }
 
 treechildren::-moz-tree-image(partial) {
   list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial");
 }
 treechildren::-moz-tree-image(partial, selected) {
   list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial-inverted");
-}
\ No newline at end of file
+}
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -653,16 +653,17 @@ xul|listbox xul|listitem[selected="true"
 }
 
 /* Trees */
 
 xul|tree {
   -moz-appearance: none;
   font-size: 1em;
   border: 1px solid #c1c1c1;
+  margin: 0;
 }
 
 xul|tree:-moz-focusring,
 xul|richlistbox:-moz-focusring {
   border: 1px dotted #0095dd;
 }
 
 xul|listheader,
--- a/toolkit/themes/shared/in-content/info-pages.inc.css
+++ b/toolkit/themes/shared/in-content/info-pages.inc.css
@@ -1,27 +1,35 @@
 @import url("chrome://global/skin/in-content/common.css");
 /* Body and container */
 body {
   display: flex;
+  flex-direction: column;
   box-sizing: padding-box;
   min-height: 100vh;
   padding-top: 0;
   padding-bottom: 0;
   -moz-padding-start: calc(48px + 4.6em);
   -moz-padding-end: 48px;
   align-items: center;
   justify-content: center;
 }
 
 .container {
   min-width: 13em;
   max-width: 52em;
 }
 
+.container.flex {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 10vh 0;
+}
+
 /* Typography */
 .title {
   background-image: url("chrome://browser/skin/aboutNetError_info.svg");
   background-position: left 0;
   background-repeat: no-repeat;
   background-size: 1.6em;
   -moz-margin-start: -2.3em;
   -moz-padding-start: 2.3em;
@@ -77,13 +85,21 @@ ul {
   min-width: 150px;
 }
 
 .button-container > button:first-child {
   -moz-margin-start: 0;
 }
 
 /* Trees */
-tree {
-  min-height: 12em;
+.tree-container {
   margin-top: 1.2em;
+  flex-grow: 1;
+  min-height: 12em;
+}
+
+.tree-container > tree {
+  height: 100%;
+}
+
+tree {
   width: 100%;
-}
\ No newline at end of file
+}