From f986e3cfb6a58e263abd7f915610af567d850a7c Mon Sep 17 00:00:00 2001
From: Eric Wiese <eric.wiese@classyllama.com>
Date: Thu, 29 Dec 2016 09:43:42 -0600
Subject: [PATCH 1/8] POC config override hint value display

---
 Helper/Data.php                               | 69 +++++++++++++------
 .../layout/adminhtml_system_config_edit.xml   |  1 +
 view/adminhtml/web/css/configscopehints.less  | 10 ++-
 view/adminhtml/web/js/configscopehints.js     |  9 +++
 4 files changed, 67 insertions(+), 22 deletions(-)
 create mode 100644 view/adminhtml/web/js/configscopehints.js

diff --git a/Helper/Data.php b/Helper/Data.php
index ac1a6c9..0e190f8 100644
--- a/Helper/Data.php
+++ b/Helper/Data.php
@@ -6,6 +6,9 @@
 
 class Data extends \Magento\Framework\App\Helper\AbstractHelper
 {
+    const STORE_VIEW_SCOPE_CODE = 'stores';
+    const WEBSITE_SCOPE_CODE = 'websites';
+
     /** @var \Magento\Framework\App\Helper\Context */
     protected $context;
 
@@ -46,17 +49,17 @@ public function __construct(
      * @return array
      */
     public function getScopeTree() {
-        $tree = array('websites' => array());
+        $tree = array(self::WEBSITE_SCOPE_CODE => array());
 
         $websites = $this->storeManager->getWebsites();
 
         /* @var $website Website */
         foreach($websites as $website) {
-            $tree['websites'][$website->getId()] = array('stores' => array());
+            $tree[self::WEBSITE_SCOPE_CODE][$website->getId()] = array(self::STORE_VIEW_SCOPE_CODE => array());
 
             /* @var $store Store */
             foreach($website->getStores() as $store) {
-                $tree['websites'][$website->getId()]['stores'][] = $store->getId();
+                $tree[self::WEBSITE_SCOPE_CODE][$website->getId()][self::STORE_VIEW_SCOPE_CODE][] = $store->getId();
             }
         }
 
@@ -66,15 +69,29 @@ public function getScopeTree() {
     /**
      * Wrapper method to get config value at path, scope, and scope code provided
      *
-     * @param $path
-     * @param $contextScope
-     * @param $contextScopeId
-     * @return mixed
+     * @param string $path
+     * @param string $contextScope
+     * @param string|int $contextScopeId
+     * @return string
      */
     protected function _getConfigValue($path, $contextScope, $contextScopeId) {
         return $this->context->getScopeConfig()->getValue($path, $contextScope, $contextScopeId);
     }
 
+    /**
+     * Gets human-friendly display value for given config path
+     *
+     * @param string $path
+     * @param string $contextScope
+     * @param string|int $contextScopeId
+     * @return string
+     */
+    public function getConfigDisplayValue($path, $contextScope, $contextScopeId) {
+        $value = $this->_getConfigValue($path, $contextScope, $contextScopeId);
+
+        return $value; //@todo
+    }
+
     /**
      * Gets array of scopes and scope IDs where path value is different
      * than supplied context scope and context scope ID.
@@ -97,34 +114,40 @@ public function getOverriddenLevels($path, $contextScope, $contextScopeId) {
         $overridden = array();
 
         switch($contextScope) {
-            case 'websites':
-                $stores = array_values($tree['websites'][$contextScopeId]['stores']);
+            case self::WEBSITE_SCOPE_CODE:
+                $stores = array_values($tree[self::WEBSITE_SCOPE_CODE][$contextScopeId][self::STORE_VIEW_SCOPE_CODE]);
                 foreach($stores as $storeId) {
-                    $value = $this->_getConfigValue($path, 'stores', $storeId);
+                    $value = $this->_getConfigValue($path, self::STORE_VIEW_SCOPE_CODE, $storeId);
                     if($value != $currentValue) {
                         $overridden[] = array(
                             'scope'     => 'store',
-                            'scope_id'  => $storeId
+                            'scope_id'  => $storeId,
+                            'value' => $value,
+                            'display_value' => $this->getConfigDisplayValue($path, self::STORE_VIEW_SCOPE_CODE, $storeId)
                         );
                     }
                 }
                 break;
             case 'default':
-                foreach($tree['websites'] as $websiteId => $website) {
-                    $websiteValue = $this->_getConfigValue($path, 'websites', $websiteId);
+                foreach($tree[self::WEBSITE_SCOPE_CODE] as $websiteId => $website) {
+                    $websiteValue = $this->_getConfigValue($path, self::WEBSITE_SCOPE_CODE, $websiteId);
                     if($websiteValue != $currentValue) {
                         $overridden[] = array(
                             'scope'     => 'website',
-                            'scope_id'  => $websiteId
+                            'scope_id'  => $websiteId,
+                            'value' => $websiteValue,
+                            'display_value' => $this->getConfigDisplayValue($path, self::WEBSITE_SCOPE_CODE, $websiteId)
                         );
                     }
 
-                    foreach($website['stores'] as $storeId) {
-                        $value = $this->_getConfigValue($path, 'stores', $storeId);
+                    foreach($website[self::STORE_VIEW_SCOPE_CODE] as $storeId) {
+                        $value = $this->_getConfigValue($path, self::STORE_VIEW_SCOPE_CODE, $storeId);
                         if($value != $currentValue && $value != $websiteValue) {
                             $overridden[] = array(
                                 'scope'     => 'store',
-                                'scope_id'  => $storeId
+                                'scope_id'  => $storeId,
+                                'value' => $value,
+                                'display_value' => $this->getConfigDisplayValue($path, self::STORE_VIEW_SCOPE_CODE, $storeId)
                             );
                         }
                     }
@@ -145,11 +168,13 @@ public function getOverriddenLevels($path, $contextScope, $contextScopeId) {
     public function formatOverriddenScopes($section, array $overridden) {
         $formatted = '<div class="overridden-hint-wrapper">' .
             '<p class="lead-text">' . __('This config field is overridden at the following scope(s):') . '</p>' .
-            '<ul class="overridden-hint-list">';
+            '<dl class="overridden-hint-list">';
 
         foreach($overridden as $overriddenScope) {
             $scope = $overriddenScope['scope'];
             $scopeId = $overriddenScope['scope_id'];
+            $value = $overriddenScope['value'];
+            $valueLabel = $overriddenScope['display_value'];
             $scopeLabel = $scopeId;
 
             $url = '#';
@@ -187,10 +212,14 @@ public function formatOverriddenScopes($section, array $overridden) {
                     break;
             }
 
-            $formatted .= '<li class="' . $scope . '">'. $scopeLabel .'</li>';
+            $formatted .=
+                '<dt class="override-scope ' . $scope . '" title="'. __('Click to see overridden value') .'">'
+                    . $scopeLabel .
+                '</dt>' .
+                '<dd class="override-value">' . $valueLabel . '</dd>';
         }
 
-        $formatted .= '</ul></div>';
+        $formatted .= '</dl></div>';
 
         return $formatted;
     }
diff --git a/view/adminhtml/layout/adminhtml_system_config_edit.xml b/view/adminhtml/layout/adminhtml_system_config_edit.xml
index 1fc2604..e75b768 100644
--- a/view/adminhtml/layout/adminhtml_system_config_edit.xml
+++ b/view/adminhtml/layout/adminhtml_system_config_edit.xml
@@ -2,5 +2,6 @@
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
     <head>
         <css src="EW_ConfigScopeHints::css/configscopehints.css"/>
+        <script src="EW_ConfigScopeHints::js/configscopehints.js"/>
     </head>
 </page>
diff --git a/view/adminhtml/web/css/configscopehints.less b/view/adminhtml/web/css/configscopehints.less
index 0544ecd..525e94e 100644
--- a/view/adminhtml/web/css/configscopehints.less
+++ b/view/adminhtml/web/css/configscopehints.less
@@ -11,7 +11,13 @@
         }
     }
 
-    .overridden-hint-list {
-        list-style-position: inside;
+    .override-scope {
+        cursor: pointer;
+    }
+
+    .override-value {
+        &.visible {
+            display: block;
+        }
     }
 }
\ No newline at end of file
diff --git a/view/adminhtml/web/js/configscopehints.js b/view/adminhtml/web/js/configscopehints.js
new file mode 100644
index 0000000..69b911d
--- /dev/null
+++ b/view/adminhtml/web/js/configscopehints.js
@@ -0,0 +1,9 @@
+require([
+    'jquery'
+], function ($) {
+    $(document).ready(function() {
+        $('.overridden-hint-list').on('click', '.override-scope', function(e) {
+            $(this).next('.override-value').toggleClass('visible');
+        });
+    });
+});
\ No newline at end of file

From 0efb7108d2616bf4bd2780591fce74bf2570f060 Mon Sep 17 00:00:00 2001
From: Eric Wiese <eric.wiese@classyllama.com>
Date: Fri, 30 Dec 2016 10:42:59 -0600
Subject: [PATCH 2/8] POC config override hint value display

---
 Helper/Data.php | 73 +++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 68 insertions(+), 5 deletions(-)

diff --git a/Helper/Data.php b/Helper/Data.php
index 0e190f8..d590355 100644
--- a/Helper/Data.php
+++ b/Helper/Data.php
@@ -21,16 +21,29 @@ class Data extends \Magento\Framework\App\Helper\AbstractHelper
      * @var \Magento\Backend\Model\Url
      */
     protected $urlBuilder;
+    /**
+     * @var \Magento\Config\Model\Config\Structure\SearchInterface
+     */
+    protected $configStructure;
+    /**
+     * @var \Magento\Framework\Escaper
+     */
+    protected $escaper;
 
     /**
+     * Data constructor.
      * @param \Magento\Framework\App\Helper\Context $context
      * @param \Magento\Store\Model\StoreManagerInterface $storeManager
      * @param \Magento\Backend\Model\Url $urlBuilder
+     * @param \Magento\Config\Model\Config\Structure\SearchInterface $configStructure
+     * @param \Magento\Framework\Escaper $escaper
      */
     public function __construct(
         \Magento\Framework\App\Helper\Context $context,
         \Magento\Store\Model\StoreManagerInterface $storeManager,
-        \Magento\Backend\Model\Url $urlBuilder
+        \Magento\Backend\Model\Url $urlBuilder,
+        \Magento\Config\Model\Config\Structure\SearchInterface $configStructure,
+        \Magento\Framework\Escaper $escaper
     ) {
         parent::__construct($context);
 
@@ -40,6 +53,8 @@ public function __construct(
         // an instance of \Magento\Framework\Url instead of \Magento\Backend\Model\Url, we must explicitly request it
         // via DI.
         $this->urlBuilder = $urlBuilder;
+        $this->configStructure = $configStructure;
+        $this->escaper = $escaper;
     }
 
     /**
@@ -79,17 +94,40 @@ protected function _getConfigValue($path, $contextScope, $contextScopeId) {
     }
 
     /**
-     * Gets human-friendly display value for given config path
+     * Gets human-friendly display value(s) for given config path
      *
      * @param string $path
      * @param string $contextScope
      * @param string|int $contextScopeId
-     * @return string
+     * @return array
      */
     public function getConfigDisplayValue($path, $contextScope, $contextScopeId) {
         $value = $this->_getConfigValue($path, $contextScope, $contextScopeId);
 
-        return $value; //@todo
+        $labels = [$value]; //default labels to raw value
+
+        /** @var \Magento\Config\Model\Config\Structure\Element\Field $field */
+        $field = $this->configStructure->getElement($path);
+
+        if($field->getOptions()) {
+            //@todo: test all this
+            $labels = []; //reset labels so we can add human-friendly labels
+
+            $optionsByValue = [];
+            foreach($field->getOptions() as $option) {
+                $optionsByValue[$option['value']] = $option;
+            }
+
+            $values = explode(',', $value);
+
+            foreach($values as $valueInstance) {
+                $labels[] = isset($optionsByValue[$valueInstance])
+                    ? $optionsByValue[$valueInstance]['label'] : $valueInstance;
+
+            }
+        }
+
+        return $labels;
     }
 
     /**
@@ -158,6 +196,31 @@ public function getOverriddenLevels($path, $contextScope, $contextScopeId) {
         return $overridden;
     }
 
+    /**
+     * Get HTML formatted value label(s)
+     *
+     * @param array $labels
+     * @return string
+     */
+    protected function getFormattedValueLabels(array $labels) {
+        if(count($labels) == 1) {
+            //if only one value, simply return it
+            return '<span class="override-value-hint-label">' .
+                nl2br($this->escaper->escapeHtml($labels[0])) .
+                '</span>';
+        }
+
+        $formattedLabels = '';
+
+        foreach($labels as $label) {
+            $formattedLabels .= '<li class="override-value-hint-label">' .
+                nl2br($this->escaper->escapeHtml($label)) .
+            '</li>';
+        }
+
+        return '<ul class="override-value-hint-labels">' . $formattedLabels . '</ul>';
+    }
+
     /**
      * Get HTML output for override hint UI
      *
@@ -216,7 +279,7 @@ public function formatOverriddenScopes($section, array $overridden) {
                 '<dt class="override-scope ' . $scope . '" title="'. __('Click to see overridden value') .'">'
                     . $scopeLabel .
                 '</dt>' .
-                '<dd class="override-value">' . $valueLabel . '</dd>';
+                '<dd class="override-value">' . $this->getFormattedValueLabels($valueLabel) . '</dd>';
         }
 
         $formatted .= '</dl></div>';

From 10e548aa7fd1030da7aae93d783bc300f5817fc3 Mon Sep 17 00:00:00 2001
From: Eric Wiese <eric.wiese@classyllama.com>
Date: Fri, 30 Dec 2016 11:08:30 -0600
Subject: [PATCH 3/8] Remove erroneous null value check cruft from M1 port that
 causes false negatives

---
 Helper/Data.php | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/Helper/Data.php b/Helper/Data.php
index d590355..ed09835 100644
--- a/Helper/Data.php
+++ b/Helper/Data.php
@@ -145,10 +145,6 @@ public function getOverriddenLevels($path, $contextScope, $contextScopeId) {
 
         $currentValue = $this->_getConfigValue($path, $contextScope, $contextScopeId);
 
-        if(is_null($currentValue)) {
-            return array(); //something is off, let's bail gracefully.
-        }
-
         $overridden = array();
 
         switch($contextScope) {

From fc9fb73a9fcd8e57bf2957b75e9b9d78bdb69ab6 Mon Sep 17 00:00:00 2001
From: Eric Wiese <eric.wiese@classyllama.com>
Date: Fri, 30 Dec 2016 11:11:30 -0600
Subject: [PATCH 4/8] Remove todo, unused parameter, and add variable type hint

---
 Helper/Data.php                           | 2 +-
 view/adminhtml/web/js/configscopehints.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Helper/Data.php b/Helper/Data.php
index ed09835..4814772 100644
--- a/Helper/Data.php
+++ b/Helper/Data.php
@@ -110,7 +110,6 @@ public function getConfigDisplayValue($path, $contextScope, $contextScopeId) {
         $field = $this->configStructure->getElement($path);
 
         if($field->getOptions()) {
-            //@todo: test all this
             $labels = []; //reset labels so we can add human-friendly labels
 
             $optionsByValue = [];
@@ -254,6 +253,7 @@ public function formatOverriddenScopes($section, array $overridden) {
 
                     break;
                 case 'store':
+                    /** @var \Magento\Store\Model\Store $store */
                     $store = $this->storeManager->getStore($scopeId);
                     $website = $store->getWebsite();
                     $url = $this->urlBuilder->getUrl(
diff --git a/view/adminhtml/web/js/configscopehints.js b/view/adminhtml/web/js/configscopehints.js
index 69b911d..43e533b 100644
--- a/view/adminhtml/web/js/configscopehints.js
+++ b/view/adminhtml/web/js/configscopehints.js
@@ -2,7 +2,7 @@ require([
     'jquery'
 ], function ($) {
     $(document).ready(function() {
-        $('.overridden-hint-list').on('click', '.override-scope', function(e) {
+        $('.overridden-hint-list').on('click', '.override-scope', function() {
             $(this).next('.override-value').toggleClass('visible');
         });
     });

From fb8faf1aa4b327238b17ecc838776e3ee1ee42cc Mon Sep 17 00:00:00 2001
From: Eric Wiese <eric.wiese@classyllama.com>
Date: Fri, 30 Dec 2016 11:25:25 -0600
Subject: [PATCH 5/8] Improve value hint styling

---
 view/adminhtml/web/css/configscopehints.less | 23 ++++++++++++++++++++
 view/adminhtml/web/js/configscopehints.js    |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/view/adminhtml/web/css/configscopehints.less b/view/adminhtml/web/css/configscopehints.less
index 525e94e..65f84af 100644
--- a/view/adminhtml/web/css/configscopehints.less
+++ b/view/adminhtml/web/css/configscopehints.less
@@ -13,11 +13,34 @@
 
     .override-scope {
         cursor: pointer;
+        line-height: 40px; //improve touch experience
+        position: relative;
+
+        &:before {
+            font-family: "Admin Icons";
+            font-style: normal;
+            content: '\e616';
+            font-size: 1.8rem;
+            position: absolute;
+            right: 1.3rem;
+        }
+
+        &.open {
+            border-bottom: none; //remove native accordion border so following .override-value can have it
+
+            &:before {
+                content: '\e615'; //set icon to close arrow
+            }
+        }
     }
 
     .override-value {
         &.visible {
             display: block;
         }
+
+        //move native accordion left whitespace from margin to padding
+        margin-left: 0;
+        padding-left: 40px;
     }
 }
\ No newline at end of file
diff --git a/view/adminhtml/web/js/configscopehints.js b/view/adminhtml/web/js/configscopehints.js
index 43e533b..1c41a55 100644
--- a/view/adminhtml/web/js/configscopehints.js
+++ b/view/adminhtml/web/js/configscopehints.js
@@ -3,7 +3,7 @@ require([
 ], function ($) {
     $(document).ready(function() {
         $('.overridden-hint-list').on('click', '.override-scope', function() {
-            $(this).next('.override-value').toggleClass('visible');
+            $(this).toggleClass('open').next('.override-value').toggleClass('visible');
         });
     });
 });
\ No newline at end of file

From 87408e91368d1e1ced19f80e5e89c675704d889b Mon Sep 17 00:00:00 2001
From: Eric Wiese <eric.wiese@classyllama.com>
Date: Sat, 31 Dec 2016 10:47:48 -0600
Subject: [PATCH 6/8] Improve touch behavior and fix hint text overlap

---
 view/adminhtml/web/css/configscopehints.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/view/adminhtml/web/css/configscopehints.less b/view/adminhtml/web/css/configscopehints.less
index 65f84af..0cdb4f1 100644
--- a/view/adminhtml/web/css/configscopehints.less
+++ b/view/adminhtml/web/css/configscopehints.less
@@ -15,6 +15,7 @@
         cursor: pointer;
         line-height: 40px; //improve touch experience
         position: relative;
+        padding-right: 4rem; //prevent arrow from overlapping text
 
         &:before {
             font-family: "Admin Icons";

From 31debb7288339b1afaa222d0b88618dc7760a71b Mon Sep 17 00:00:00 2001
From: Eric Wiese <eric.wiese@classyllama.com>
Date: Sat, 31 Dec 2016 11:03:17 -0600
Subject: [PATCH 7/8] Update README with new 3.1 information

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2a9f310..bd45c29 100644
--- a/README.md
+++ b/README.md
@@ -49,9 +49,9 @@ After installing the module, when viewing a system configuration field, an alert
 
 The icon is only shown when the value is overridden at a more specific scope than the current one – that is, if viewing at the default scope, overrides at the website or store view level are shown, but if viewing at the website level, only overrides below the currently selected website are shown.
 
-Along with the alert message, a detailed list of the exact scope(s) that override the value, with links directly to the store config for the current section at those scopes.
+Along with the alert message, a detailed list of the exact scope(s) that override the value, with links directly to the store config for the current section at those scopes. Clicking an override hint row arrow will expand the row to also show the field's value at that scope.
 
-![Screenshot of system config scope hints module](https://ericisaweso.me/images/magento2-configscopehints-v3.png)
+![Screenshot of system config scope hints module](https://ericisaweso.me/images/magento2-configscopehints-v3.1.png)
 
 ## Compatibility and Technical Notes
 

From d06822021d007e599e3d9eb3bda9798245d379b7 Mon Sep 17 00:00:00 2001
From: Eric Wiese <eric.wiese@classyllama.com>
Date: Sat, 31 Dec 2016 11:11:53 -0600
Subject: [PATCH 8/8] Fix whitespace of span value hints and bump module
 version to 3.1.0

---
 etc/module.xml                               | 2 +-
 view/adminhtml/web/css/configscopehints.less | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/etc/module.xml b/etc/module.xml
index 313d310..373d5c0 100644
--- a/etc/module.xml
+++ b/etc/module.xml
@@ -1,5 +1,5 @@
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
-    <module name="EW_ConfigScopeHints" setup_version="3.0.0">
+    <module name="EW_ConfigScopeHints" setup_version="3.1.0">
         <sequence>
             <module name="Magento_Config"/>
         </sequence>
diff --git a/view/adminhtml/web/css/configscopehints.less b/view/adminhtml/web/css/configscopehints.less
index 0cdb4f1..a16f0cd 100644
--- a/view/adminhtml/web/css/configscopehints.less
+++ b/view/adminhtml/web/css/configscopehints.less
@@ -40,6 +40,11 @@
             display: block;
         }
 
+        span.override-value-hint-label {
+            display: block;
+            margin-bottom: 1rem;
+        }
+
         //move native accordion left whitespace from margin to padding
         margin-left: 0;
         padding-left: 40px;