Add new error template styles

templates/Error/duplicate_named_route.php

@@ -24,7 +24,7 @@ $attributes = $error->getAttributes();
 
 $this->start('subheading');
 ?>
-    <strong>Error: </strong>
+    <strong>Error</strong>
     <?= h($error->getMessage()); ?>
 <?php $this->end() ?>
 

templates/Error/fatal_error.php

@@ -19,7 +19,7 @@ $this->assign('templateName', 'fatal_error.php');
 
 $this->start('subheading');
 ?>
-    <strong>Error: </strong>
+    <strong>Error</strong>
     <?= h($error->getMessage()) ?>
     <br/>
 

templates/Error/missing_action.php

@@ -53,14 +53,14 @@ $this->layout = 'dev_error';
 $this->assign('title', sprintf('Missing Method in %s', h($class)));
 $this->assign(
     'subheading',
-    sprintf('The action <em>%s</em> is not defined in <em>%s</em>', h($action), h($class))
+    sprintf('<strong>Error</strong> The action <em>%s</em> is not defined in <em>%s</em>', h($action), h($class))
 );
 $this->assign('templateName', 'missing_action.php');
 
 $this->start('file');
 ?>
 <p class="error">
-    <strong>Error: </strong>
+    <strong>Error</strong>
     <?= sprintf('Create <em>%s::%s()</em> in file: %s.', h($class),  h($action), $path); ?>
 </p>
 

templates/Error/missing_behavior.php

@@ -47,7 +47,7 @@ $this->end();
 $this->start('file');
 ?>
 <p class="error">
-    <strong>Error: </strong>
+    <strong>Error</strong>
     <?= sprintf('Create the class <em>%s</em> below in file: %s', h($class), $filePath . 'Model' . DIRECTORY_SEPARATOR . 'Behavior' . DIRECTORY_SEPARATOR . h($class) . '.php'); ?>
 </p>
 

templates/Error/missing_component.php

@@ -44,7 +44,7 @@ $this->end();
 $this->start('file');
 ?>
 <p class="error">
-    <strong>Error: </strong>
+    <strong>Error</strong>
     <?= sprintf('Create the class <em>%s</em> below in file: %s', h($class), $filePath . 'Controller' . DIRECTORY_SEPARATOR . 'Component' . DIRECTORY_SEPARATOR . h($class) . '.php'); ?>
 </p>
 <?php

templates/Error/missing_controller.php

@@ -47,7 +47,7 @@ $this->assign('templateName', 'missing_controller.php');
 
 ?>
 <?php $this->start('subheading');?>
-<strong>Error: </strong>
+<strong>Error</strong>
 <?php if ($incompleteInflection): ?>
     Your routing resulted in <em><?= h($originalClass) ?></em> as a controller name.
 <?php else: ?>
@@ -69,7 +69,7 @@ $this->assign('templateName', 'missing_controller.php');
         In the case you tried to access a plugin controller make sure you added it to your composer file or you use the autoload option for the plugin.
     </p>
     <p class="error">
-        <strong>Error: </strong>
+        <strong>Suggestion</strong>
         Create the class <em><?= h($class) ?>Controller</em> below in file: <?= h($path) ?>
     </p>
 

templates/Error/missing_datasource.php

@@ -21,7 +21,7 @@ $this->assign('templateName', 'missing_datasource.php');
 
 $this->start('subheading');
 ?>
-<strong>Error: </strong>
+<strong>Error</strong>
 Datasource class <em><?= h($pluginDot . $class) ?></em> could not be found.
     <?php if (isset($message)):  ?>
         <?= h($message); ?>

templates/Error/missing_datasource_config.php

@@ -20,7 +20,7 @@ $this->assign('templateName', 'missing_datasource_config.php');
 
 $this->start('subheading');
 ?>
-    <strong>Error: </strong>
+    <strong>Error</strong>
     <?php if (isset($name)): ?>
         The datasource configuration <em><?= h($name) ?></em> was not found in config<?= DIRECTORY_SEPARATOR . 'app.php' ?>.
     <?php else: ?>

