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;
 }