Google Git
Sign in
gerrit / plugins / image-diff / 78d4cb46eb9d6cb1cd0f84f73f61110819b7a830
commit78d4cb46eb9d6cb1cd0f84f73f61110819b7a830[log] [tgz]
authorTao Zhou <taoalpha@google.com>Thu Jun 25 17:29:24 2020 +0200
committerTao Zhou <taoalpha@google.com>Thu Jun 25 17:29:24 2020 +0200
treec68c80c1c52a07854d4d9992fcc1a1fec12c5b4e
parent2bbbda08f212489ed0ef5d2fb82e680f7cb685f3 [diff]
Use appendChild instead of innerHTML for security reason

Change-Id: I2d889d4356e3b1e9a72fd4c165cc47a1789b2a64
1 file changed
tree: c68c80c1c52a07854d4d9992fcc1a1fec12c5b4e
  1. assets/
  2. gr-image-diff-tool/
  3. gr-opacity-diff-mode/
  4. gr-resemble-diff-mode/
  5. test/
  6. .eslintrc.json
  7. .gitignore
  8. bower.json
  9. BUILD
  10. LICENSE
  11. package-lock.json
  12. package.json
  13. plugin.js
  14. README.md
  15. rollup.config.js
  16. yarn.lock
README.md

Image Diff

A plugin that provides a rich image diffing experience in PolyGerrit. Currently, the plugin features two modes: Highlight Mode and Onion Skin.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Build

  1. Clone the package into plugins folder of gerrit repo or link the plugin folder to gerrit/plugins folder
  2. Override plugins/package.json with package.json, you can remove all depDependencies as they are not needed for the build (needed for running wct tests)
  3. Run bazel build plugins/image-diff

Highlight Mode

Highlight example

This mode uses the Resemble.JS (1.2.1) library in its development The following features are included in this mode:

  • Percentage of difference between the images
  • Ability to ignore color in the comparison
  • Ability to make the diff color more discernible
  • Change the diff color
  • View the diff in full screen

Onion Skin

Opacity example

Onion Skin mode is a great way for users to notice changes in the images that might be overlooked when you look at them side by side. By overlaying the new image on top of the old image, the users can change the opacity to see the transition that were made.

The following features are included in this mode:

  • Scale the new image to the same size as the old image
  • Changing the opacity of the top image

Testing

This plugin uses polymer-cli to test.

Inside your image-diff repo, run polymer serve to start a local web server and open localhost:8080/test to view your tests. See here for more info.

Or run npm run wct-test to run all your tests.

Development

Reference here on how to set up your Gerrit testsite and here for PolyGerrit plugin development.

Authors