Updated Readme, added contibution link.

README.md

@@ -11,10 +11,56 @@ This extension **inverts brightness** of web pages and aims to **reduce eyestrai
 
 If some site is **already dark**, you can **add it to [dark_sites.json](https://github.com/alexanderby/darkreader/blob/master/src/config/dark_sites.json) file** *(please, preserve alphabetical order)*.
 
-If some **parts** of web-pages are **wrongly inverted**, you can specify necessary **CSS selectors** at **[sites_fixes_v2.json](https://github.com/alexanderby/darkreader/blob/master/src/config/sites_fixes_v2.json) file** *(please, preserve alphabetical order by URL, use short selectors, preserve whitespace indentation and code style)*.
+If some **parts** of web-pages are **wrongly inverted**, you can specify necessary **CSS selectors** at **[fix_inversion.json](https://github.com/alexanderby/darkreader/blob/master/src/config/fix_inversion.json) file** *(please, preserve alphabetical order by URL, use short selectors, preserve whitespace indentation and code style)*.
 
 Notice that merged changes to these files are automatically delivered to all users **within 15 minutes**.
 
+#### Using Dev Tools
+
+- Open **Chrome Dev Tools** (F12).
+- Click on **element picker** (top-left corner).
+- Pick wrongly inverted element.
+- Choose a **[selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)** for that element or all similar elements (e.g. if element has `class="x-icon small"` selector may look like `.x-icon`).
+- Click **Dark Reader icon**.
+- Click **Open developer tools** (at bottom).
+- Under `sites` section add a block containing URL and selectors to invert.
+```json
+...
+"sites": [
+    {
+        "url": "example.com",
+        "invert": ".x-icon"
+    }
+]
+```
+- It is also possible to specify multiple selectors (comma-separated list or an array) and custom CSS rules. If chosen element contains images or other content that becomes wrongly displayed, `noinvert` rule can be used. `removebg` removes background image from element.
+```json
+...
+"sites": [
+    {
+        "url": "example.com",
+        "invert": [
+            ".x-icon, .x-button",
+            "#player .player-button"
+        ],
+        "noinvert": "#player *",
+        "removebg": ".bg-photo",
+        "rules": ".overlay { background: rgba(255,255,255,0.5); }"
+    }
+]
+```
+- Click **Apply**.
+- If the **fix worked** open **[fix_inversion.json](https://github.com/alexanderby/darkreader/blob/master/src/config/fix_inversion.json) file**.
+- Click **edit** (sign-in to GitHub first).
+- **Insert your fix** there. Preserve **alphabetical order** by URL, use 4 spaces for indentation.
+- Provide a **short description** of what you have done.
+- Click **Propose file change**.
+- Review your changes. Click **Create pull request**.
+- The Travis CI will run tests reviewing your changes.
+- If you see a **red cross** click **Details** and see what is wrong.
+- When you see a **green checkmark** than everything is fine.
+- Dark Reader developer will **review** and merge your changes making them available for all users.
+
 ### Adding new features or fixing bugs
 
 If you would like to **add new feature** to Dark Reader or **fix a bug**, **submit an issue** in GitHub (if there is no existing one), **discuss** it with active contributors, wait for **approvement**.

src/background/extension.ts

@@ -410,7 +410,7 @@ style && style.parentElement.removeChild(style);
          * installed in system.
          */
         protected getFontList(onReturned: (fonts: string[]) => void) {
-            if (typeof chrome.fontSettings !== 'function') {
+            if (!chrome.fontSettings) {
                 // Todo: Remove it as soon as Firefox and Edge get support.
                 setTimeout(() => onReturned([
                     'serif',

src/popup/popup.ts

@@ -32,9 +32,6 @@
         popupWindow = getMockPopup();
     }
 
-    // Disable text selection
-    document.onselectstart = (e) => false;
-
     /**
      * Mock for tests.
      */
@@ -63,7 +60,7 @@
                 'Segoe UI',
                 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
             ],
-            getActiveTabInfo: function(callback) { callback({ host: 'server1.mail.veryverylongnameveryverylongnameveryverylongnameveryverylongname.com' }); }
+            getActiveTabInfo: function (callback) { callback({ host: 'server1.mail.veryverylongnameveryverylongnameveryverylongnameveryverylongname.com' }); }
         }));
     }
 }

src/popup/style/_dev_tools.less

@@ -32,6 +32,10 @@
         right: 0;
         top: 0;
     }
+
+    .description:first-child {
+        text-transform: uppercase;
+    }
 
     .inversionFixEditor {
 
@@ -59,4 +63,8 @@
             }
         }
     }
+
+    a {
+        color: @color-description;
+    }
 }

src/popup/style/_toggle.less

@@ -9,6 +9,7 @@
     box-sizing: content-box;
     display: flex;
     position: relative;
+    user-select: none;
 
     .on, .off {
         color: @color-fore;

src/popup/style/_up_down.less

@@ -76,6 +76,7 @@
     border: @size-border solid @color-border;
     overflow: hidden;
     position: relative;
+    user-select: none;
     width: 100%;
 
     .value {

src/popup/style/style.less

@@ -44,6 +44,11 @@ html {
     }
 }
 
+::selection {
+    background-color: @color-header;
+    color: @color-input-fore-active;
+}
+
 .hidden {
     display: none !important; // Is overriden at least for .CheckBox .text
 }

src/popup/ui/dev_tools.ts

@@ -55,7 +55,17 @@ module DarkReader.Popup {
                             text: 'Apply',
                             onClick: () => markup.onApply(this.inversionFixText)
                         })
-                    ])
+                    ]),
+
+                    new xp.Html({
+                        html: `
+                            <div class="description selectable">
+                                Read about this tool <strong><a href="https://github.com/alexanderby/darkreader#how-to-contribute" target="_blank">here</a></strong>. If a <strong>popular</strong>
+                                website looks incorrect e-mail to
+                                <strong>[email protected]</strong>
+                            </div>
+                        `
+                    })
                 ])
 
             ]);