Devtools: [WIP] Implement enhanced devtools extension language APIs

Source/devtools/front_end/ui/suggestBox.css

 /*
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 40 matching lines @@
 
 .suggest-box-top-spacer {
     flex: auto;
 }
 
 :host(.under-anchor) .suggest-box-top-spacer,
 :host(:not(.under-anchor)) .suggest-box-bottom-spacer {
     flex: 0 0 auto;
 }
 
+.suggest-box-container {
+    display: flex;
+    flex-direction: row;
+}
+
 .suggest-box {
     background-color: #FFFFFF;
     border: 1px solid rgb(66%, 66%, 66%);
     pointer-events: auto;
     margin-left: -3px;
     overflow-x: hidden;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     flex: 0 0 auto;
@@ skipping 24 matching lines @@
     width: 20px;
 }
 
 .suggest-box .suggest-box-content-item.selected {
     background-color: rgba(56, 121, 217, 0.1);
 }
 
 .suggest-box .suggest-box-content-item:hover:not(.selected) {
     border: 1px solid rgb(204, 204, 204);
 }
+
+.details-popup {
+    background-color: #FFFFFF;
+    border: 1px solid rgb(66%, 66%, 66%);
+    padding: 17px;
+    pointer-events: auto;
+    margin-left: 3px;
+    max-width: 750px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 auto;
+    border-radius: 5px 5px 5px 0;
+    word-wrap: normal;
+}
+
+.details-popup .description {
+    margin-top: 22px;
+    color: #808080;
+}
+
+.details-fade-in {
+    animation: details-fade-in 0.5s linear 0s 1 forwards;
+}
+
+@keyframes details-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}