templates/Error/missing_helper.php

@@ -38,14 +38,14 @@ $this->assign('templateName', 'missing_helper.php');
 
 $this->start('subheading');
 ?>
-    <strong>Error: </strong>
+    <strong>Error</strong>
     <em><?= h($pluginDot . $class) ?></em> could not be found.
     <?= $this->element('plugin_class_error', ['pluginPath' => $pluginPath]) ?>
 <?php $this->end() ?>
 
 <?php $this->start('file') ?>
 <p class="error">
-    <strong>Error: </strong>
+    <strong>Suggestion</strong>
     <?= sprintf('Create the class <em>%s</em> below in file: %s', h($class), $filePath . 'View' . DIRECTORY_SEPARATOR . 'Helper' . DIRECTORY_SEPARATOR . h($class) . '.php'); ?>
 </p>
 <?php

templates/Error/missing_layout.php

@@ -20,7 +20,7 @@ $this->assign('templateName', 'missing_layout.php');
 
 $this->start('subheading');
 ?>
-    <strong>Error: </strong>
+    <strong>Error</strong>
     The layout file <em><?= h($file) ?></em> can not be found or does not exist.
 <?php $this->end() ?>
 

templates/Error/missing_plugin.php

@@ -23,7 +23,7 @@ $this->assign('templateName', 'missing_plugin.php');
 
 $this->start('subheading');
 ?>
-    <strong>Error: </strong>
+    <strong>Error</strong>
     The application is trying to load a file from the <em><?= h($plugin) ?></em> plugin.
     <br>
     <br>

templates/Error/missing_route.php

@@ -25,7 +25,7 @@ $attributes = $error->getAttributes();
 
 $this->start('subheading');
 ?>
-    <strong>Error: </strong>
+    <strong>Error</strong>
     <?= h($error->getMessage()); ?>
 <?php $this->end() ?>
 

templates/Error/missing_template.php

@@ -24,10 +24,10 @@ $isEmail = strpos($file, 'Email/') === 0;
 $this->start('subheading');
 ?>
 <?php if ($isEmail): ?>
-    <strong>Error: </strong>
+    <strong>Error</strong>
     <?= sprintf('The template %s</em> was not found.', h($file)); ?>
 <?php else: ?>
