<commit_before>CSS Shapes Editor extension for Chrome Developer Tools
===

Adds a GUI editor on top of elements on the page for editing CSS Shapes property values.<commit_msg>instructions for install and usage<commit_after>## CSS Shapes Editor for Chrome DevTools

Chrome DevTools extension for live on-screen editing of CSS Shapes property values.

### How to install

 First, clone this repository:

   ```
   git clone <EMAIL>@github.com:oslego/chrome-css-shapes-editor.git
   ```
 Then, open Google Chrome (min version 37, check `chrome://version/`)
   - Navigate to `chrome://extensions`
   - Toggle on "Developer mode" checkbox
   - Click "Load unpacked extension"
   - Select the cloned repository folder


### How to use

- Launch DevTools (_View > Develop > Developer Tools_)
- Switch to _Elements_ panel
- Look for the new _Shapes_ sidebar next to _Styles_, _Event Listeners_, etc.
- In the _Shapes_ sidebar:
  - click "create" and select a shape type to add
    - an interactive editor appears on top of the selected element
  - click "edit" to turn on editor and adjust an existing shape
  - click "edit" again to remove the editor


### Known limitations

- Manually editing code in the _Shapes_ sidebar, like in _Styles_, is not yet available.
- There is no interactive editor for `inset()` shape function. Only `polygon()`, `circle()` and `ellipse()` are supported.
{'fraction_non_alphanumeric': 0.07971014492753623, 'fraction_numerical': 0.0014492753623188406, 'mean_word_length': 3.949820788530466, 'pattern_counts': {'":': 0, '<': 4, '<?xml version=': 0, '>': 6, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1128183', 'n_tokens_mistral': 386, 'n_tokens_neox': 366, 'n_words': 181}