BAP-17421: Inspecting blocks in Symfony debug toolbar (#19641)

* BAP-17421: Inspecting blocks in Symfony debug toolbar
 - improved documentation
 - removed unused dependenty to the ORO repository from composer
 - added keywords to composer.json
 - updated description at composer.json
 - updated configuration to split twig-inspector package

Bundle/Resources/doc/contributing.md

@@ -1,8 +1,8 @@
 # Contributing 
-If you are improving JS at this package, it's required to update minified version before the commit.
+If you are improving JS in this package, updating minified version before the commit is required.
 
-While working at `./Bundle/Resources/views/assets/`, 
-to update minified versions at `dist/` folder after modifying files in `src/` run: 
+After modifying the files in `./Bundle/Resources/views/assets/src/`, run the command below 
+to update the minified versions in the `./Bundle/Resources/views/assets/dist/` folder : 
 ```
 npm install
 gulp

Bundle/Resources/doc/installation.md

@@ -1,14 +1,14 @@
 # Installation
 
-**Note:** It's highly not recommended to install the bundle to the production environment.
+**Note:** It is not recommended to install the bundle in the production environment.
 
 ## With Composer
-1. Require with composer as a `dev` dependanty
+1. Using composer, install the package as a `dev` dependency:
 ```bash
 php composer require --dev "oro/twig-inspector:1.0.x-dev"
 ```
 
-2. Enable the bundle in the `AppKernel.php`
+2. Enable the bundle in `AppKernel.php`
 ```php
 <?php
 // src/AppKernel.php
@@ -25,29 +25,33 @@ public function registerBundles()
 
 3. Update the application configuration:
 ```yaml
-# config/config_dev.yml
+# app/config/config_dev.yml
 framework:
     ide: phpstorm # to open files in a PhpStorm IDE
 
-# Uncomment if you want to change the base directory where from files can be opened. 
-# Useful if you use some files from the outside of project root
-# oro_twig_inspector:
-#     base_dir: "%kernel.project_dir%/"
-
+# Set the base directory, where from files can be opened by twig inspector, 
+# useful if you use some files from the outside of project root.
+ oro_twig_inspector:
+     base_dir: "%kernel.project_dir%/"
+```
+4. Add `twig_inspector` firewall to`security.yml`:
+```yaml
+# app/config/security.yml
 security:
     firewalls:
         twig_inspector:
             pattern:   ^/_template/
             security: false
 ```
-
-4. import the routing to `routing_dev.yml`
+5. import the routing to `routing_dev.yml`:
 ```yaml
 # config/routing_dev.yml
 oro_twig_inspector:
     resource: "@OroTwigInspectorBundle/Resources/config/oro/routing.yml"
 ```
-5. Warm up the cache
+6. Warm up the cache
 ```bash
 php bin/console cache:warmup --env=dev
-```
+```
+# Next Step
+[Read the Documentation for master](./usage.md)

Bundle/Resources/doc/usage.md

@@ -1,41 +1,40 @@
 # Documentation
 
 ## Inspect with built-in Dev Tools in a Browser
-The bundle adds HTML comments at the start and the end of Twig blocks and templates to the source of rendered HTML pages:<br/>
-![HTML Comments For Inspect Twig templates](./images/html-comments.png)
+The bundle adds HTML comments to the source of rendered HTML at the start and the end of Twig blocks and templates:<br/>
+![HTML Comments for Inspecting Twig templates](./images/html-comments.png)
 
-**Note:** Different line types at the comment prefix used to distinguish start and end comment for different blocks if there are a lot of them on a page. 
-They don't have any other special meanings.
+**Note:** Different line types in the comment prefix are used to distinguish the start and the end of the comment for different blocks if there are many of them on a page.
 
-Better to view generated comments in the Browser Dev Tools at the "Elements" tab in a Webkit based browsers (Chrome, Safari, Opera etc.) or at the "Inspector" tab in the Firefox, as there comments are well formatted.
+It is recommended to view generated comments in the Browser Dev Tools in the "Elements" tab of Webkit based browsers (Chrome, Safari, Opera etc.) or in the "Inspector" tab in the Firefox because comments in tabs are well formatted.
 
-We don't recommend to use the source code view as comments there are not enough readable.
+It is not recommended to use the source code view because comments there are not readable enough.
 
 ## Inspect with Symfony Web Profiler Toolbar
-Also the bundle comes with an extension for **Symfony Web Profiler** that helps to debug visible blocks and navigate to templates source code in your favourite IDE or in a browser without any additional actions.
+The bundle also comes with an extension for **Symfony Web Profiler** that helps to debug visible blocks and navigate to the source code of the templates in your IDE or browser.
 
-By default the extension is disabled to don't affect page rendering. 
+The extension is disabled by default to avoid affecting page rendering. 
 It uses cookies to remember is it enabled on a page reload.
 
 ### Using Twig Inspector Toolbar Extension
 
-1. In a Web Profiler Toolbar hover on `</>` icon<br/>
+1. In a Web Profiler Toolbar hover over the icon `</>`<br/>
 ![Web Profiler Toolbar Twig Inspector Extension Icon](./images/toolbar-extension-icon.png)
-2. Click on "enable" checkbox. That will reload the page and adds comments to the page source code.
-The icon will have an orange background while it's enabled.
-3. Click on `</>` icon again. Now it goes green.
-4. Hower on the element you want to inspect at the webpage.<br/> 
+2. Select the enable checkbox. This reloads the page and adds comments to the page source code.
+The icon has an orange background when enabled.
+3. Click on the `</>` icon again. The icon goes green.
+4. Hover over the element that you want to inspect on the webpage.<br/> 
 The element you are hovering will be highlighted with the transparent blue overlay. 
-Also it will container the hint with block and template names used for rendering hovered html.<br/>
+n addition, the element contains a hint with block and template names used for rendering the hovered html.<br/>
 ![Hovered element with enabled Twig Inspector](./images/hovered-element.png)
 
-5. Click on an element.
-If only one block or template is used for rendering that block you will instantly be redirected to the IDE.
-In case there are multiple blocks and templates used - you will see the popup block with links them. 
-Just click on the template you want to be opened.<br/>
+5. Click on the selected element.
+When only one block or template is used for rendering, you are redirected to the IDE.
+When multiple blocks and templates are used, a popup is displayed with links to them.
+Click on the selected template to open it.<br/>
 ![List of used templates](./images/list-templates.png)
-6. The template will be opened in your favourite IDE<br/>
+6.The template opens in your IDE<br/>
 ![Opened template in an IDE](./images/template-in-ide.png)
 
- If your want to inspect elements that are not visible on a webpage, like hidden or elements from the `header` section, 
- the only option is to [Inspect with built-in Dev Tools in a Browser](#inspect-with-built-in-dev-tools-in-a-browser) 
+ To inspect elements that are not visible on a webpage (e..g. hidden or elements from the `header` section), 
+ [Inspect the page with built-in Dev Tools in a Browser](#inspect-with-built-in-dev-tools-in-a-browser) 

README.md

@@ -1,17 +1,17 @@
 # Oro Twig Inspector
 
-Oro Twig Inspector adds possibility to find twig templates and blocks used for rendering HTML pages faster during development.
+Oro Twig Inspector adds the possibility to find twig templates and blocks used for rendering HTML pages faster during development.
 
 Documentation
 -------------
-[Read the Documentation for master](./Bundle/Resources/doc/usage.md)
+[Read the Documentation for master](./Bundle/Resources/doc/usage.md).
 
 Installation
 ------------
 
-[Read an installation instruction](./Bundle/Resources/doc/installation.md).
+[Read the installation instruction](./Bundle/Resources/doc/installation.md).
 
 License
 -------
 
-This bundle is under the MIT license. See the complete license [in the bundle](LICENSE)
+This bundle is under the MIT license. See the complete license [in the bundle](LICENSE).

composer.json

@@ -1,6 +1,8 @@
 {
     "name": "oro/twig-inspector",
-    "description": "Symfony Toolbar extension that allows to inspect twig templates and blocks visually or in source code with comments",
+    "description": "Oro Twig Inspector adds the possibility to find twig templates and blocks used for rendering HTML pages faster during development",
+    "type": "symfony-bundle",
+    "keywords": ["twig", "debug", "inspect", "template", "ORO", "symfony", "toolbar-extension"],
     "homepage": "https://github.com/oroinc/twig-inspector",
     "license": "MIT",
     "authors": [
@@ -10,8 +12,7 @@
         }
     ],
     "autoload": {
-        "psr-4": {"Oro\\TwigInspector\\": ""},
-        "exclude-from-classmap": ["/Tests/"]
+        "psr-4": {"Oro\\TwigInspector\\": ""}
     },
     "require": {
         "symfony/config": "^3.4",
@@ -21,12 +22,6 @@
         "symfony/routing": "^3.4",
         "twig/twig": "~1.34|~2.4"
     },
-    "repositories": {
-        "oro": {
-            "type": "composer",
-            "url": "https://packagist.orocrm.com"
-        }
-    },
     "minimum-stability": "dev",
     "prefer-stable": true,
     "extra": {