Improve contrast for vendor frames and regular frames.

Move the collapse arrow to the left so its relation to the line text is
more obvious.

templates/element/dev_error_stacktrace.php

@@ -61,9 +61,16 @@ foreach ($exceptions as $level => $exc):
         $activeFrame = $i == 0;
         $vendorFrame = isset($stack['file']) && strpos($stack['file'], APP) === false ? 'vendor-frame' : '';
     ?>
-        <li id="stack-frame-<?= $frameId ?>" class="stack-frame">
+        <li id="stack-frame-<?= $frameId ?>" class="stack-frame <?= $vendorFrame ?>">
             <div class="stack-frame-header">
-                <div class="stack-frame-header-content <?= $vendorFrame ?>">
+                <button
+                    data-frame-id="<?= h($frameId) ?>"
+                    class="stack-frame-toggle <?= $activeFrame ? 'active' : '' ?>"
+                >
+                    &#x25BC;
+                </button>
+
+                <div class="stack-frame-header-content">
                     <span class="stack-frame-file">
                         <?= h(Debugger::trimPath($file)); ?>
                     </span>
@@ -88,13 +95,6 @@ foreach ($exceptions as $level => $exc):
                         <?= $this->Html->link('(edit)', Debugger::editorUrl($file, $line), ['class' => 'stack-frame-edit']); ?>
                     <?php endif; ?>
                 </div>
-
-                <button 
-                    data-frame-id="<?= h($frameId) ?>"
-                    class="stack-frame-toggle <?= $activeFrame ? 'active' : '' ?>"
-                >
-                    &#x25BC;
-                </button>
             </div>
             <div
                 class="stack-frame-contents"

templates/layout/dev_error.php

@@ -36,7 +36,7 @@ use Cake\Error\Debugger;
         --layout-padding: 30px;
         --layout-vertical-gap: 20px;
 
-        --color-vendor-frame: #8c8c8c;
+        --color-vendor-frame: #7c7c7c;
 
         --breakpoint-tablet: 810px;
     }
@@ -168,13 +168,15 @@ use Cake\Error\Debugger;
         border-radius: var(--border-radius);
     }
     .stack-frame {
-        background: #e5e5e5;
         padding: 10px;
-        background: #ececec;
+        background: #eaeaea;
         padding: 10px;
         border-bottom: 2px solid #f5f7fa;
         overflow: hidden;
     }
+    .vendor-frame {
+        background: #f1f1f1;
+    }
     .stack-frame:first-child {
         border-radius: var(--border-radius) var(--border-radius) 0 0;
     }
@@ -197,14 +199,15 @@ use Cake\Error\Debugger;
     /* Stack frame headers */
     .stack-frame-header {
         display: flex;
-        justify-content: space-between;
+        align-items: center;
+        gap: 10px;
     }
     .stack-frame-header-content {
         display: flex;
         gap: 8px;
     }
-    .stack-frame-header-content.vendor-frame ,
-    .stack-frame-header-content.vendor-frame a {
+    .vendor-frame .stack-frame-header-content,
+    .vendor-frame .stack-frame-header-content  a {
         color: var(--color-vendor-frame);
     }
     @media (max-width: 810px) {
@@ -253,6 +256,9 @@ use Cake\Error\Debugger;
     .stack-frame-toggle.active {
         transform: rotate(180deg);
     }
+    .stack-frame-header .stack-frame-toggle {
+        opacity: 0.7;
+    }
 
     .stack-frame-args {
         display: block;
@@ -333,9 +339,9 @@ use Cake\Error\Debugger;
             </p>
             <?php endif; ?>
 
-            <div class="error-suggestion">
-                <?= $this->fetch('file') ?>
-            </div>
+<div class="error-suggestion">
+<?= $this->fetch('file') ?>
+</div>
 
             <?= $this->element('dev_error_stacktrace'); ?>