Giter VIP home page Giter VIP logo

francewhoa / screenshots Goto Github PK

View Code? Open in Web Editor NEW

This project forked from mozilla-services/screenshots

0.0 1.0 0.0 20.83 MB

Firefox Screenshots: the best way to take screenshots on the web.

Home Page: https://screenshots.firefox.com

License: Mozilla Public License 2.0

Shell 0.75% CSS 0.09% HTML 0.20% JavaScript 22.38% Makefile 0.41% Python 9.09% FreeMarker 64.14% Dockerfile 0.01% SCSS 2.92%

screenshots's Introduction

CircleCI Build Status

Screenshots server status page

Clarifying the Future of Firefox Screenshots


Important Note

The frontend for screenshots is now maintianed in mozilla-central. Bugs should now be filed in bugzilla under Firefox::screenshots. This repo currently contains server code that has been disabled. We are archiving this repo, and all future bugs should be directed to bugzilla.


This is a screenshot tool for Firefox. It is available in Firefox 56 and later versions, as part of the default Firefox distribution.

The project was initially launched through Test Pilot as Page Shot.

It is made up of both an add-on (using WebExtensions) and a website using Node.js. The add-on is in webextension/, and the website is in server/

Ian has been blogging about the design, definition, and development process.

(This project used to include general page freezing; this functionality has been forked off into pagearchive.)

You can find more information about Firefox Screenshots at the Mozilla Wiki page: https://wiki.mozilla.org/Firefox/Screenshots

Installation and Setup

Install Nightly or Developer Edition.

(Skip this step if you do not want to run a local server.) Install Postgres. And do one of the following:

Install Node.js. Version 8.x is required.

Clone the repository. Navigate to the project directory and run npm install.

There are two scripts to run the server locally and develop the add-on:

  • ./bin/run-server will run the server on http://localhost:10080 and automatically restart if there are changes.
    • If nodemon crashes you can try to start the server with ./bin/run-server --restart
    • Take a look at and/or source .env.dev for some of the options available through environment variables.
  • ./bin/run-addon will build a few parts of the addon (into addon/webextension/build/) and start Firefox with the add-on installed. The add-on will be refreshed automatically as you change files. We recommend you open about:debugging to help debug the extension.
  • ./bin/run-addon --setup-profile will setup a Firefox profile for your development; this way you can make persistent changes to the profile that you will use just for Screenshots development. (note: this will only look for the firefox command or Nightly, Developer Edition, Aurora editions on OSX)

If you want to develop the add-on but not the server you can run ./bin/run-addon -s https://screenshots.dev.mozaws.net

By default, Screenshots will connect to a Postgres database on localhost:5432. To change which database and user it connects to set/export the environmental variables: RDS_USERNAME, RDS_PASSWORD, and RDS_HOSTNAME

The server will automatically setup the tables in your database, and keep them up to date over time (using pg-patcher).

If you have growl and growlnotify installed on Mac OS X, you will get growl notifications when the server build has started and completed.

We apologize but we have no story for development on Windows (though the add-on runs on Windows). We welcome feedback.

Linting and Testing

npm run test will run tests as well as eslint. You can control the tests with the following shell/environment variables:

  • MOZ_HEADLESS - when this variable is set, the Selenium tests will run in headless mode.
  • SCREENSHOTS_BACKEND - the server where the addon will try to save shots if the default http://localhost:10080 is not available or desirable.

For example, MOZ_HEADLESS=1 SCREENSHOTS_BACKEND=https://screenshots.dev.mozaws.net npm run test will run the tests headlessly against https://screenshots.dev.mozaws.net.

npm run test:server will run the server tests. This require Python and the local server running on http://localhost:10080.

Getting to know the code

There is documentation in webextension/, webextension/background/, and webextension/selector/ that talks about the code layout and architecture of the webextension.

server/view-docs.md talks about how the server React pages are setup, along with the server-side rendering of pages.

There is also documentation in docs/.

Participation

There is an IRC channel #screenshots on irc.mozilla.org (you can use this link for chat access via the web if you do not otherwise use IRC). There are IRC logs available.

If you'd like to contribute code, start with our good-first-issue bugs. If there aren't many of them, or they don't seem too interesting, the Stretch milestone contains things we'd like to get to, but aren't a high priority. If you're interested in working on an issue, it's a good idea to comment in the issue on github, or say hello on IRC, so that we can double-check that the issue is still good, provide any context you might need, and assign it to you.

Planning and ideation is happening in the issue tracker. We have several milestones:

Issue tags otherwise aren't very structured. Research is primarily analysis of other products that do something interesting, or some source material that could provide insight. Input on these (things like "I like this product because...") is very helpful!

We do some research on other projects, collecting the results in this Google Drive folder.

Localization

Firefox Screenshots localization is managed via Pontoon, not direct pull requests to the repository. If you want to fix a typo, add a new language, or simply know more about localization, please get in touch with the existing localization team for your language, or Mozilla’s l10n-drivers for guidance.

screenshots's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.