Added the ability to copy field name directly from a post og page edi…

…t screen, also tweaked message styling

README.md

@@ -13,6 +13,7 @@ This is a Google Chrome extension/Firefox add-on for Advanced Custom Fields to h
 - Copy code for field with the matching selected setting and field name ([video demo here](https://youtu.be/_gyqUem8jKo))
 - Quickly copy an ACF field name by just clicking the field name
 - Easily open documentation for field by just clicking the field type
+- Check a fields field name when editing a post or a page
 
 ---
 

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "ACF Tools",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "This is a Chrome extension for Advanced Custom Fields to help with developing sites faster.",
   "icons": {
     "16": "icons/icon16.png",

scripts/scripts.js

@@ -3,11 +3,16 @@ $(document).ready(function() {
 	openDocs();
 	copyFieldCode();
 	appendCopyCodeBtns();
+	appendFieldNameOnEdit();
 });
 
 function copyMessage(message) {
 	$(".acftools-message").remove();
-	$("body").append('<div class="acftools-message">'+message+'</div>');
+	var dismissBtn = '<button type="button" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button>';
+	$("body").append('<div class="acftools-message notice notice-success is-dismissible"><p>'+message+'</p>'+dismissBtn+'</div>');
+	$("body").on('click', '.acftools-message .notice-dismiss', function() {
+		$(".acftools-message").remove();
+	})
 }
 
 function copyStringToClipboard(element) {
@@ -197,4 +202,17 @@ function copyFieldCode() {
 		// Clear session storage
 		sessionStorage.removeItem("fieldcode");
 	});
+}
+
+function appendFieldNameOnEdit() {
+	$('body:not(.post-type-acf-field-group)').find('.acf-field').each(function() {
+		var fieldName = $(this).attr('data-name'),
+			fieldNameInfo = '<a href="#" class="post-edit-field-name-info dashicons dashicons-info acf-js-tooltip" title="'+fieldName+'">'+fieldName+'</a>';
+		$(this).children('.acf-label').children('label').append(fieldNameInfo);
+	});
+	$('body').on('click', '.post-edit-field-name-info', function(e) {
+		e.preventDefault();
+		copyMessage('Copied field name to clipboard!');
+		copyStringToClipboard($(this));
+	})
 }

styles/style.css

@@ -1,24 +1,16 @@
 .acftools-message {
-  position: fixed;
-  top: 40px;
+  position: fixed !important;
+  top: 50px;
   left: 50%;
   transform: translate(-50%, 0px);
-  pointer-events: none;
   opacity: 0;
-  animation: fade-in-slide 2.5s ease-in-out;
-  display: block;
-  font-size: 14.4px;
-  background-color: #C7E8CA;
-  padding: 8px;
-  text-align: center;
-  max-width: 100%;
-  width: 900px;
+  animation: fade-in 5s ease-in-out;
+  z-index: 10000;
 }
 
-@keyframes fade-in-slide {
+@keyframes fade-in {
   0% {
     opacity: 0;
-    transform: translate(-50%, 0px);
   }
   10% {
     opacity: 1;
@@ -28,7 +20,6 @@
   }
   100% {
     opacity: 0;
-    transform: translate(-50%, 20px);
   }
 }
 
@@ -51,4 +42,22 @@
 }
 .acf-field-object.open>.handle a.button-secondary {
   color: #0071a1 !important;
+}
+
+.post-edit-field-name-info {
+  padding: 0 10px;
+  color: #191e23;
+  font-size: 0 !important;
+  color: #AAAAAA;
+  opacity: 0;
+}
+.acf-field:hover > .acf-label > label > .post-edit-field-name-info, 
+.acf-field:focus > .acf-label > label > .post-edit-field-name-info {
+  opacity: 1;
+}
+.post-edit-field-name-info:hover, .post-edit-field-name-info:focus {
+  color: #777777;
+}
+.post-edit-field-name-info::before {
+  font-size: 20px !important;
 }