diff --git a/media/buttons.png b/media/buttons.png new file mode 100644 index 00000000..660863fa Binary files /dev/null and b/media/buttons.png differ diff --git a/media/commands.png b/media/commands.png index 5c0b25e8..c0f2baf8 100644 Binary files a/media/commands.png and b/media/commands.png differ diff --git a/media/commenting.gif b/media/commenting.gif index 7a5e3400..a52fdec4 100644 Binary files a/media/commenting.gif and b/media/commenting.gif differ diff --git a/media/diff.png b/media/diff.png index c80a1770..cb90b624 100644 Binary files a/media/diff.png and b/media/diff.png differ diff --git a/media/folder context.png b/media/folder context.png deleted file mode 100644 index bf104e06..00000000 Binary files a/media/folder context.png and /dev/null differ diff --git a/media/folderContext.png b/media/folderContext.png new file mode 100644 index 00000000..0f31e257 Binary files /dev/null and b/media/folderContext.png differ diff --git a/media/linter.png b/media/linter.png new file mode 100644 index 00000000..71b76ad8 Binary files /dev/null and b/media/linter.png differ diff --git a/media/newAddon.png b/media/newAddon.png new file mode 100644 index 00000000..48d3a466 Binary files /dev/null and b/media/newAddon.png differ diff --git a/media/reviewPage.png b/media/reviewPage.png new file mode 100644 index 00000000..494a3a9f Binary files /dev/null and b/media/reviewPage.png differ diff --git a/media/reviewpage.gif b/media/reviewpage.gif deleted file mode 100644 index 78ee237e..00000000 Binary files a/media/reviewpage.gif and /dev/null differ diff --git a/src/views/welcomeView.ts b/src/views/welcomeView.ts index 289b9db8..00999f44 100644 --- a/src/views/welcomeView.ts +++ b/src/views/welcomeView.ts @@ -64,115 +64,222 @@ export class WelcomeView { } private _getWebviewContent(mediaFolderSrc: vscode.Uri) { - return ` - - - - - - -

Welcome To Assay

-

A reviewer tool for Mozilla Firefox addons!

-

Instructions

-

API Keys

- -
- You will need a JWT Issuer and a JWT Secret to use Assay. These can be - obtained from the - Mozilla Developer Hub.

- To add them to Assay, under the "Assay" menu, click "Enter API Key" and - "Enter API Secret" respectively.
-

Root Directory

- This extension relies on having a dedicated directory for your reviews. This - is so the guid and versions of an addon are consistently at the same folder - depth. So, decide on a location for where you will perform reviews. Upon - your first request to download an addon, you will be prompted to set the - root folder path. -

- -

- (This can be changed in the extension settings). -

Diff Tool

- -

- To compare folders of addon versions, simply select exactly two folders in - the sidebar. Then, from the context menu, click the command "(Assay) Open in - Diff Tool". If it's your first time, enter the command that would launch the - tool from the cli (e.g: "opendiff"). This will open your desired diff tool - with the two folders as arguments.

- -

- This can be changed in the extension settings. -

- There is also an extension on the VSCode marketplace called - Compare Folders - which is a great tool to use within VSCode. -

Downloading Addons & Versions

-

From an Input

- You can download an addon version directly within VSCode by accessing the - command titled "Review New Addon Version" from the Assay menu. This will - prompt you for an addon identifier as well as the versions. -

- You will require the API keys mentioned above to use this feature. -

From Review Page

- -

- On the review page, there is now a new button titled "Open in VSC" under - each version. This will automatically launch VSCode, perform the download, - and open the manifest in a text editor. -

- You will require the API keys mentioned above to use this feature. -

Reviewing Versions

-

Adding/Removing Comments

- -

- To add a comment, either hover over a line or select multiple lines - and press the 'plus' popup in the gutter. The comment will be saved to cache upon submission and a visual - indicator in the gutter and file tree will be displayed. You can press the indicator - to hide or show the comment as needed. -

- To remove a comment, open the comment and press the 'Delete Comment' button - in the top right corner, represented by an 'X' icon. -

Exporting Comments

- To export the comments to a text format, you can: - -

Opening Review Page

- -

- To open the review page of an addon, there is a taskbar button titled - "{guid} - Review Page". Clicking that will bring you to the review page. -

Updates

- To update the extension, simply look for "(Assay) Check for Updates" in the command palette. - This will automatically update the extension if there is a new version available. - - + return ` + + + + + + + +
+

Welcome To Assay!

+ +
+ +

Set-up

+ +

1. API Keys

+
+ +
Assay's Primary Sidebar.
+
+ You will need a JWT Issuer and a JWT Secret to use Assay. Both of these can be + obtained from the + Mozilla Developer Hub.

+ To add them to Assay for the first time -- +
    +
  1. Navigate to the Assay sidebar.
    2. +
  2. Press 'Enter API Key' and enter the API key.
    3. +
  3. Press 'Enter Secret' and enter the API's secret.
    4. +
+ + Once you've begun installing add-ons, this menu will no longer be visible. + To update your keys, you can open the command palette (Ctrl+Shift+P) + and enter 'Enter API Key' or 'Enter Secret' + to open their respective menus. + +

+ +

2. Root Directory

+
+ +
This can be changed in the extension settings.
+
+ Upon first interacting with Assay, you will be prompted to set the root folder path. + Assay relies on having a dedicated directory for your reviews. + Decide on an empty directory for where you will perform reviews. + +

+ +
+

Usage

+ +

1. Downloading add-ons & Versions

+

A. From VS Code

+
+ +
+ To download an add-on version directly within VSCode: +
    +
  1. Navigate to the Assay sidebar.
    2. +
  2. Press the '+' in the top-right corner of the menu.
    3. +
  3. Input an add-on identifier such as its URL, GUID, etc.
    4. +
  4. Select the version to download.
    5. +
+

B. From Review Page

+
+ +
+ To download an add-on version from AMO: +
    +
  1. Navigate to the add-on's review page.
    2. +
  2. Locate the 'Add-on History' section.
    3. +
  3. Under the desired version, select 'Open in VSC', OR
    4. +
  4. Click the file name of a flagged file.
    5. +
+ This will launch VSCode, perform the download (if needed), + and open the desired file (or manifest if there is none) in a text editor. + +

+ +

2. Linting Versions

+ +
+ +
+ + When open to a specific version, Assay will highlight any lines flagged by addons-linter. + To view a summary of the messages and to jump between them, navigate to the Problems pane of VS Code. + +

+ +

3. Reviewing Versions

+

A. Reviewing Code

+
+ +
+ + To mark or share offending lines: + +
    +
  1. Hover over or select multiple lines and press the '+' popup in the gutter.
    2. +
  2. Here, you can: +
      +
    1. Optionally leave a comment and mark the line for review, or
      2. +
    2. Copy a link to the offending lines.
      3. +
    +
    3. +
  3. Once submitted, you have similar options in the top-right corner: +
      +
    1. Export the comments to your clipboard,
      2. +
    2. Add or edit the comment,
      3. +
    3. Copy a link to the lines,
      4. +
    4. Delete the annotation entirely.
      5. +
    +
    4. +
+ +
+ +
In order: Export, edit, copy, and delete.
+
+

B. Exporting Comments

+ To export the comments to a text format, you can: +
    +
  1. + Navigate to the Assay sidebar and right-click the desired version. Select + 'Export Comments'. +
    2. +
  2. + Press the 'Export Version Comments' button in the top right corner of + any expanded comment. +
    3. +
+

C. Opening Review Page

+
+ +
+ If you are inside a file attributed to a certain review, + to open the review page of an add-on: +
    +
  1. Locate the status bar across the bottom of your window.
    2. +
  2. Locate the button '{guid} - Review Page.
    3. +
  3. Clicking it will bring you to the review page.
    4. +
+ +

4. Diff Tool

+ +
+ +
+ + To compare folders of add-on versions: +
    +
  1. Navigate to the Assay sidebar.
    2. +
  2. Select two versions (Ctrl+Click).
    3. +
  3. Right click and select Open Versions in Diff Tool.
    4. +
+ + If this is your first time diff-ing, Assay will prompt you for a diff command. + Enter the command that would launch your preferred tool from the cli + (ex. "bcomp" for Beyond Compare). This will open your desired diff tool with the + two folders as arguments. + +
+ +
This can be changed in the extension settings.
+
+ +

+ +

5. Updates

+ To update the extension: +
    +
  1. Open the command palette (Ctrl+Shift+P).
    2. +
  2. Look for '(Assay) Check for Updates'.
    3. +
+ This will automatically update the extension if there is a new version available. +
+ + `; } }