New Link - Paragraph Inspector

modules/user_preferences/js/src/user-preferences.js

@@ -300,6 +300,10 @@ document.addEventListener("DOMContentLoaded", function(event) {
       toggleFullscreen();
     });
 
+    $(".toggle-inspector").on("click touchstart", function() {
+      toggleParagraphInspector();
+    });
+
     $(".fontSlider").on("input change", function() {
       preferences.setFontSize(this.value);
     });
@@ -317,6 +321,30 @@ document.addEventListener("DOMContentLoaded", function(event) {
       else enterFullscreen();
     }
 
+    function toggleParagraphInspector() {
+      window.paragraphInspector = !window.paragraphInspector;
+      elements = document.querySelectorAll('.paragraph');
+      if(window.paragraphInspector){
+        elements.forEach(element => {
+          tippy('#' + element.id, {
+            content: 'Paragraph: ' + element.id.replace('paragraph--', ''),
+            arrow: true,
+            interactive: true,
+            onShow(tip){
+              paragraph.style.outline = '2px dashed var(--warning)';
+            },
+            onHide(tip){
+              paragraph.style.outline = '';
+            }
+          })
+        });
+      } else {
+        elements.forEach(element => {
+          element._tippy.destroy();
+        });
+      }
+    }
+
     function enterFullscreen() {
       var d = document.documentElement;
       if (d.requestFullscreen) d.requestFullscreen();

modules/user_preferences/user_preferences.module

@@ -10,8 +10,6 @@ use Drupal\node\NodeInterface;
 use Drupal\node\NodeTypeInterface;
 use Drupal\node\Entity\Node;
 
-
-
 function user_preferences_page_attachments_alter(&$build){
 	if(!\Drupal::service('router.admin_context')->isAdminRoute()){
 		$build['#attached']['library'][] = 'user_preferences/user-preferences';
@@ -78,7 +76,19 @@ function user_preferences_node_links_alter(array &$links, NodeInterface $node, a
             'onclick' => 'jQuery("#accessibilityPanel").modal("toggle")',
             'data-toggle' => 'tooltip',
             'aria-label' => 'Accessibility tools',
-        ]
+          ]
+        ];
+        $link['paragraphInspector'] = [
+          'title' => t('<i class="fal bullseye-pointer">&nbsp;</i>'),
+          'url' => Url::fromUri('internal:#toggleInspector'),
+          'attributes' => [
+              'title' => t('Identify Target'),
+              'data-tippy-content' => t('Identify Target'),
+              'id' => 'toggle_inspector',
+              'class' => 'toggle-inspector',
+              'data-toggle' => 'tooltip',
+              'aria-label' => 'Identify Target',
+          ]
         ];
     }
     $link['keyboardShortcuts'] = [