Update Readme.

README.md

@@ -1,62 +1,76 @@
-# Better Layout Hints
-
-Magento 2 module to show better layout hints.
+# Magento 2 - Layout Hints (Enhanced)
 
 ![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/drew7721/module-templatehints)
 ![GitHub All Releases](https://img.shields.io/github/downloads/drew7721/module-templatehints/total)
 ![GitHub forks](https://img.shields.io/github/forks/drew7721/module-templatehints?style=social)
 
 ## Why?
-The default layout hints in Magento 2 lack much of the needed information.
+Let's be honest, the default Magento 2 layout hints are very _bare_ (to stay polite). They lack much of the information
+that is needed when we want to debug the layout.
 
-The goal is to provide all the additional information about the layout of the current page. 
+This module made my like easier when it comes to altering the layout and templates of Magento 2 and I hope it will do
+the same for you.
 
-This module provides information about each Container, Block and uiElement on the page. It does this in a
-non-intrusive manner.
+The goal is to show all blocks, containers and uiComponents on the page without breaking the page too badly. When the
+mouse hovers any given element it will show more information for the current hovered element and its parents. The data
+that is provided includes the name, alias, parent, template and class.
 
-## Features
+I've also added some nice frontend features to easily hide or show the hints that way it's easy to navigate the site
+while the hints are ON. There are some additional features that bring some of the CLI actions to the frontend such as
+enabling and disabling the hints from the frontend as well as clearing the caches directly from the browser.
+
+This module will never make itself visible or have any effect in production mode, **it will only work in developer mode**.
 
- - [x] Admin panel control 
- - [x] Console command line control
- - [x] Front-end hide/show function with `Shift + Ctrl + H`
- - [x] Non-intrusive display 
- - [x] Additional layout information at the bottom of the page. 
+<a href="https://i.imgur.com/VPea9TL.png"><img src="https://i.imgur.com/VPea9TL.png" width="350" height="250"/></a>
+<a href="https://i.imgur.com/NhJhmco.png"><img src="https://i.imgur.com/NhJhmco.png" width="350" height="250"/></a>
 
-## How to use it?
+## Features
+
+ - [x] Enable and disable from **Frontend**, CLI or Admin panel
+ - [x] Shows **blocks** and **containers**
+ - [x] Displays the **name** and **alias** of the block or container.
+ - [x] Lots of information on hover such as the block **class** and **template file**.
+ - [x] **Clear all caches from the frontend**
+ - [x] Non-intrusive display
+ - [x] Layout information at the bottom of the page.
 
-### Install
+## Install
 
 ```
 composer require justinkase/module-layouthints
-``` 
-**Note**: The hints will only be visible in **developer mode**.
+magento setup:upgrade
+magento cache:flush
+```
 
+## How to use this module
 ### Frontend
+**Make sure you're in developer mode**
 
-After enabling the hints from the backend you can use the `Shift + Ctrl + H` key combination on the frontend to toggle the display of the layout hints.
+Visit your Magento 2 store in a browser and use the following keys combinations.
 
-### Backend Enable/Disable
-You can enable the hints from the console or the admin panel.
+#### Shortcuts:
+- `Shift + Ctrl + H` => Toggle hints visibility
+- `Shift + Ctrl + =` => Turn ON hints (you must also clear caches)
+- `Shift + Ctrl + -` => Turn OFF hints (you must also clear caches)
+- `Shift + Ctrl + C` => Clear caches
+
+You might get a request to approve browser notifications.
+
+Make sure you're focused on the page, _click somewhere on the page with the mouse_, **but not a link**!
+
+### CLI
 
-**Console:**
 ```
 justinkase:hints:on
 justinkase:hints:off
+magento cache:flush
 ```
-*Note: Clear caches after!* `magento cache:flush` 
-
-**Admin panel:**
-
-`Stores > Configuration > JustinKase > Layout Hints` 
 
-![](https://i.imgur.com/j4vgKKk.png)
+### Admin Panel
 
-## Screens
-Bottom additional information
-![](https://i.imgur.com/NhJhmco.png)
+`Stores > Configuration > Advanced > Developer > JustinKase - Layout Hints`
 
-Non-intrusive display
-![](https://i.imgur.com/BxpJZ1C.png)
+![](https://i.imgur.com/DUA9leh.png)
 
 ## Author
 [Alex Ghiban](mailto:drew7721@gmail.com)