Help dialog: fix long description breaking the layout of the dialog

Author: philc

background_scripts/all_commands.js

@@ -4,6 +4,7 @@
 // - advanced: advanced commands are not shown in the help dialog by default.
 // - background: whether this command has to be run by the background page.
 // - desc: shown in the help dialog and command listing page.
+// - details: extra help information that will only be shown on the command listing page.
 // - group: commands are displayed in groups in the help dialog and command listing.
 // - noRepeat: whether this command can be used with a count key prefix.
 // - repeatLimit: the number of allowed repetitions of this command before the user is prompted for
@@ -261,8 +262,8 @@ const allCommands = [
 
   {
     name: "Marks.activateCreateMode",
-    desc:
-      "Create a new mark. Do this by typing the key bound to this command, and then a letter. " +
+    desc: "Create a new mark",
+    details: "Do this by typing the key bound to this command, and then a letter. " +
       "This will set a mark bound to that letter. Lowercase letters are local marks and uppercase " +
       "letters are global marks.",
     options: {

pages/command_listing.css

@@ -68,7 +68,7 @@ h3 code {
   margin-right: auto;
 }
 
-p.desc {
+p.desc, p.details {
   margin-left: 1rem;
 }
 

pages/command_listing.html

@@ -39,6 +39,7 @@ <h3>
           <span class="key-bindings"></span>
         </h3>
         <p class="desc">Example description.</p>
+        <p class="details"></p>
         <div class="options">
           <p><strong>Options</strong></p>
           <ul></ul>

pages/command_listing.js

@@ -53,6 +53,9 @@ async function populatePage() {
       }
 
       el.querySelector(".desc").textContent = command.desc;
+      if (command.details) {
+        el.querySelector(".details").textContent = command.details;
+      }
 
       if (command.options) {
         const ul = el.querySelector(".options ul");