Bonfire's browser extension allows you to take screenshots of the web application you are on, annotate the screenshots, and add files from your computer before submitting them to an issue in JIRA

Attaching screenshots and files

This section describes the different ways that you can attach screenshots and files to new or existing issues.

Attaching screenshots to a new issue

Bonfire allows you to attach screenshots of your web application to the issue you are creating.

Once attached, the create issue form will also show a live thumbnail preview of what the screenshot will look like. When a screenshot is attached, the right hand panel of your browser window becomes your screenshot annotation tool.

To return to your web application, click the "Hide Screenshot" button, then click "Take Screenshot" again to add another screenshot.

As Chrome and Safari don't have a permanent sidebar, we've added an indicator to the Bonfire icon to show that issue creation is still in progress. You can click this icon at any time to add another screenshot.

To remove an attachment, hover over the thumbnail and click the delete icon in the bottom right.

To change the name of an attachment, click the name or the pencil icon to enter "edit mode", then press enter or click the tick icon to save the new name. 

Attaching files to a new issue

To add non-screenshot files from your computer, click the "Add File" button, which presents you with a file picker. You can select multiple files by shift-clicking or ctrl-/cmd-clicking. 

Image file attachments will show a thumbnail preview, and all file attachments can also be renamed before sending to JIRA.

In Chrome, Safari 6 and Firefox, you may also drag and drop files into Bonfire to attach them. 

Paste images from the clipboard

You can add image attachments directly from your computer's clipboard to Bonfire. This allows enormous flexibility in the process of quick issue creation, and provides a fast integration with native operating system screenshot-to-clipboard tools – great for teams using Bonfire for non-browser applications.

Simply copy a screenshot to the clipboard using your chosen method (e.g. Cmd+Shift+Ctrl+4 for Mac OS X, or Alt+Prt Sc for Windows), then press the "Paste" button in Bonfire to add the attachment. This works with any image data in the clipboard (such as the "Copy Image" context menu option in a lot of browsers).

Note: This feature is not available in the Safari extension due to Safari security permissions.

Attaching screenshots and files to an existing issue

You can also add attachments to an issue that already exists in JIRA. To do this, simply click on the "Existing..." button, which will give you the option to pick an issue. The last issue you worked with in Bonfire will be auto-selected by default. Anything that can be attached to an issue during c

It is also possible to add a comment when attaching files to an existing issue. All image attachments will be added to the comment as thumbnails for better context. You can also choose to have the browser's information (user agent string) added to the end of the comment for greater detail about the testing environment.

Annotate any attached image before submitting

You can add annotations to any image in your attachments list. This includes screenshots, pasted images and images attached via the "Add File" dialog or drag-and-drop.

Just click on the thumbnail to start annotating. All annotations are remembered with the images, so you can go back and add/edit/remove annotations for any of your images before sending them to JIRA.

The image currently being annotated can be identified by a green border.

キーボードショートカット

Bonfire allows you to configure a keyboard shortcut to take a screenshot at any time. This allows you to capture bugs that might only occur during mouse interaction.

The configuration can be set in the server settings overlay in the browser extension's sidebar.

Annotations

Annotations are only available when you have selected to attach a screenshot to the current issue. Bonfire provides you a range of annotation tools to mark up your screenshot. When the issue is created, the final annotated screenshot will be attached.

ツール	説明
	Selection - Click to select any existing annotation. Click and drag to move an annotation. Once an annotation is selected it can also be resized (rectangle, ellipse, line, arrow, blur tools only) or edited (text tool only). Press Delete or Backspace with an annotation selected to remove it.
	Rectangle - Click and drag to draw a rectangle. You can also hold shift while dragging to draw a square.
	Ellipse - Click and drag to draw an ellipse. You can also hold shift while dragging to draw a circle
	Line - Click and drag to draw a line. You can also hold shift to draw vertical, horizontal, or diagonal lines.
	Arrow - Click and drag to draw an arrow shape. You can also hold shift to draw vertical, horizontal, or diagonal lines.
	Pencil - Click and drag to draw a free-hand line.
	Text - Click to insert text onto the screenshot. Press Escape or Ctrl+Enter to save the text.
	Magnify - Click and drag to magnify a portion of the screenshot
	Blur - Click and drag to blur out a portion of the screenshot. Useful for hiding sensitive information. (Not available for IE 7 & 8.)
	Crop - Click and drag to crop the screenshot. Only the cropped section will be attached to the issue. (Not available for IE 7 & 8.)
	Color - Pick the color you want to use for your annotation tools. Use with a selected annotation to change its color.
	Line Width/Font Size - Changes the width of the line or the font of the text. Use with a selected annotation to change its size.
	Clear - Clears all the annotations applied to the screenshot.