-    <strong>Error: </strong>
+    <strong>Error</strong>
     <?= sprintf(
         'The view for <em>%sController::%s()</em> was not found.',
         h(Inflector::camelize($this->request->getParam('controller', ''))),

templates/Error/missing_view.php

@@ -36,7 +36,7 @@ $this->assign('templateName', 'missing_view.php');
 
 $this->start('subheading');
 ?>
-    <strong>Error: </strong>
+    <strong>Error</strong>
     <em><?= h($pluginDot . $class) ?></em> could not be found.
     <?php if (!empty($plugin) && !Plugin::isLoaded($plugin)): ?>
     Make sure your plugin <em><?= h($plugin) ?></em> is in the <?= h($pluginPath) ?> directory and was loaded.
@@ -47,7 +47,7 @@ $this->start('subheading');
 
 <?php $this->start('file') ?>
 <p class="error">
-    <strong>Error: </strong>
+    <strong>Suggestion</strong>
     <?= sprintf('Create the class <em>%s</em> below in file: %s', h($class), $filePath . 'View' . DIRECTORY_SEPARATOR . h($class) . '.php'); ?>
 </p>
 <?php

templates/Error/pdo_error.php

@@ -21,7 +21,7 @@ $this->assign('templateName', 'pdo_error.php');
 
 $this->start('subheading');
 ?>
-    <strong>Error: </strong>
+    <strong>Error</strong>
     <?= h($message); ?>
 <?php $this->end() ?>
 

templates/element/exception_stack_trace.php

@@ -42,8 +42,10 @@ foreach ($error->getTrace() as $i => $stack):
     endif;
 ?>
     <div id="stack-frame-<?= $i ?>" style="display:none;" class="stack-details">
-        <span class="stack-frame-file"><?= h($file) ?></span>
-        <a href="#" class="toggle-link stack-frame-args" data-target="stack-args-<?= $i ?>">toggle arguments</a>
+        <div class="stack-frame-header">
+            <span class="stack-frame-file"><?= h($file) ?></span>
+            <a href="#" class="toggle-link stack-frame-args" data-target="stack-args-<?= $i ?>">Toggle Arguments</a>
+        </div>
 
         <table class="code-excerpt" cellspacing="0" cellpadding="0">
         <?php $lineno = isset($stack['line']) ? $stack['line'] - 4 : 0 ?>

templates/element/exception_stack_trace_nav.php

@@ -14,7 +14,7 @@
  */
 use Cake\Error\Debugger;
 ?>
-<a href="#" class="toggle-link toggle-vendor-frames">toggle vendor stack frames</a>
+<a href="#" class="toggle-link toggle-vendor-frames">Toggle Vendor Stack Frames</a>
 
 <ul class="stack-trace">
 <?php foreach ($error->getTrace() as $i => $stack): ?>

templates/layout/dev_error.php

@@ -23,79 +23,109 @@
     </title>
     <?= $this->Html->meta('icon') ?>
     <style>
+    * {
+        box-sizing: border-box;
+    }
     body {
-        font: 14px helvetica, arial, sans-serif;
-        color: #222;
-        background-color: #f8f8f8;
-        padding:0;
+        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+        color: #404041;
+        background: #F5F7FA;
+        font-size: 14px;
+        letter-spacing: .01em;
+        line-height: 1.6;
+        padding: 0;
         margin: 0;
-        max-height: 100%;
-    }
-
-    .code-dump,
-    pre {
-        background: #fefefe;
-        border: 1px solid #ddd;
-        padding: 5px;
-        white-space: pre-wrap;
+        height: 100%;
     }
-
     header {
-        background-color: #C3232D;
+        background-color: #D33C47;
         color: #ffffff;
-        padding: 16px 10px;
-        border-bottom: 3px solid #626262;
+        padding: 10px;
     }
     .header-title {
-        margin: 0;
-        font-weight: normal;
         font-size: 30px;
-        line-height: 64px;
+        margin: 0;
     }
     .header-type {
-        opacity: 0.75;
         display: block;
         font-size: 16px;
-        line-height: 1;
     }
     .header-help {
+        float: right;
         font-size: 12px;
-        line-height: 1;
-        position: absolute;
-        top: 30px;
-        right: 16px;
     }
     .header-help a {
         color: #fff;
     }
 
-    .error-nav {
-        float: left;
-        width: 30%;
+    .error-content {
+        display: flex;
     }
-    .error-contents {
-        padding: 10px 1%;
-        float: right;
-        width: 68%;
+    .col-left,
+    .col-right {
+        height: calc(100vh - 100px);
+        overflow-y: auto;
+        padding: 15px;
+    }
+    .col-left {
+        flex: 0 0 30%;
+    }
+    .col-right {
+        flex: 1;
+    }
+
+    .toggle-link {
+        display: block;
+        padding: 8px 14px;
+        text-decoration: none;
+        background-color: #606c76;
+        border-radius: 4px;
+        cursor: pointer;
+        color: #fff;
+        text-align: center;
+        margin-bottom: 10px;
+    }
+    .toggle-link:hover {
+        background-color: #D33C47;
+    }
+
+    .code-dump,
+    pre {
+        background: #fff;
+        border-radius: 4px;
+        padding: 5px;
+        white-space: pre-wrap;
+        box-shadow: 0 7px 14px 0 rgba(60,66,87, 0.1), 0 3px 6px 0 rgba(0, 0, 0, .07);
+        margin: 0;
     }
 
     .error,
     .error-subheading {
         font-size: 18px;
         margin-top: 0;
-        padding: 10px;
-        border: 1px solid #EDBD26;
+        padding: 20px 16px;
     }
     .error-subheading {
-        background: #1798A5;
         color: #fff;
-        border: 1px solid #02808C;
+        background-color: #2f365f;
+    }
+    .error-subheading strong {
+        color: #fff;
+        background-color: #6574cd;
+        border-radius: 9999px;
+        padding: 4px 12px;
+        margin-right: 8px;
     }
     .error {
-        background: #ffd54f;
+        color: #fff;
+        background: #2779BD;
     }
-    .customize {
-        opacity: 0.6;
+    .error strong {
+        color: #fff;
+        background-color: #6CB2EB;
+        border-radius: 9999px;
+        padding: 4px 12px;
+        margin-right: 8px;
     }
 
     .stack-trace {
@@ -104,8 +134,7 @@
         padding: 0;
     }
     .stack-frame {
-        padding: 10px;
-        border-bottom: 1px solid #212121;
+        padding: 15px 10px;
     }
     .stack-frame:last-child {
         border-bottom: none;
@@ -117,14 +146,27 @@
     }
     .stack-frame.active {
         background: #e5e5e5;
+        border-radius: 4px;
     }
     .stack-frame a:hover {
         text-decoration: underline;
     }
+    .stack-frame-header {
+        display: flex;
+        align-items: center;
+    }
+    .stack-frame-args {
+        flex: 0 0 150px;
+    }
+    .stack-frame-file {
+        flex: 1;
+        word-break:break-all;
+        margin-right: 10px;
+        font-size: 16px;
+    }
     .stack-file,
     .stack-function {
         display: block;
-        margin-bottom: 5px;
     }
 
     .stack-frame-file,
@@ -141,31 +183,15 @@
 
     .stack-details {
         background: #ececec;
-        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
-        border: 1px solid #ababab;
+        border-radius: 4px;
+        box-shadow: 0 7px 14px 0 rgba(60,66,87, 0.1), 0 3px 6px 0 rgba(0, 0, 0, .07);
         padding: 10px;
         margin-bottom: 18px;
     }
-    .stack-frame-args {
-        float: right;
-    }
-
-    .toggle-link {
-        color: #1798A5;
-        text-decoration: none;
-    }
-    .toggle-link:hover {
-        text-decoration: underline;
-    }
-    .toggle-vendor-frames {
-        padding: 5px;
-        display: block;
-        text-align: center;
-    }
 
     .code-excerpt {
         width: 100%;
-        margin: 5px 0;
+        margin: 10px 0;
         background: #fefefe;
     }
     .code-highlight {
@@ -200,98 +226,98 @@
 </head>
 <body>
     <header>
+        <!-- <div class="header-help">
+            <a target="_blank" href="https://book.cakephp.org/3.0/">Documentation</a>
+            <a target="_blank" href="https://api.cakephp.org/">API</a>
+        </div> -->
         <h1 class="header-title">
             <?= h($this->fetch('title')) ?>
-            <span class="header-type"><?= get_class($error) ?></span>
         </h1>
-        <div class="header-help">
-            <a target="_blank" href="https://book.cakephp.org/3.0/">Documentation</a>
-            <a target="_blank" href="https://api.cakephp.org/">API</a>
-        </div>
+        <span class="header-type"><?= get_class($error) ?></span>
     </header>
+    <div class="error-content">
+        <div class="col-left">
+            <?= $this->element('exception_stack_trace_nav') ?>
+        </div>
+        <div class="col-right">
+            <?php if ($this->fetch('subheading')): ?>
+            <p class="error-subheading">
+                <?= $this->fetch('subheading') ?>
+            </p>
+            <?php endif; ?>
 
-    <div class="error-contents">
-        <?php if ($this->fetch('subheading')): ?>
-        <p class="error-subheading">
-            <?= $this->fetch('subheading') ?>
-        </p>
-        <?php endif; ?>
+            <?= $this->element('exception_stack_trace'); ?>
 
-        <?= $this->element('exception_stack_trace'); ?>
+            <div class="error-suggestion">
+                <?= $this->fetch('file') ?>
+            </div>
 
-        <div class="error-suggestion">
-            <?= $this->fetch('file') ?>
+            <?php if ($this->fetch('templateName')): ?>
+            <p class="customize">
+                If you want to customize this error message, create
+                <em><?= APP_DIR . DIRECTORY_SEPARATOR . 'Template' . DIRECTORY_SEPARATOR . 'Error' . DIRECTORY_SEPARATOR . $this->fetch('templateName') ?></em>
+            </p>
+            <?php endif; ?>
         </div>
-
-        <?php if ($this->fetch('templateName')): ?>
-        <p class="customize">
-            If you want to customize this error message, create
-            <em><?= 'templates' . DIRECTORY_SEPARATOR . 'Error' . DIRECTORY_SEPARATOR . $this->fetch('templateName') ?></em>
-        </p>
-        <?php endif; ?>
-    </div>
-
-    <div class="error-nav">
-        <?= $this->element('exception_stack_trace_nav') ?>
     </div>
 
-<script type="text/javascript">
-function bindEvent(selector, eventName, listener) {
-    var els = document.querySelectorAll(selector);
-    for (var i = 0, len = els.length; i < len; i++) {
-        els[i].addEventListener(eventName, listener, false);
-    }
-}
+    <script type="text/javascript">
+        function bindEvent(selector, eventName, listener) {
+            var els = document.querySelectorAll(selector);
+            for (var i = 0, len = els.length; i < len; i++) {
+                els[i].addEventListener(eventName, listener, false);
+            }
+        }
 
-function toggleElement(el) {
-    if (el.style.display === 'none') {
-        el.style.display = 'block';
-    } else {
-        el.style.display = 'none';
-    }
-}
+        function toggleElement(el) {
+            if (el.style.display === 'none') {
+                el.style.display = 'block';
+            } else {
+                el.style.display = 'none';
+            }
+        }
 
-function each(els, cb) {
-    var i, len;
-    for (i = 0, len = els.length; i < len; i++) {
-        cb(els[i], i);
-    }
-}
+        function each(els, cb) {
+            var i, len;
+            for (i = 0, len = els.length; i < len; i++) {
+                cb(els[i], i);
+            }
+        }
 
-window.addEventListener('load', function() {
-    bindEvent('.stack-frame-args', 'click', function(event) {
-        var target = this.dataset['target'];
-        var el = document.getElementById(target);
-        toggleElement(el);
-        event.preventDefault();
-    });
+        window.addEventListener('load', function() {
+            bindEvent('.stack-frame-args', 'click', function(event) {
+                var target = this.dataset['target'];
+                var el = document.getElementById(target);
+                toggleElement(el);
+                event.preventDefault();
+            });
 
-    var details = document.querySelectorAll('.stack-details');
-    var frames = document.querySelectorAll('.stack-frame');
-    bindEvent('.stack-frame a', 'click', function(event) {
-        each(frames, function(el) {
-            el.classList.remove('active');
-        });
-        this.parentNode.classList.add('active');
+            var details = document.querySelectorAll('.stack-details');
+            var frames = document.querySelectorAll('.stack-frame');
+            bindEvent('.stack-frame a', 'click', function(event) {
+                each(frames, function(el) {
+                    el.classList.remove('active');
+                });
+                this.parentNode.classList.add('active');
 
-        each(details, function(el) {
-            el.style.display = 'none';
-        });
+                each(details, function(el) {
+                    el.style.display = 'none';
+                });
 
-        var target = document.getElementById(this.dataset['target']);
-        toggleElement(target);
-        event.preventDefault();
-    });
+                var target = document.getElementById(this.dataset['target']);
+                toggleElement(target);
+                event.preventDefault();
+            });
 
-    bindEvent('.toggle-vendor-frames', 'click', function(event) {
-        each(frames, function(el) {
-            if (el.classList.contains('vendor-frame')) {
-                toggleElement(el);
-            }
+            bindEvent('.toggle-vendor-frames', 'click', function(event) {
+                each(frames, function(el) {
+                    if (el.classList.contains('vendor-frame')) {
+                        toggleElement(el);
+                    }
+                });
+                event.preventDefault();
+            });
         });
-        event.preventDefault();
-    });
-});
-</script>
+    </script>
 </body>
 </html>