Restyle developer tools UI and add a notification for new dash versions

dash/dash-renderer/src/components/core/Toolbar.css

@@ -6,13 +6,12 @@
     text-align: center;
     z-index: 9999;
     background-color: rgba(255, 255, 255, 0.9);
-
 }
-._dash-undo-redo>div {
+._dash-undo-redo > div {
     position: relative;
 }
 ._dash-undo-redo-link {
-    color: #0074D9;
+    color: #0074d9;
     cursor: pointer;
     margin-left: 10px;
     margin-right: 10px;

dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css

@@ -1,16 +1,15 @@
 .dash-callback-dag--container {
     border-radius: 4px;
-    position: fixed;
-    bottom: 165px;
-    right: 16px;
     width: 80vw;
-    height: calc(100vh - 180px);
-    overflow: auto;
+    position: relative;
+    height: calc(100vh - 75px);
+    overflow: hidden;
     box-sizing: border-box;
     background: #ffffff;
     display: inline-block;
     /* shadow-1 */
-    box-shadow: 0px 6px 16px rgba(80, 103, 132, 0.165),
+    box-shadow:
+        0px 6px 16px rgba(80, 103, 132, 0.165),
         0px 2px 6px rgba(80, 103, 132, 0.12),
         0px 0px 1px rgba(80, 103, 132, 0.32);
 }
@@ -25,9 +24,9 @@
     max-height: 50%;
     overflow: auto;
     box-sizing: border-box;
-    background: rgba(255,255,255,0.9);
+    background: rgba(255, 255, 255, 0.9);
     border: 2px solid #ccc;
-    font-family: "Arial", sans-serif;
+    font-family: Verdana, sans-serif;
 }
 
 .dash-callback-dag--message {
@@ -37,11 +36,11 @@
     align-items: center;
     height: 100%;
     line-height: 2em;
-    font-family: "Arial", sans-serif;
+    font-family: Verdana, sans-serif;
 }
 
 .dash-callback-dag--layoutSelector {
     position: absolute;
-    top: 10px;
-    right: 10px;
+    top: 3px;
+    right: 3px;
 }

dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainerStylesheet.js

@@ -3,7 +3,7 @@ const stylesheet = [
         selector: '*',
         style: {
             'font-size': 12,
-            'font-family': '"Arial", sans-serif'
+            'font-family': 'Verdana, sans-serif'
         }
     },
 

dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css

@@ -1,23 +1,21 @@
 .error-container {
-    margin-top: 10px;
+    padding: 0 10px;
 }
 
 .dash-fe-error__icon-x {
     position: absolute;
     right: 0;
     top: 0;
-    color: #B9C2CE;
+    color: #b9c2ce;
     font-size: 20px;
     cursor: pointer;
-    margin-right: 10px
+    margin-right: 10px;
 }
 
-.dash-fe-error__icon-x:hover
-{
- color:#a1a9b5;
+.dash-fe-error__icon-x:hover {
+    color: #a1a9b5;
 }
 
-
 .dash-fe-errors {
     min-width: 386px;
     max-width: 650px;
@@ -44,13 +42,6 @@
     height: 28px;
     margin: 0px 8px;
 }
-.dash-fe-error-top {
-    height: 20px;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    cursor: pointer;
-}
 .dash-fe-error-top__group:first-child {
     /*
      * 77% is the maximum space allowed based off of the other elements
@@ -67,11 +58,12 @@
     margin: 0px;
     margin-left: 5px;
     padding: 0px;
-    font-size: 14px;
+    font-size: 12.6px;
     display: inline-block;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    line-height: 20px;
 }
 .dash-fe-error__timestamp {
     margin-right: 20px;
@@ -119,7 +111,7 @@
 .dash-fe-error__curved-bottom {
     border-radius-bottom-left: 4px;
     border-radius-bottom-right: 4px;
-    background-color: #FFEFEF;
+    background-color: #ffefef;
 }
 
 .dash-be-error__st {
@@ -139,3 +131,106 @@
     display: inline-block;
     white-space: pre-wrap;
 }
+
+.dash-error-menu {
+    max-width: 50%;
+    max-height: 60%;
+    display: contents;
+    font-family: monospace;
+    font-size: 14px;
+    font-variant-ligatures: common-ligatures;
+    color: rgb(50, 50, 50);
+}
+
+.dash-error-card {
+    box-sizing: border-box;
+    display: inline-block;
+    /* shadow-1 */
+    border-radius: 4px;
+    animation: dash-error-card-animation 0.5s;
+    padding: 24px;
+    text-align: left;
+    background: transparent;
+    width: 100%;
+}
+.dash-error-card--alerts-tray {
+    position: absolute;
+    top: -300px;
+    left: -1px;
+    animation: none;
+    box-shadow: none;
+    border: 1px solid #ececec;
+    border-bottom: 0;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    width: 422px;
+}
+.dash-error-card--container {
+    padding: 16px;
+    width: 600px;
+    max-width: 800px;
+    margin-bottom: 4px;
+    background-color: white;
+    overflow: auto;
+    border-radius: 6px;
+    box-shadow:
+        0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
+        0px 1.9px 4px 0px rgba(0, 0, 0, 0.05),
+        0px 4.5px 10px 0px rgba(0, 0, 0, 0.05);
+}
+
+.dash-error-card__topbar {
+    width: 100%;
+    height: 32px;
+    display: flex;
+    justify-content: flex-start;
+    font-size: 14px;
+    align-items: center;
+    position: relative;
+    padding-bottom: 14px;
+    font-weight: 700;
+}
+.dash-error-card__message {
+    font-size: 14px;
+}
+
+.dash-error-card__message > strong {
+    color: #ff4500;
+}
+
+.dash-error-card__content {
+    box-sizing: border-box;
+    background-color: white;
+    border-radius: 2px;
+    margin-bottom: 15px;
+    border: 1px solid #0018661a;
+    font-family: Courier;
+    font-size: 12.6px;
+}
+
+.dash-fe-error-item {
+    background: #ffffff;
+    border-radius: 2px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px;
+    cursor: pointer;
+}
+
+@keyframes dash-error-card-animation {
+    from {
+        opacity: 0;
+        -webkit-transform: scale(1.1);
+        -moz-transform: scale(1.1);
+        -ms-transform: scale(1.1);
+        transform: scale(1.1);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+    }
+}

dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js

@@ -1,6 +1,6 @@
 import {connect} from 'react-redux';
 import './FrontEndError.css';
-import {Component} from 'react';
+import {Component, useRef, useState, useEffect} from 'react';
 import CollapseIcon from '../icons/CollapseIcon.svg';
 import PropTypes from 'prop-types';
 import '../Percy.css';
@@ -27,11 +27,10 @@ class FrontEndError extends Component {
         /* eslint-disable no-inline-comments */
         const errorHeader = (
             <div
-                className='dash-fe-error-top test-devtools-error-toggle'
+                className='dash-fe-error-item test-devtools-error-toggle'
                 onClick={() => this.setState({collapsed: !collapsed})}
             >
                 <span className='dash-fe-error-top__group'>
-                    ⛑️
                     <span className='dash-fe-error__title'>
                         {e.error.message || 'Error'}
                     </span>
@@ -56,19 +55,69 @@ class FrontEndError extends Component {
                 </span>
             </div>
         );
-        /* eslint-enable no-inline-comments */
 
-        return collapsed ? (
-            <div className='dash-error-card__list-item'>{errorHeader}</div>
-        ) : (
+        return (
             <div className={cardClasses}>
                 {errorHeader}
-                <ErrorContent error={e.error} />
+                {!collapsed && <ErrorContent error={e.error} />}
             </div>
         );
     }
 }
 
+function BackendError({error, base}) {
+    const iframeRef = useRef(null);
+    const [height, setHeight] = useState('500px'); // Default height
+
+    useEffect(() => {
+        const handleMessage = event => {
+            if (
+                event.data &&
+                typeof event.data === 'object' &&
+                event.data.type === 'IFRAME_HEIGHT'
+            ) {
+                setHeight(`${event.data.height}px`);
+            }
+        };
+
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+
+    return (
+        <iframe
+            ref={iframeRef}
+            srcDoc={error.html
+                .replace(
+                    '</head>',
+                    `<style type="text/css">${werkzeugCss}</style>
+                    <script>
+  function sendHeight() {
+    const height = document.body.scrollHeight;
+    window.parent.postMessage({ type: "IFRAME_HEIGHT", height }, "*");
+  }
+
+  window.addEventListener("load", sendHeight);
+  window.addEventListener("resize", sendHeight);
+  window.addEventListener("click", sendHeight);
+</script></head>`
+                )
+                .replace('="?__debugger__', `="${base}?__debugger__`)}
+            style={{
+                /*
+                 * 67px of padding and margin between this
+                 * iframe and the parent container.
+                 * 67 was determined manually in the
+                 * browser's dev tools.
+                 */
+                width: 'calc(600px - 67px)',
+                border: 'none',
+                height: height
+            }}
+        />
+    );
+}
+
 const MAX_MESSAGE_LENGTH = 40;
 /* eslint-disable no-inline-comments */
 function UnconnectedErrorContent({error, base}) {
@@ -115,32 +164,10 @@ function UnconnectedErrorContent({error, base}) {
                 <div className='dash-be-error__st'>
                     <div className='dash-backend-error'>
                         {/* Embed werkzeug debugger in an iframe to prevent
-                        CSS leaking - werkzeug HTML includes a bunch
-                        of CSS on base html elements like `<body/>`
-                      */}
-
-                        <iframe
-                            srcDoc={error.html
-                                .replace(
-                                    '</head>',
-                                    `<style type="text/css">${werkzeugCss}</style></head>`
-                                )
-                                .replace(
-                                    '="?__debugger__',
-                                    `="${base}?__debugger__`
-                                )}
-                            style={{
-                                /*
-                                 * 67px of padding and margin between this
-                                 * iframe and the parent container.
-                                 * 67 was determined manually in the
-                                 * browser's dev tools.
-                                 */
-                                width: 'calc(600px - 67px)',
-                                height: '75vh',
-                                border: 'none'
-                            }}
-                        />
+                            CSS leaking - werkzeug HTML includes a bunch
+                            of CSS on base html elements like `<body/>`
+                        */}
+                        <BackendError error={error} base={base} />
                     </div>
                 </div>
             ) : (