Google Git
Sign in
gerrit / plugins / image-diff / refs/heads/master
commite7e9399eec299d3886f96ee1f9c74d7e7c72fbbe[log] [tgz]
authorPaladox none <thomasmulhall410@yahoo.com>Thu Jun 27 15:24:09 2024 +0000
committerPaladox none <thomasmulhall410@yahoo.com>Fri Jun 28 10:30:01 2024 +0000
tree2dd7999658e47defd1203069c538b6b6ce157021
parent18083edfb230f65778056648de72e15588301d56 [diff]
Copy package.json to plugins/package.json in CI

* Copy’s package.json to plugins/package.json as we
  need to include the dep in the output js/build.

* Removes polymer-bridge as a dev dep, as when we copy
  package.json to plugins/package.json, the path to
  polymer-bridge doesn’t work. It’s only used in the tests.
  And even then the tests are broken as they haven’t been adapted.
  We don’t use bower anymore. And this isn’t used in
  production either.

Change-Id: I40d5ad7e04b52ddf1d3a9b616eb6cd35bfe1a66a
3 files changed
tree: 2dd7999658e47defd1203069c538b6b6ce157021
  1. assets/
  2. gr-image-diff-tool/
  3. gr-opacity-diff-mode/
  4. gr-resemble-diff-mode/
  5. playbooks/
  6. test/
  7. external_package.json ⇨ package.json
  8. .eslintrc.json
  9. .gitignore
  10. .zuul.yaml
  11. bower.json
  12. BUILD
  13. LICENSE
  14. package-lock.json
  15. package.json
  16. plugin.js
  17. README.md
  18. rollup.config.js
  19. 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

The build requires to be done from an existing Gerrit tree. All commands below are relative to the root of a copy of Gerrit.

  1. Clone the image-diff repository into the plugins folder of the gerrit repo, or link the image-diff plugin folder to gerrit/plugins folder.
  2. Override Gerrit plugins/package.json with the plugin package.json:
ln --symbolic --force image-diff/package.json plugins/package.json

You can remove all depDependencies from plugins/package.json as they are not needed for the build (they are only needed for running wct tests).

  1. run bazel build plugins/image-diff

Highlight Mode

Highlight example

This mode uses the Resemble.JS library.

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.

To update dependencies amend package.json then from the root of the Gerrit repository execute yarn to refresh the yarn.lock lock file:

bazel run @yarn//:yarn install -- --cwd plugins/image-diff install
git add package.json yarn.lock

Then since developers tend to use npm directly, refresh the package-lock.json as well:

npm update

Add package.json, package-lock.json and yarn.lock to your git commit.

Authors

  • Jack Zheng
  • Raeggin Williams
  • Kasper Nilsson