Refactor all of Devtools and tidy it up (#8097)

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -14,36 +14,40 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_DevTools_content {
-    margin: 10px 0;
+.mx_DevtoolsDialog_wrapper {
+    .mx_Dialog {
+        height: 100%;
+    }
+
+    .mx_Dialog_fixedWidth {
+        overflow-y: hidden;
+        height: 100%;
+    }
 }
 
-.mx_DevTools_ServersInRoomList_button {
-    /* Set the cursor back to default as `.mx_Dialog button` sets it to pointer */
-    cursor: default !important;
+.mx_DevTools_content {
+    margin: 10px 0;
+    overflow-y: auto;
+    height: calc(100% - 124px); // 58px for buttons + 50px for header + 8px margin around
 }
 
 .mx_DevTools_RoomStateExplorer_query {
     margin-bottom: 10px;
 }
 
-.mx_DevTools_RoomStateExplorer_button {
-    font-family: monospace;
+.mx_DevTools_button {
+    font-family: monospace !important;
+    margin-bottom: 8px !important;
 }
 
 .mx_DevTools_RoomStateExplorer_button_hasSpaces {
     text-decoration: underline;
 }
 
-.mx_DevTools_RoomStateExplorer_button.mx_DevTools_RoomStateExplorer_button_emptyString {
+.mx_DevTools_button.mx_DevTools_RoomStateExplorer_button_emptyString {
     font-style: italic;
 }
 
-.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_ServersInRoomList_button {
-    margin-bottom: 10px;
-    width: 100%;
-}
-
 .mx_DevTools_label_left {
     float: left;
 }
@@ -83,108 +87,6 @@ limitations under the License.
     margin-right: 42px;
 }
 
-.mx_DevTools_tgl {
-    display: none;
-
-    // add default box-sizing for this scope
-    &,
-    &::after,
-    &::before,
-    & *,
-    & *::after,
-    & *::before,
-    & + .mx_DevTools_tgl-btn {
-        box-sizing: border-box;
-        &::selection {
-            background: none;
-        }
-    }
-
-    + .mx_DevTools_tgl-btn {
-        outline: 0;
-        display: block;
-        width: 7em;
-        height: 2em;
-        position: relative;
-        cursor: pointer;
-        user-select: none;
-        &::after,
-        &::before {
-            position: relative;
-            display: block;
-            content: "";
-            width: 50%;
-            height: 100%;
-        }
-
-        &::after {
-            left: 0;
-        }
-
-        &::before {
-            display: none;
-        }
-    }
-
-    &:checked + .mx_DevTools_tgl-btn::after {
-        left: 50%;
-    }
-}
-
-.mx_DevTools_tgl-flip {
-    + .mx_DevTools_tgl-btn {
-        padding: 2px;
-        transition: all .2s ease;
-        perspective: 100px;
-        &::after,
-        &::before {
-            display: inline-block;
-            transition: all .4s ease;
-            width: 100%;
-            text-align: center;
-            position: absolute;
-            line-height: 2em;
-            font-weight: bold;
-            color: #fff;
-            top: 0;
-            left: 0;
-            backface-visibility: hidden;
-            border-radius: 4px;
-        }
-
-        &::after {
-            content: attr(data-tg-on);
-            background: #02c66f;
-            transform: rotateY(-180deg);
-        }
-
-        &::before {
-            background: #ff3a19;
-            content: attr(data-tg-off);
-        }
-
-        &:active::before {
-            transform: rotateY(-20deg);
-        }
-    }
-
-    &:checked + .mx_DevTools_tgl-btn {
-        &::before {
-            transform: rotateY(180deg);
-        }
-
-        &::after {
-            transform: rotateY(0);
-            left: 0;
-            background: #7fc6a6;
-        }
-
-        &:active::after {
-            transform: rotateY(20deg);
-        }
-    }
-}
-
 .mx_DevTools_VerificationRequest {
     border: 1px solid #cccccc;
     border-radius: 3px;

res/css/views/rooms/_RoomTile.scss

@@ -292,6 +292,10 @@ limitations under the License.
         mask-image: url('$(res)/img/element-icons/export.svg');
     }
 
+    .mx_RoomTile_iconDeveloperTools::before {
+        mask-image: url('$(res)/img/element-icons/settings/flask.svg');
+    }
+
     .mx_RoomTile_iconCopyLink::before {
         mask-image: url('$(res)/img/element-icons/link.svg');
     }