Bug 1050857 - Options panel layout doesn't work well with translated text;r=mratcliffe

browser/devtools/framework/options-panel.css

@@ -22,14 +22,14 @@
 .options-vertical-pane {
   margin: 5px;
   width: calc(100%/3 - 30px);
-  min-width: 260px;
+  min-width: 320px;
   -moz-padding-start: 5px;
 }
 
 /* Snap to 50% width once there is not room for 3 columns anymore.
    This prevents having 2 columns showing in a row, but taking up
    only ~66% of the available space. */
-@media (max-width: 900px) {
+@media (max-width: 1000px) {
   .options-vertical-pane {
     width: calc(100%/2 - 30px);
   }

browser/devtools/framework/toolbox-options.xul

@@ -16,19 +16,19 @@
   <hbox id="options-panel-container" flex="1">
     <hbox id="options-panel" class="theme-body" flex="1">
       <vbox id="tools-box" class="options-vertical-pane" flex="1">
-        <label value="&options.selectDefaultTools.label;"/>
+        <label>&options.selectDefaultTools.label;</label>
         <vbox id="default-tools-box" class="options-groupbox" tabindex="0"/>
-        <label value="&options.selectAdditionalTools.label;"/>
+        <label>&options.selectAdditionalTools.label;</label>
         <vbox id="additional-tools-box" class="options-groupbox"/>
-        <label value="&options.selectEnabledToolboxButtons.label;"/>
+        <label>&options.selectEnabledToolboxButtons.label;</label>
         <vbox id="enabled-toolbox-buttons-box" class="options-groupbox"/>
         <label id="tools-not-supported-label"
                class="options-citation-label theme-comment"
-               value="&options.toolNotSupported.label;"/>
+        >&options.toolNotSupported.label;</label>
 
       </vbox>
       <vbox class="options-vertical-pane" flex="1">
-        <label value="&options.selectDevToolsTheme.label;"/>
+        <label>&options.selectDevToolsTheme.label;</label>
         <radiogroup id="devtools-theme-box"
                     class="options-groupbox"
                     data-pref="devtools.theme"
@@ -36,21 +36,21 @@
           <radio value="light" label="&options.lightTheme.label;"/>
           <radio value="dark" label="&options.darkTheme.label;"/>
         </radiogroup>
-        <label value="&options.commonPrefs.label;"/>
+        <label>&options.commonPrefs.label;</label>
         <vbox id="commonprefs-options" class="options-groupbox">
           <checkbox label="&options.enablePersistentLogs.label;"
                     tooltiptext="&options.enablePersistentLogs.tooltip;"
                     data-pref="devtools.webconsole.persistlog"/>
         </vbox>
-        <label value="&options.context.inspector;"/>
+        <label>&options.context.inspector;</label>
         <vbox id="inspector-options" class="options-groupbox">
           <checkbox label="&options.showUserAgentStyles.label;"
                     tooltiptext="&options.showUserAgentStyles.tooltip;"
                     data-pref="devtools.inspector.showUserAgentStyles"/>
-          <hbox align="center">
-            <label value="&options.defaultColorUnit.label;"
-                   control="defaultColorUnitMenuList"
-                   accesskey="&options.defaultColorUnit.accesskey;"/>
+          <description>
+            <label control="defaultColorUnitMenuList"
+                   accesskey="&options.defaultColorUnit.accesskey;"
+            >&options.defaultColorUnit.label;</label>
             <menulist id="defaultColorUnitMenuList"
                       data-pref="devtools.defaultColorUnit">
               <menupopup>
@@ -60,16 +60,16 @@
                 <menuitem label="&options.defaultColorUnit.name;" value="name"/>
               </menupopup>
             </menulist>
-          </hbox>
+          </description>
         </vbox>
-        <label value="&options.webconsole.label;"/>
+        <label>&options.webconsole.label;</label>
         <vbox id="webconsole-options" class="options-groupbox">
           <checkbox id="webconsole-timestamp-messages"
                     label="&options.timestampMessages.label;"
                     tooltiptext="&options.timestampMessages.tooltip;"
                     data-pref="devtools.webconsole.timestampMessages"/>
         </vbox>
-        <label value="&options.styleeditor.label;"/>
+        <label>&options.styleeditor.label;</label>
         <vbox id="styleeditor-options" class="options-groupbox">
           <checkbox label="&options.stylesheetSourceMaps.label;"
                     tooltiptext="&options.stylesheetSourceMaps.tooltip;"
@@ -78,7 +78,7 @@
                     tooltiptext="&options.stylesheetAutocompletion.tooltip;"
                     data-pref="devtools.styleeditor.autocompletion-enabled"/>
         </vbox>
-        <label value="&options.profiler.label;"/>
+        <label>&options.profiler.label;</label>
         <vbox id="profiler-options" class="options-groupbox">
           <checkbox label="&options.showPlatformData.label;"
                     tooltiptext="&options.showPlatformData.tooltip;"
@@ -87,7 +87,7 @@
       </vbox>
 
       <vbox id="sourceeditor-box" class="options-vertical-pane" flex="1">
-        <label value="&options.sourceeditor.label;"/>
+        <label>&options.sourceeditor.label;</label>
         <vbox id="sourceeditor-options" class="options-groupbox">
           <checkbox id="devtools-sourceeditor-detectindentation"
                     label="&options.sourceeditor.detectindentation.label;"
@@ -101,10 +101,10 @@
                     label="&options.sourceeditor.expandtab.label;"
                     tooltiptext="&options.sourceeditor.expandtab.tooltip;"
                     data-pref="devtools.editor.expandtab"/>
-          <hbox align="center">
-            <label value="&options.sourceeditor.tabsize.label;"
-                   control="devtools-sourceeditor-tabsize-menulist"
-                   accesskey="&options.sourceeditor.tabsize.accesskey;"/>
+          <description>
+            <label control="devtools-sourceeditor-tabsize-menulist"
+                   accesskey="&options.sourceeditor.tabsize.accesskey;"
+            >&options.sourceeditor.tabsize.label;</label>
             <menulist id="devtools-sourceeditor-tabsize-menulist"
                       data-pref="devtools.editor.tabsize">
               <menupopup>
@@ -113,11 +113,11 @@
                 <menuitem label="8" value="8"/>
               </menupopup>
             </menulist>
-          </hbox>
-          <hbox align="center">
-            <label value="&options.sourceeditor.keybinding.label;"
-                   control="devtools-sourceeditor-keybinding-menulist"
-                   accesskey="&options.sourceeditor.keybinding.accesskey;"/>
+          </description>
+          <description>
+            <label control="devtools-sourceeditor-keybinding-menulist"
+                   accesskey="&options.sourceeditor.keybinding.accesskey;"
+            >&options.sourceeditor.keybinding.label;</label>
             <menulist id="devtools-sourceeditor-keybinding-menulist"
                       data-pref="devtools.editor.keymap">
               <menupopup>
@@ -128,9 +128,9 @@
                 <menuitem label="Sublime Text" value="sublime"/>
               </menupopup>
             </menulist>
-          </hbox>
+          </description>
         </vbox>
-        <label value="&options.context.advancedSettings;"/>
+        <label>&options.context.advancedSettings;</label>
         <vbox id="context-options" class="options-groupbox">
           <checkbox id="devtools-disable-cache"
                     label="&options.disableCache.label2;"
@@ -150,7 +150,7 @@
                       data-pref="devtools.debugger.remote-enabled"/>
           </hbox>
           <label class="options-citation-label theme-comment"
-                 value="&options.context.triggersPageRefresh;"/>
+          >&options.context.triggersPageRefresh;</label>
         </vbox>
       </vbox>
     </hbox>