feat(pdf-editor): the five things you open a PDF to do, named and in front

Select, Text, Highlight, Draw, Sign — labelled, in that order, at the head
of the toolbar. Each one leads a kit rather than hiding it: the shapes sit
behind Draw, underline and strike-through behind Highlight, and nothing is
offered twice.

Draw arms the pen, which is what Draw means when there is one button for
it. The names drop out below 1180px, where five of them would start
pushing the zoom and colour controls off the end.

bundled-addons/pdf-editor/addon.json

@@ -1,7 +1,7 @@
 {
   "id": "pdf-editor",
   "name": "PDF Editor",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Open a PDF in a full tab: read it, mark it up with highlight, underline, strike-through, pen, shapes, arrows, text and a drawn signature, then move, resize, restyle or delete anything you placed. Reorder, rotate or drop pages, fill in form fields, redact for real, and save a new copy. Build a PDF from pictures, one page each, or join several PDFs into one. Marks are written into the saved file as real PDF content. The original is never touched.",
   "author": "Silent Mode",
   "icon": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTYgMmg4bDYgNnYxMmEyIDIgMCAwIDEtMiAySDZhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJ6IiBmaWxsPSIjZGMyNjI2Ii8+PHBhdGggZD0iTTE0IDJ2Nmg2eiIgZmlsbD0iIzk5MWIxYiIvPjx0ZXh0IHg9IjEyIiB5PSIxNyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9InN5c3RlbS11aSwtYXBwbGUtc3lzdGVtLHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iNS41IiBmb250LXdlaWdodD0iODAwIiBmaWxsPSIjZmZmIj5QREY8L3RleHQ+PC9zdmc+",

bundled-addons/pdf-editor/editor.css

@@ -168,7 +168,9 @@ body[data-dragover="1"] .dz-actions { visibility: hidden; }
 .tool.big { width: auto; padding: 0 10px; gap: 6px; }
 .tool.big .tlabel { font-size: 12px; line-height: 1; }
 .tool.big svg { width: 15px; height: 15px; }
-@media (max-width: 900px) { .tool.big .tlabel { display: none; } .tool.big { width: 30px; padding: 0; } }
+/* Five names take room. Below this the toolbar would start pushing the zoom
+   and colour controls off the end, so the names go and the icons stay. */
+@media (max-width: 1180px) { .tool.big .tlabel { display: none; } .tool.big { width: 30px; padding: 0; } }
 
 /* ---- typing on the page --------------------------------------------- */
 /* Positioned by lib/inline.js against the page's own coordinates, so it sits

bundled-addons/pdf-editor/editor.html

@@ -35,8 +35,9 @@
      controls can right-anchor without the tools crowding the left edge. -->
 <div class="toolbar" id="toolbar">
  <div class="tool-cluster">
-  <!-- Three things you do to a document — point at it, write on it, sign it —
+  <!-- The five things people open a PDF to do, in front and named. Each one
-       set apart from the drawing kit, which is a kit. -->
+       leads a kit: Highlight is the first of the text markers, Draw is the
+       first of the drawing tools, and the rest of each kit follows behind. -->
   <div class="tgroup primary" role="group" aria-label="Main tools">
     <button class="tool big active" data-tool="select" title="Select (V) — click a mark, drag an area around several; double-click to type or to edit what is there">
       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2l4 11 1.6-4.4L13 7z"/></svg>
@@ -46,6 +47,14 @@
       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 3h10M8 3v10M6 13h4"/></svg>
       <span class="tlabel">Text</span>
     </button>
+    <button class="tool big" data-tool="highlight" title="Highlight (H) — drag across the document's text">
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h10"/><path d="M5 9.5l4.5-6.5 3 2L8 11.5z"/></svg>
+      <span class="tlabel">Highlight</span>
+    </button>
+    <button class="tool big" data-tool="pen" title="Draw (P) — freehand; lines, arrows and shapes are alongside">
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 14c1-3 3-6 6-8s5-3 6-3l-3 4c-2 1-4 3-6 4s-2 2-3 3z"/></svg>
+      <span class="tlabel">Draw</span>
+    </button>
     <button class="tool big" data-tool="signature" title="Signature (G) — choose one, or draw a new one">
       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
         <path d="M1.5 12.5c2.2 0 2.6-7 4.2-7s1 6 2.6 6 2-3.5 3-3.5"/>
@@ -56,10 +65,7 @@
     </button>
   </div>
 
-  <div class="tgroup" role="group" aria-label="Draw">
+  <div class="tgroup" role="group" aria-label="Shapes">
-    <button class="tool" data-tool="pen" title="Pen — freehand (P)">
-      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 14c1-3 3-6 6-8s5-3 6-3l-3 4c-2 1-4 3-6 4s-2 2-3 3z"/></svg>
-    </button>
     <button class="tool" data-tool="line" title="Line (L)">
       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 13L13 3"/></svg>
     </button>
@@ -75,9 +81,6 @@
   </div>
 
   <div class="tgroup" role="group" aria-label="Mark up text">
-    <button class="tool" data-tool="highlight" title="Highlight — drag across text (H)">
-      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h10"/><path d="M5 9.5l4.5-6.5 3 2L8 11.5z"/></svg>
-    </button>
     <button class="tool" data-tool="underline" title="Underline — drag across text (U)">
       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4 2v5a4 4 0 0 0 8 0V2"/><path d="M3 14h10"/></svg>
     </button>