How it works?

Architecture

Components

BackgroundManager

The BackgroundManager runs as a background script in the background page listening for changes in URL. When the URL of any google chrome browser tab changes, the callback function handleURLChange() will be called. This function parses the URL received and sends a process-the-page message to the PageControlDelegator component if the URL is within GitHub's domain otherwise, it goes back to sleep until another URL change event occurs.
PageControlDelegator

When this component is called to process the webpage, it reads meta-data found within the head of the DOM in order to determine if LabelPageController (when the user is at the create new labels page) or IssuePageController (when the user is at an issue page) should be called.
LabelPageController

This component handles the replacement of Github's fixed color palette on its create new labels page with Git Label's colorpicker. In addition, it handles the logic, styling and events of the colorpicker and its interactions with the create new labels page.
IssuePageController

The IssuePageController parses the DOM on the issue page or make GET requests to retrieve existing labels that the user has created for that repository. Besides retrieving labels, this page controller handles the logic and POST requests required to apply the relevant changes resulting from the user's selection or unselection of labels. Furthermore, it is responsible for populating the ItemStorage component using the label data retrieved and calling of the LayoutManager component.
LayoutManager

This component is responsible for applying the relevant UI changes to the issue page using data stored in the ItemStorage component. The LayoutManager relies on the various factories (SidebarFactory, LaunchButtonFactory, SelectedLabelsFactory, SearchFactory, LabelGroupsFactory) to construct and return individual parts of the UI for it to place in the proper locations within the overall UI.
ItemStorage

The ItemStorage component is like a model. Its primary purpose is to store data about label data that has been retrieved from the DOM or GET requests and allow other components that need label data to retrieve from it. Components that handle user selection or unselection of labels will also update the label's selection status via ItemStorage.
SidebarFactory

This component constructs the necessary HTML for rendering the sidebar and attaches required events handlers and logic to the sidebar DOM element constructed.
LaunchButtonFactory

This component constructs the necessary HTML for rendering the launch button and attaches required events handlers and logic to the launch button DOM element constructed.
SelectedLabelsFactory

This component constructs the necessary HTML for rendering the selected labels panel above the search bar and attaches required events handlers and logic to the selected labels panel DOM container constructed. The event handlers primarily handle events published by other components such as SearchFactory and LabelGroup regarding user's selection or unselection of labels. The attached logic handles the the resolution of conflicts among labels from exclusive groups. Any selection or unselection of labels that logic makes will be published as events for other components (i.e. LabelGroup) to consume.
SearchFactory

This component constructs the necessary HTML for rendering the search bar and attaches required events handlers and logic to the search bar constructed. The event handlers primarily handle key press events initiated by the user. The attached logic will handle how search terms are parsed and search lists are populated.
LabelGroupsFactory

This component constructs the necessary HTML for rendering label groups and attaches required events handlers and logic to the LabelGroup components. The event handlers are used for reacting to events published by other components regarding the selection status of labels and controlling the expand-collapse animation of group containers containing the labels. The attached logic will handle the selection and unselection of labels and publish events for other components to consume when users select or unselect labels from the LabelGroup component.