Skip to content

Options

Jump to bottom
cubeleco edited this page Oct 5, 2021 · 5 revisions

Keyboard Shortcuts

Toggle extension: will toggle the display of image data on all pages like the toolbar button.

This is a command/extension shortcut, to edit:

  • In Firefox go to about:addons > gear icon (top right) > Manage Extension Shortcuts
  • In Chrome go to chrome://extensions/shortcuts

Quick toggle: will also toggle the display of image data, but only when held down. So if the state before pressing this shortcut is off, it will then be on while the key combination is held down and then off when released. To disable this shortcut, focus the text field and press Escape.

Options

Minimum Resolution: Images, on the page, smaller than either the minimum width or height will not get or show image data. So if the minimum is 0x40, 18x20 will be blocked, but 18x42 will be shown.

Data JSON

The data JSON text area is a JSON array composed of image data identifier strings in the user's desired display order. All values that do not match one of these values will be displayed as text including unicode characters. If you want the old separator for the scaled resolution it is this unicode character \u2922. If the text entered is not valid JSON, the border of the text area will turn red. The following is all of the case-sensitive data identifiers and what they display:

  • width - width of the image file in pixels
  • height - height of the image file in pixels
  • scaledWidth - width of the image on the webpage in pixels
  • scaledHeight - height of the image on the webpage in pixels
  • pixels - total number of pixels in the image (i.e. width * height)
  • name - file name
  • extension - file type. Read from the file's URL; may be incorrect or missing (e.g. image.svg.png)
  • perfSize - file size using the Performance API. Faster and does not use header request
  • sizeh - file size (content-length: header value)
  • modifiedh - when the image file was last modified
  • mimeh - mime type. More accurate than extension
  • domain - domain name of the server the file is hosted on
  • alt - alternative text. Used by screen readers to describe the image
  • br - adds a line break / newline / a <br> element

h requires header request, and may be wrong or empty on the options page preview

Custom CSS

Positioning can be fine tuned with CSS position properties (e.g. bottom: 10px; right: 10px;). The follow cursor and tool tip position modes can be constrained to follow a single axis of the cursor:

  • To follow just the horizontal movement use top: or bottom:
  • To follow just the vertical movement use left: or right:

Transitions

When image data is shown or hidden, the visibility and opacity CSS properties are set; allowing for smooth transitions. The initial fade in won't work unless the Display delay option is set above 0.

Example 800 millisecond fade in and out

transition: visibility 0.8s, opacity 0.8s ease;

Example 500 millisecond fade in and no fade out

transition: visibility 0s, opacity 0.5s ease;

Clone this wiki locally