Version 5.1.0 (#64)

* reworked metadata loading:
* use configurable value for metadata batch size
* send retrieved metadata to requesting tab as each batch finishes

* include gulp-print utility for debugging during development

* markdown lint file for document parts

* filter panel component tweaks:
* group i18n labels into one object
* avoid excessive use of `$scope.apply()`

* include jquery before angular on management page

* adjust drag n drop filter import for (occasionally) missing dataTransfer

* adjust message.action check in runtime onMessage handlers for consistency

* docblock updates

* move placeholder toggle logic (for content script) into a function

* use filter name in debug logs for CSSFilter class

* adjust TODO note to also mention galleries and folders

* change log message severity to info when deviations are missing metadata

* make return statements consistent

* updated pnpm shrinkwrap

* allow option descriptions to use HTML

* (WIP) allow user to configure colors for placeholders (re #38)

* make placholder logo color configurable
* placeholder image is used as a CSS mask instead of a background image
* adjusted other CSS for placeholders to accomodate new mask implementation

* change metadata batch size option to range slider

* fix loading message when loading options

* standardize text input size

* move placeholder text back to bottom of placeholder

* watch for placeholder option changes; only set placeholder vars once

* removed note about needing to reload DeviantArt after changing placeholder color options

* updated Options screenshot and documentation

* update version number for next release

* update README

* add changelog entry (tentative) for version 5.1

* use relative paths to screenshots

* clarify and restrict use of hashtag symbol tag filters (fixes #57)

* emphasize partial matches in wildcard example for tag filters

* internationalize remaining text on filter panel
* Yes/No labels for boolean fields
* Error messages for invalid filter properties

* use i18n Yes/No labels for boolean values in filter tables

* added tag filter hashtag bug fix to changelog

* update Tags filter screenshot

* re-trim Options screenshot

.verb.md

@@ -13,7 +13,7 @@
 
 Have you ever want to block/filter deviations (a.k.a. submissions) while browsing [DeviantArt](https://www.deviantart.com)? **Well now you can!** Simply [install {%= title %}](#installation) in your web browser of choice and start filtering by user, tag, and/or category.
 
-![{%= title %} Promotional Image](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Promo.png)
+![{%= title %} Promotional Image](/screenshots/Promo.png?raw=true)
 
 * * *
 

CHANGELOG.md

@@ -1,5 +1,16 @@
 # DeviantArt Filter Changelog
 
+## Version 5.1 (February 6, 2019)
+
+### New Features
+
+- **Custom Placeholder Styles**. You can now control the colors used for the placeholders on filtered deviations. Management Panel/Screen, go to the Options tab, and set the Background, Logo, and/or Text Colors for Placeholders. Note that these settings are ineffective if you have placeholders disabled.
+- **Metadata Batch Size**. A new (somewhat experimental) feature has been implemented to allow control over how much metadata is loaded at once (for category and tag filters). Setting this to a lower value may help your browsing performance.
+
+### Bug Fixes
+
+- Clarify and restrict the use of the hashtag symbol (`#`) when creating tag filters ([#57](https://github.com/rthaut/deviantART-Filter/issues/57))
+
 ## Version 5.0.3 (June 22, 2018)
 
 ### Bug Fixes

README.md

@@ -1,7 +1,7 @@
 [<img align="right" src="https://travis-ci.com/rthaut/deviantART-Filter.svg?branch=master" alt="Build Status"/>](https://travis-ci.com/rthaut/deviantART-Filter)
 [<img align="right" src="https://badges.greenkeeper.io/rthaut/deviantART-Filter.svg" alt="Greenkeeper badge"/>](https://greenkeeper.io/)
 
-# DeviantArt Filter 5.0.3
+# DeviantArt Filter 5.1.0
 
 > Allows configurable filtering/removal of deviations by user, tag, and/or category on DeviantArt
 
@@ -20,7 +20,7 @@ _(TOC generated by [verb](https://github.com/verbose/verb) using [markdown-toc](
 
 Have you ever want to block/filter deviations (a.k.a. submissions) while browsing [DeviantArt](https://www.deviantart.com)? **Well now you can!** Simply [install DeviantArt Filter](#installation) in your web browser of choice and start filtering by user, tag, and/or category.
 
-![DeviantArt Filter Promotional Image](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Promo.png)
+![DeviantArt Filter Promotional Image](/screenshots/Promo.png?raw=true)
 
 * * *
 
@@ -72,7 +72,7 @@ The Tabs permission is used to apply filter changes from the Management Panel/Sc
 
 ### Opening the Management Panel/Screen
 
-1. While on [DeviantArt](https://www.deviantart.com), click the red logo that appears on the right side of the address bar. ![DeviantArt Filter Page Action Demo](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Page-Action-Demo.png)
+1. While on [DeviantArt](https://www.deviantart.com), click the red logo that appears on the right side of the address bar. ![DeviantArt Filter Page Action Demo](/screenshots/Page-Action-Demo.png?raw=true)
 2. The configuration screen will open automatically when you click the icon.
 
 ### Creating and Removing Filters
@@ -117,12 +117,24 @@ Options for DeviantArt filtered are configured through the [Management Panel/Scr
 
 If you want to see/know when a deviation was filtered (and why), enable this option (it is enabled by default). This will show a placeholder instead of the deviation's thumbnail (similar to Mature Content that is blocked). If you would rather just completely hide deviations matching any of your filters, disable this option, and the thumbnails will be removed entirely.
 
+### Background/Logo/Text Color for Placeholders
+
+`Set a custom color for the background/logo/text of the placeholder shown in place of filtered deviations.`
+
+Use these three options to control the style of the placeholders that are inserted for filtered deviations. These settings are ignored when placeholders are disabled altogether.
+
 ### Management Panel Type
 
 `Specifies where/how the main management panel is displayed when clicking the DeviantArt Filter logo by the address bar.`
 
 This option allows you to control if the DeviantArt Filter Management page is opened in a new tab in your current browser window, or if a new popup window is opened. The default behavior for this option is to use a new tab in the current window.
 
+### Metadata Batch Size
+
+`Specifies the number of deviations for which to load metadata at a time. Setting this value to a lower number may improve browsing performance.`
+
+This option limits how much metadata (used for category and tag filters) is loaded at once. The default is 96, which means that metadata for up to 96 deviations is retrieved for deviations on the page and loaded for the tag and category filters to use. Lowering this number may improve browsing performance, so you can try different values for this option to see if you notice any improvements.
+
 ### Number of Days to Cache Metadata
 
 `Specifies the number of days to cache metadata (for tags and categories) locally for deviations. Set this value to disable local caching completely.`
@@ -141,28 +153,29 @@ This setting, as the description states, is primarily for troubleshooting and de
 
 ### Options Page
 
-![Screenshot of the DeviantArt Filter Options Page](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Options.png)
+![Screenshot of the DeviantArt Filter Options Page](/screenshots/Options.png?raw=true)
 
 ### Manage Users Page
 
-![Screenshot of the DeviantArt Filter Manage Users Page](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Users.png)
+![Screenshot of the DeviantArt Filter Manage Users Page](/screenshots/Users.png?raw=true)
 
 ### Manage Tags Page
 
-![Screenshot of the DeviantArt Filter Manage Tags Page](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Tags.png)
+![Screenshot of the DeviantArt Filter Manage Tags Page](/screenshots/Tags.png?raw=true)
 
 ### Manage Categories Page
 
-![Screenshot of the DeviantArt Filter Manage Categories Page](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Categories.png)
+![Screenshot of the DeviantArt Filter Manage Categories Page](/screenshots/Categories.png?raw=true)
 
 ### Import/Export Filters Page
 
-![Screenshot of the DeviantArt Filter Import/Export Page](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Import-Export.png)
+![Screenshot of the DeviantArt Filter Import/Export Page](/screenshots/Import-Export.png?raw=true)
 
 ### Browse Page with Placeholders Enabled
 
-![Screenshot of DeviantArt with placeholders enabled for filtered deviations](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Placeholders.png)
+![Screenshot of DeviantArt with placeholders enabled for filtered deviations](/screenshots/Placeholders.png?raw=true)
 
 ### Browse Page with Placeholders Disabled
 
-![Screenshot of DeviantArt with placeholders disabled for filtered deviations](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/No-Placeholders.png)
+![Screenshot of DeviantArt with placeholders disabled for filtered deviations](/screenshots/No-Placeholders.png?raw=true)
+

_locales/en/filters.json

@@ -140,5 +140,19 @@
   },
   "FilterTypeGenericPropertyDateHint": {
     "message": ""
+  },
+  "FilterPropertyRequiredMessage": {
+    "message": "Please enter a value for this field.",
+    "description": "The error message displayed when creating a filter if a required property is not set."
+  },
+  "FilterPropertyInvalidPatternMessage": {
+    "message": "This value is not valid.",
+    "description": "The error message displayed when creating a filter if a property's values does not match the pattern."
+  },
+  "LabelBooleanYes": {
+    "message": "Yes"
+  },
+  "LabelBooleanNo": {
+    "message": "No"
   }
 }

_locales/en/filters/tags.json

@@ -31,7 +31,7 @@
     "message": "Enter Tag"
   },
   "FilterTypeTagsPropertyTagHint": {
-    "message": "Tags may contain any characters (letters, numbers, symbols, etc.) except spaces; tags are stored in lowercase letters"
+    "message": "Tags may contain any characters (letters, numbers, symbols, etc.) except spaces. Tags are stored in lowercase letters.<br/><strong>Do NOT enter the leading hashtag symbol (ex: use \"fanart\" not \"#fanart\").</strong>"
   },
   "FilterTypeTagsPropertyWildcardTitle": {
     "message": "Wildcard"
@@ -40,6 +40,6 @@
     "message": "Is Wildcard"
   },
   "FilterTypeTagsPropertyWildcardHint": {
-    "message": "Wildcard filters match aggressively (ex: \"art\" would also match \"fanart\" and \"artistic\")"
+    "message": "Wildcard filters match aggressively (ex: \"<strong>art</strong>\" would also match \"fan<strong>art</strong>\" and \"<strong>art</strong>istic\")."
   }
 }

_locales/en/misc.json

@@ -29,6 +29,9 @@
   "LabelManage": {
     "message": "Manage"
   },
+  "LabelOptions": {
+    "message": "Options"
+  },
   "LabelEnabled": {
     "message": "Enabled"
   },

_locales/en/options.json

@@ -31,6 +31,13 @@
     "message": "Open in a a new popup window",
     "description": "The label for the value of the Management Panel Type option that corresponds to using a new browser window."
   },
+  "OptionMetadataBatchSizeName": {
+    "message": "Metadata Batch Size",
+    "description": ""
+  },
+  "OptionMetadataBatchSizeDescription": {
+    "message": "Specifies the number of deviations for which to load metadata at a time. Setting this value to a lower number may improve browsing performance."
+  },
   "OptionMetadataCacheTTLName": {
     "message": "Number of Days to Cache Metadata",
     "description": ""
@@ -55,6 +62,30 @@
     "message": "When enabled, a placeholder image is displayed instead of the actual thumbnail for filtered deviations. Disable this setting to completely remove filtered deviation thumbnails.",
     "description": ""
   },
+  "OptionPlaceholderBGColorName": {
+    "message": "Background Color for Placeholders",
+    "description": ""
+  },
+  "OptionPlaceholderBGColorDescription": {
+    "message": "Set a custom color for the background of the placeholder shown in place of filtered deviations.",
+    "description": ""
+  },
+  "OptionPlaceholderLogoColorName": {
+    "message": "Logo Color for Placeholders",
+    "description": ""
+  },
+  "OptionPlaceholderLogoColorDescription": {
+    "message": "Set a custom color for the logo of the placeholder shown in place of filtered deviations.",
+    "description": ""
+  },
+  "OptionPlaceholderTextColorName": {
+    "message": "Text Color for Placeholders",
+    "description": ""
+  },
+  "OptionPlaceholderTextColorDescription": {
+    "message": "Set a custom color for the text of the placeholder shown in place of filtered deviations.",
+    "description": ""
+  },
   "OptionPrivateStorageName": {
     "message": "Use Filters in Private/Incognito Mode",
     "description": ""

docs/chrome/README.md

@@ -38,7 +38,7 @@ The Tabs permission is used to apply filter changes from the Management Panel/Sc
 
 ### Opening the Management Panel/Screen
 
-1. While on [DeviantArt](https://www.deviantart.com), click the red logo that appears on the right side of the address bar. ![DeviantArt Filter Page Action Demo](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Page-Action-Demo.png)
+1. While on [DeviantArt](https://www.deviantart.com), click the red logo that appears on the right side of the address bar. ![DeviantArt Filter Page Action Demo](/screenshots/Page-Action-Demo.png?raw=true)
 2. The configuration screen will open automatically when you click the icon.
 
 ### Creating and Removing Filters
@@ -71,6 +71,7 @@ DeviantArt Filter allows you to export and import filters from a JSON file. This
 2. An `x` icon will appear in the top-left corner of the thumbnail.
 3. Click on the `x` to filter that user.
 
+
 [chrome-url]: https://chrome.google.com/webstore/detail/deviantart-filter/odlmamilbohnpnoomjclomghphbajikp
 [chrome-image-download]: https://img.shields.io/chrome-web-store/d/odlmamilbohnpnoomjclomghphbajikp.svg
 [chrome-image-version]: https://img.shields.io/chrome-web-store/v/odlmamilbohnpnoomjclomghphbajikp.svg

docs/firefox/README.md

@@ -38,7 +38,7 @@ The Tabs permission is used to apply filter changes from the Management Panel/Sc
 
 ### Opening the Management Panel/Screen
 
-1. While on [DeviantArt](https://www.deviantart.com), click the red logo that appears on the right side of the address bar. ![DeviantArt Filter Page Action Demo](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Page-Action-Demo.png)
+1. While on [DeviantArt](https://www.deviantart.com), click the red logo that appears on the right side of the address bar. ![DeviantArt Filter Page Action Demo](/screenshots/Page-Action-Demo.png?raw=true)
 2. The configuration screen will open automatically when you click the icon.
 
 ### Creating and Removing Filters
@@ -71,6 +71,7 @@ DeviantArt Filter allows you to export and import filters from a JSON file. This
 2. An `x` icon will appear in the top-left corner of the thumbnail.
 3. Click on the `x` to filter that user.
 
+
 [firefox-url]: https://addons.mozilla.org/en-US/firefox/addon/deviantart-filter/
 [firefox-image-download]: https://img.shields.io/amo/d/deviantart-filter.svg
 [firefox-image-version]: https://img.shields.io/amo/v/deviantart-filter.svg

docs/parts/markdownlint.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../.markdownlint.json",
+  "first-header-h1": false,
+  "first-line-h1": false
+}

docs/parts/options.md

@@ -8,12 +8,24 @@ Options for DeviantArt filtered are configured through the [Management Panel/Scr
 
 If you want to see/know when a deviation was filtered (and why), enable this option (it is enabled by default). This will show a placeholder instead of the deviation's thumbnail (similar to Mature Content that is blocked). If you would rather just completely hide deviations matching any of your filters, disable this option, and the thumbnails will be removed entirely.
 
+### Background/Logo/Text Color for Placeholders
+
+`Set a custom color for the background/logo/text of the placeholder shown in place of filtered deviations.`
+
+Use these three options to control the style of the placeholders that are inserted for filtered deviations. These settings are ignored when placeholders are disabled altogether.
+
 ### Management Panel Type
 
 `Specifies where/how the main management panel is displayed when clicking the DeviantArt Filter logo by the address bar.`
 
 This option allows you to control if the DeviantArt Filter Management page is opened in a new tab in your current browser window, or if a new popup window is opened. The default behavior for this option is to use a new tab in the current window.
 
+### Metadata Batch Size
+
+`Specifies the number of deviations for which to load metadata at a time. Setting this value to a lower number may improve browsing performance.`
+
+This option limits how much metadata (used for category and tag filters) is loaded at once. The default is 96, which means that metadata for up to 96 deviations is retrieved for deviations on the page and loaded for the tag and category filters to use. Lowering this number may improve browsing performance, so you can try different values for this option to see if you notice any improvements.
+
 ### Number of Days to Cache Metadata
 
 `Specifies the number of days to cache metadata (for tags and categories) locally for deviations. Set this value to disable local caching completely.`

docs/parts/screenshots.md

@@ -2,28 +2,28 @@
 
 ### Options Page
 
-![Screenshot of the DeviantArt Filter Options Page](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Options.png)
+![Screenshot of the DeviantArt Filter Options Page](/screenshots/Options.png?raw=true)
 
 ### Manage Users Page
 
-![Screenshot of the DeviantArt Filter Manage Users Page](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Users.png)
+![Screenshot of the DeviantArt Filter Manage Users Page](/screenshots/Users.png?raw=true)
 
 ### Manage Tags Page
 
-![Screenshot of the DeviantArt Filter Manage Tags Page](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Tags.png)
+![Screenshot of the DeviantArt Filter Manage Tags Page](/screenshots/Tags.png?raw=true)
 
 ### Manage Categories Page
 
-![Screenshot of the DeviantArt Filter Manage Categories Page](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Categories.png)
+![Screenshot of the DeviantArt Filter Manage Categories Page](/screenshots/Categories.png?raw=true)
 
 ### Import/Export Filters Page
 
-![Screenshot of the DeviantArt Filter Import/Export Page](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Import-Export.png)
+![Screenshot of the DeviantArt Filter Import/Export Page](/screenshots/Import-Export.png?raw=true)
 
 ### Browse Page with Placeholders Enabled
 
-![Screenshot of DeviantArt with placeholders enabled for filtered deviations](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Placeholders.png)
+![Screenshot of DeviantArt with placeholders enabled for filtered deviations](/screenshots/Placeholders.png?raw=true)
 
 ### Browse Page with Placeholders Disabled
 
-![Screenshot of DeviantArt with placeholders disabled for filtered deviations](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/No-Placeholders.png)
+![Screenshot of DeviantArt with placeholders disabled for filtered deviations](/screenshots/No-Placeholders.png?raw=true)

docs/parts/usage.md

@@ -2,7 +2,7 @@
 
 ### Opening the Management Panel/Screen
 
-1. While on [DeviantArt](https://www.deviantart.com), click the red logo that appears on the right side of the address bar. ![DeviantArt Filter Page Action Demo](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/screenshots/Page-Action-Demo.png)
+1. While on [DeviantArt](https://www.deviantart.com), click the red logo that appears on the right side of the address bar. ![DeviantArt Filter Page Action Demo](/screenshots/Page-Action-Demo.png?raw=true)
 2. The configuration screen will open automatically when you click the icon.
 
 ### Creating and Removing Filters

gulp.config.js

@@ -17,6 +17,9 @@ module.exports = {
         './node_modules/angular-sanitize/angular-sanitize.min.js',
         './node_modules/bootstrap/dist/css/bootstrap.min.css',
         './node_modules/bootstrap/dist/js/bootstrap.min.js',
+        './node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css',
+        './node_modules/bootstrap-slider/dist/bootstrap-slider.min.js',
+        './node_modules/angular-bootstrap-slider/slider.js',
         './node_modules/idb/build/idb.js',
         './node_modules/jquery/dist/jquery.min.js',
         './node_modules/ng-table/bundles/ng-table.min.css',