Allow users to edit the media-queries.css file directly

[ikbenben]

Currently if users edit the media queries css file directly in the main editor window then those changes are not reflected back into the preview pane or the cached rules in the plugin. This means the information in the CSS file will be overwritten when further changes are made via the css inlined editors

To reproduce:

1. open an HTML document and switch to responsive mode.
2. select or create a new media query using the slider / + button in the preview pane
3. select a dom element from the html tree such as div.content on the demo site and open the css inline editor
4. modify the css. as an example, using div.content, make the width to be 90%
5. close the inline css editor (this is just to control the test case)
6. double click on the media-queries.css file that was created. You should see your new css rule in the file
7. make an edit in the media-queries.css file such as adding 'background-color: red' and save the file
8. switch back to the HTML document and open the css inline editor on the same element.

At this point the inline css editor will not show the changes you made in the media-queries.css file.

1. modify the css for the element by adding a new css rule such as 'height: 100%'
2. close the css inline editor

switch back to the media-queries.css file. at this point the edit made directly in the media-queries.css file will no longer be there as it has been overwritten by rules stored in the plugin cache