Devtools:-Removed unused CSS (facebook#27032)

I tried to check out for the CSS bundle using the
[eslint-plugin-css-modules](https://www.npmjs.com/package/eslint-plugin-css-modules),
and ran it locally , seems like There are lot of unused styles and
classes present .
I have attached the output below after running the lint command.

https://gist.github.com/Biki-das/647ceb7383b43cca9c8619e1dc33fe0d

All the shared.css files should not be touched i feel as they are being
used randomly by some file

Thoughts @hoxyq

Author: Biki-das

packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css

@@ -33,8 +33,3 @@
   background-color: var(--color-button-background-focus);
   outline: none;
 }
-
-.ResetButton {
-  flex: 0 0 auto;
-  padding: 0 0.5rem;
-}

packages/react-devtools-shared/src/devtools/views/Components/Element.css

@@ -22,11 +22,6 @@
   user-select: none;
 }
 
-.ScrollAnchor {
-  height: 100%;
-  width: 0;
-}
-
 .SelectedElement {
   background-color: var(--color-background-selected);
   color: var(--color-text-selected);

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

@@ -264,24 +264,20 @@ export default function InspectedElementWrapper(_: Props): React.Node {
           <div
             className={
               element.isStrictModeNonCompliant
-                ? styles.StrictModeNonCompliantComponent
+                ? styles.StrictModeNonCompliant
                 : styles.Component
             }
             title={element.displayName}>
             {element.displayName}
           </div>
         </div>
         {canOpenInEditor && (
-          <Button
-            className={styles.IconButton}
-            onClick={onOpenInEditor}
-            title="Open in editor">
+          <Button onClick={onOpenInEditor} title="Open in editor">
             <ButtonIcon type="editor" />
           </Button>
         )}
         {canToggleError && (
           <Toggle
-            className={styles.IconButton}
             isChecked={isErrored}
             onChange={toggleErrored}
             title={
@@ -294,7 +290,6 @@ export default function InspectedElementWrapper(_: Props): React.Node {
         )}
         {canToggleSuspense && (
           <Toggle
-            className={styles.IconButton}
             isChecked={isSuspended}
             onChange={toggleSuspended}
             title={
@@ -307,23 +302,20 @@ export default function InspectedElementWrapper(_: Props): React.Node {
         )}
         {store.supportsNativeInspection && (
           <Button
-            className={styles.IconButton}
             onClick={highlightElement}
             title="Inspect the matching DOM element">
             <ButtonIcon type="view-dom" />
           </Button>
         )}
         {!hideLogAction && (
           <Button
-            className={styles.IconButton}
             onClick={logElement}
             title="Log this component data to the console">
             <ButtonIcon type="log-data" />
           </Button>
         )}
         {!hideViewSourceAction && (
           <Button
-            className={styles.IconButton}
             disabled={!canViewSource}
             onClick={viewSource}
             title="View source for this element">

packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css

@@ -2,10 +2,6 @@
   display: flex;
 }
 
-.DisabledItem {
-  opacity: 0.5;
-}
-
 .Name {
   color: var(--color-attribute-name-not-editable);
   flex: 0 0 auto;
@@ -40,20 +36,11 @@
   flex: 1;
 }
 
-.None {
-  color: var(--color-dimmer);
-  font-style: italic;
-}
-
 .ExpandCollapseToggleSpacer {
   flex: 0 0 1rem;
   width: 1rem;
 }
 
-.Empty {
-  color: var(--color-dimmer);
-}
-
 .DeleteArrayItemButton {
   padding: 0;
   margin-right: 0.125rem;

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css

@@ -50,9 +50,3 @@
   box-shadow: 0px 1px 3px var(--color-shadow);
 }
 
-.Empty {
-  color: var(--color-dimmer);
-  font-style: italic;
-  user-select: none;
-  padding-left: 1rem;
-}

packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.css

@@ -13,7 +13,6 @@
   color: var(--color-text-invalid) !important;
 }
 
-.Input:focus,
 .Invalid:focus {
   background-color: var(--color-button-background-focus);
 }

packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js

@@ -191,10 +191,7 @@ export default function OwnerStack(): React.Node {
           ))}
       </div>
       <div className={styles.VRule} />
-      <Button
-        className={styles.IconButton}
-        onClick={() => selectOwner(null)}
-        title="Back to tree view">
+      <Button onClick={() => selectOwner(null)} title="Back to tree view">
         <ButtonIcon type="close" />
       </Button>
     </div>

packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css

@@ -22,10 +22,6 @@
   text-overflow: ellipsis;
 }
 
-.Label {
-  font-weight: bold;
-}
-
 .CurrentCommit {
   margin: 0.25rem 0;
   display: block;

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css

@@ -13,10 +13,6 @@
   overflow-y: auto;
 }
 
-.WhatChanged {
-  margin-bottom: 1rem;
-}
-
 .Component {
   flex: 1;
   color: var(--color-component-name);

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js

@@ -108,7 +108,6 @@ export default function SidebarSelectedFiberInfo(_: Props): React.Node {
         </div>
 
         <Button
-          className={styles.IconButton}
           onClick={() => selectFiber(null, null)}
           title="Back to commit view">
           <ButtonIcon type="close" />