Giter Club home page Giter Club logo

bors-armor's Introduction

bors-armor

Visual chrome for using Bors' Github integration with the Chrome Browser

Replace the existing merge options on a Github Pull Request with a button that comments on the Pull Request with "bors r+"

Screenshot from 2019-08-25 14 46 19

Getting Started

  1. Clone the repo and run yarn install to fetch the dependencies
  2. Build the extension locally with yarn build to generate the output files in a format Chrome will accept
  3. Load the unpacked extension from the /build directory in the repository
  4. Change the code, run yarn build and reload the extension, to see the changes in action!

Architecture

Chrome has a standard set of architecture patterns it recommends for all extensions (at least until the Manifest V3 changes roll out!). This involves a few different moving parts which communicate via message passing. Let's break this down by section and discuss each one and how they fit together to protect our repos from dastardly merges.

Content Script

The content script alters the Github page for any repos protected by Bors Armor. The manifest.json file sets the content script to run on document_end. The content script first checks if it should run, and if so does the following:

  1. Identify the merge panel, which is where Github stores most metadata and actions related to merging a Pull Request into the base branch (generally "master")
  2. Copy an existing "merge-status" item for one of the supported merge strategies on Github (merge, squash, rebase) and replace it with Bors-specific language, hiding other strategies
  3. Copy an existing "merge-button" item for one of the supported merge strategies on Github (merge, squash, rebase) and replace it with Bors-specific language, hiding other strategies. This is where the majority of the UI logic lives. When creating the Bors button for use in the Github UI, the existing Github status checks are used to determine whether the button should be disabled or not.
  4. Copy an existing "button group" for one of the supported merge strategies on Github (merge, squash, rebase) and replace it with Bors-specific language, hiding other strategies

The strategy of copying existing UI elements used for other merge strategies rather than building new elements from scratch for Bors Armor is intended to be robust against Github UI changes, since that's out of the control of this extension.

Popup

The popup is a browser_action that initially checks whether the current URL is protected and alters it's own UI to reflect the current state of the repository being viewed. Once the initial state has been set it allows either activating or deactivating a Github repository by sending a message to the background page to alter the list of stored repository URLs. It then optimistically updates the popup UI.

Background Page

The background page essentially functions as a primitive service worker. The background page is intended to tie together functionality across the various user-visible parts of the Chrome extension and within the content script. However, Bors Armor was initially developed as a single content script that ran on every Github repository and then was refactored heavily to use the background page and popup systems common in Chrome extensions. With additional work the background page could probably be used more effectively to direct when the content script runs and ensure Bors Armor remains active even when Github refreshes their UI in the background.

As it stands the background page is responsible for various disparate functionality:

  1. Initialize the storage for Bors Armor. By default, the Bors Armor repository is protected.
  2. Set the Page Action to active for Github URLs
  3. Listen for messages from the popup adding/removing Github repositories
  4. Respond to the content script when it attempts to run for a specific browser tab

Development Notes

In developing Bors Armor, three distinct Github Pull Request UIs need to be taken into account

  1. A repo without any status checks enabled
  2. A repo with non-Bors status checks enabled
  3. A repo with Bors enabled as a status check (Bors' status check remains in a pending state until after it first attempts a merge)

Distribution

To package Bors Armor for distribution run yarn zip and upload the bors-armor.zip output file to the Chorme Web Store.

Acknowledgements

Current icon Armor by lastspark from the Noun Project

bors-armor's People

Contributors

cbzehner avatar

Watchers

 avatar

bors-armor's Issues

Use the primary comment box for submission

If there are open comments on the page, use the primary comment box rather than posting in the first open comment box in the page.

This is likely an issue with the query selectors.

How to handle status checks?

Initially Bors Armor assumed that failing a status check (code) would be a sign that Bors should not be used and thus disabled the button.

However, there are some real world cases where it's acceptable to merge past a failing status check (see description of #20).

How should failing status checks be handled?

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.