nixos-gui:

- Add a scroll bar for option details.
- Respect text eol and indentation on the ui.

svn path=/nixos/trunk/; revision=26974

gui/chrome/content/main.js

@@ -15,6 +15,13 @@ function setProgress(current, max)
 }
 */
 
+function updateTextbox(id, value)
+{
+  // setting the height cause an overflow which resize the textbox to its
+  // content due to its onoverflow attribute.
+  $(id).attr("value", value).attr("height", 1);
+};
+
 function updatePanel(options)
 {
   log("updatePanel: " + options.length);
@@ -32,22 +39,22 @@ function updatePanel(options)
   $("#desc").text(o.description);
 
   if (o.value != null)
-    $("#val").text(o.value);
+    updateTextbox("#val", o.value);
   else
-    $("#val").text("");
+    updateTextbox("#val", "");
 
   if (o.defaultValue != null)
-    $("#def").text(o.defaultValue);
+    updateTextbox("#def", o.defaultValue);
   else
-    $("#def").text("");
+    updateTextbox("#def", "");
 
   if (o.example != null)
-    $("#exp").text(o.example);
+    updateTextbox("#exp", o.example);
   else
-    $("#exp").text("");
+    updateTextbox("#exp", "");
 
-  $("#decls").text(o.declarations.join("\n"));
+  updateTextbox("#decls", o.declarations.join("\n"));
-  $("#defs").text(o.definitions.join("\n"));
+  updateTextbox("#defs", o.definitions.join("\n"));
 }
 
 

gui/chrome/content/myviewer.xul

@@ -18,43 +18,46 @@
   <script src="nixos.js"/>
   <script src="optionView.js"/>
   <script src="main.js"/>
-  <columns height="580">
+  <hbox flex="1">
-    <column width = "300">
+    <vbox width="250">
       <tree flex="1" id="option-tree" persist="height" onselect="gOptionView.selectionChanged()">
         <treecols>
-          <treecol persist="hidden width" flex="1" id="opt-name"
+          <treecol persist="hidden width" flex="9" id="opt-name"
                    label="Option" primary="true"/>
           <!-- Uncomment the following column to see the number of option
                printed below each options. -->
           <!--
           <treecol persist="hidden width" flex="1" id="dbg-size"
-                   label="Size"/>
+                   label="sz"/>
           -->
         </treecols>
         <treechildren id="first-child" flex="1"/>
       </tree>
-    </column>
+    </vbox>
-    <column flex="1">
+    <vbox flex="3" style="overflow: auto">
       <caption id="name" label=""/>
       <caption id="typename" label=""/>
       <separator/>
       <description id="desc" hidden="false"></description>
       <separator/>
       <caption label="Value:"/>
-      <description id="val" hidden="false"></description>
+      <textbox id="val" readonly="true" multiline="true" value=""
+      class="plain" hidden="false" onoverflow="this.height =
+      this.inputField.scrollHeight;" />
       <separator/>
       <caption label="Default:"/>
-      <description id="def" hidden="false"></description>
+      <textbox id="def" readonly="true" multiline="true" value="" class="plain" hidden="false" onoverflow="this.height = this.inputField.scrollHeight;" />
       <separator/>
       <caption label="Example:"/>
-      <description id="exp" hidden="false"></description>
+      <textbox id="exp" readonly="true" multiline="true" value="" class="plain" hidden="false" onoverflow="this.height = this.inputField.scrollHeight;" />
       <separator/>
       <caption label="Declarations:"/>
-      <description id="decls" hidden="false"></description>
+      <textbox id="decls" readonly="true" multiline="true" value="" class="plain" hidden="false" onoverflow="this.height = this.inputField.scrollHeight;" />
       <separator/>
       <caption label="Definitions:"/>
-      <description id="defs" hidden="false"></description>
+      <textbox id="defs" readonly="true" multiline="true" value=""
-    </column>
+      class="plain" hidden="false" onoverflow="this.height = this.inputField.scrollHeight;" />
-  </columns>
+    </vbox>
+  </hbox>
 <!--  <progressmeter id="progress-bar" value="0%"/> -->
 </window>