Add variables list view to options page

.eslintrc

@@ -39,6 +39,8 @@
     "CLICK_TYPES": false,
 
     "BROWSERS": false,
-    "CURRENT_BROWSER": false
+    "CURRENT_BROWSER": false,
+
+    "addClickToCopy": false
   }
 }

CHANGELOG.md

@@ -1,6 +1,7 @@
 # 3.0.0
 
 * Fix Chrome rules matching against `_`, now matches against special characters instead
+* Add variables view to last download in options
 * Fix routing failing in some cases (regression) (#80)
 * Fix last used access key not working at all (Chrome)
 

_locales/en/messages.json

@@ -304,6 +304,14 @@
     "message": "Capture groups"
   },
 
+  "o_lRoutingVariables": {
+    "message": "Variables"
+  },
+
+  "o_lRoutingVariablesClickToSee": {
+    "message": "Click to reveal"
+  },
+
   "o_lRoutingLastDownloadHelp": {
     "message": "Test your current rules, applied to the last downloaded file"
   },

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_extensionName__",
   "description": "__MSG_extensionDescription__",
-  "version": "2.7.4",
+  "version": "3.0.0",
   "default_locale": "en",
 
   "applications": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "save-in",
-  "version": "2.7.4",
+  "version": "3.0.0",
   "license": "MIT",
   "scripts": {
     "build": "env -u WEB_EXT_API_KEY -u WEB_EXT_API_SECRET web-ext build --overwrite-dest -i test docs yarn.lock yarn-error.log",

src/index.js

@@ -64,7 +64,8 @@ window.init = () => {
     }
 
     if (options.enableLastLocation) {
-      const lastUsedTitle = lastUsedPath || browser.i18n.getMessage("contextMenuLastUsed");
+      const lastUsedTitle =
+        lastUsedPath || browser.i18n.getMessage("contextMenuLastUsed");
       const lastUsedMenuOptions = {
         id: `save-in-_-_-last-used`,
         title: setAccesskey(lastUsedTitle, options.keyLastUsed),

src/messaging.js

@@ -27,15 +27,30 @@ browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
       });
       break;
     case MESSAGE_TYPES.CHECK_ROUTES:
+      const lastState =
+        (request.body && request.body.state) ||
+        (window.lastDownloadState != null && window.lastDownloadState);
+
+      const interpolatedVariables = lastState
+        ? Object.keys(Variable.transformers).reduce(
+            (acc, val) =>
+              Object.assign(acc, {
+                [val]: Variable.applyVariables(
+                  new Path.Path(val),
+                  lastState.info
+                ).finalize()
+              }),
+            {}
+          )
+        : null;
+
       sendResponse({
         type: MESSAGE_TYPES.CHECK_ROUTES_RESPONSE,
         body: {
           optionErrors: window.optionErrors,
-          routeInfo: OptionsManagement.checkRoutes(
-            (request.body && request.body.state) ||
-              (window.lastDownloadState != null && window.lastDownloadState)
-          ),
-          lastDownload: window.lastDownloadState
+          routeInfo: OptionsManagement.checkRoutes(lastState),
+          lastDownload: window.lastDownloadState,
+          interpolatedVariables
         }
       });
       break;

src/options/options.html

@@ -285,14 +285,27 @@ <h4>Moving downloads into different directories</h4>
                 </td>
                 <td style="font-family: monospace; text-overflow: hidden; overflow: hidden; white-space: nowrap; max-width: 80%;" id="last-dl-url">__MSG_o_lRoutingLastDownloadEmpty__</td>
               </tr>
-              <tr class="hi2de" id="rules-applied-row">
+              <tr id="rules-applied-row">
                 <td style="font-weight: 600; padding: 0; text-align: left;">__MSG_o_lRoutingRenamedTo__</td>
                 <td style="font-family: monospace; word-break: break-all;" id="last-dl-match">__MSG_o_lRoutingNoMatches__</td>
               </tr>
               <tr class="hide" id="capture-group-rows">
                 <td style="font-weight: 600; padding: 0;">__MSG_o_lRoutingCaptureGroups__</td>
                 <td style="font-family: monospace; word-break: break-all;" id="last-dl-capture"></td>
               </tr>
+              <tr class="hide" id="variables-table-row">
+                <td style="font-weight: 600; padding: 0;">
+                  __MSG_o_lRoutingVariables__
+                </td>
+                <td>
+                  <div class="button" id="see-variables-btn">__MSG_o_lRoutingVariablesClickToSee__</div>
+                  <table id="variables-table">
+                    <tbody class="hide" id="variables-body">
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+              </tr>
             </tbody>
           </table>
         </div>

src/options/options.js

@@ -63,6 +63,42 @@ const updateErrors = () => {
       lastDlMatch.textContent = body.routeInfo.path;
     }
 
+    // Variables
+    if (hasLastDownload) {
+      document
+        .querySelector("#variables-table-row")
+        .classList.toggle("hide", !hasLastDownload);
+    }
+    document
+      .querySelector("#see-variables-btn")
+      .addEventListener("click", () => {
+        if (body.interpolatedVariables) {
+          const tableBody = document.querySelector("#variables-body");
+          tableBody.classList.toggle("hide");
+          tableBody.innerHTML = "";
+
+          Object.keys(body.interpolatedVariables).forEach(key => {
+            const val = body.interpolatedVariables[key];
+
+            const variableRow = document.createElement("tr");
+
+            const nameEl = document.createElement("td");
+            nameEl.textContent = key;
+            nameEl.classList.add("click-to-copy");
+            nameEl.classList.add("code");
+            addClickToCopy(nameEl);
+
+            const interpolatedEl = document.createElement("td");
+            interpolatedEl.style.fontFamily = "monospace";
+            interpolatedEl.textContent = val;
+
+            variableRow.appendChild(nameEl);
+            variableRow.appendChild(interpolatedEl);
+            tableBody.appendChild(variableRow);
+          });
+        }
+      });
+
     // Capture groups
     const hasCaptureMatches =
       body.routeInfo && Array.isArray(body.routeInfo.captures);
@@ -83,6 +119,8 @@ const updateErrors = () => {
 
           const code = document.createElement("code");
           code.innerText = `:$${i + 1}:`;
+          code.classList.add("click-to-copy");
+          addClickToCopy(code);
           div.appendChild(code);
 
           const value = document.createElement("div");

src/options/style.css

@@ -58,6 +58,7 @@ html {
   min-height: 1%; /* Firefox options page height hack */
 }
 
+.code,
 code,
 pre {
   font-family: monospace;
@@ -70,6 +71,7 @@ pre {
   overflow-x: auto;
 }
 
+.code,
 code {
   padding: 4px;
 }