At the moment there are only two views, a summary view and a screenshot view.
When you open the page you will see an unfiltered view of all the screenshots. Use the menus to select which screenshots are shown.
To see details of a screenshot click on the screenshot.
To compare two similar sets of screenshots (e.g. versions of the same screenshots from two versions of Chrome):
To install the UI Catalog development environment from scratch (on Linux, not tested on other OSs):
Checkout the infra repository from git and go into the UI Catalog directory within its its workspace
fetch infra cd infra/appengine/ui_catalogue
If you don‘t already have them installed, install nodejs and npm following the instuctions in https://cloud.google.com/nodejs/docs/setup. Just doing
sudo apt-get install nodejs won’t work, since it will install a version of nodejs without npm.
npm install -g bower
Install the Polymer CLI:
npm install -g polymer-cli
Install the Polymer libraries using bower (the libraries are listed in bower.json):
For local use there is no need to build the the viewer.
You can run a local Catalog Viewer using pylib/local_server.py.
pip install virtualenv virtualenv [new virtualenv directory] . [virtualenv directory]/bin/activate
pip install -r local_ui_server.pip`
Having set up your python environment you can then run the UI Catalog Viewer:
You can use the UI Catalog to view screenshots generated either by the bots or by a local test run
If you created a virtualenv, start it using
. [virtualenv directory]/bin/activate`
Start the local server with the command:
python pylib/local_server.py [screenshot description url]
screenshot description url is either the “ui screenshots” link output by the chrome_public_test_apk step on the bots, or that printed at the end of a local run of the instrumention tests.
The locally runnable version of the viewer can be packaged into a single file for distribution using PyInstaller
Install as above
pip install pyinstaller
Build the server:
This will create the executable file
pyinstall/dist/local_server containing everything needed to run the viewer. To run it, simply run this file from the command line. The file can be copied to other locations and will still work.
Install as above then:
To deploy to staging run:
This will deploy to chrome-ui-catalog-staging
To deploy to production run:
This will deploy to chrome-ui-catalog
On checkout the top level directory contains three subdirectories:
The top level directory contains index.html, the Makefile, and various configuration files for building and testing the Viewer.
When the Viewer is built three additional directories may be created:
There are two sets of tests. The Polymer front end tests use the Polymer Test framework. They are run using the command
Note that the Python 3.3 unittest.mock package is backported into Python 2.7 as mock.