Devtools:-Removed unused CSS (#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" />

packages/react-devtools-shared/src/devtools/views/SearchInput.css

@@ -28,15 +28,11 @@
   white-space: pre;
 }
 
-.LeftVRule,
-.RightVRule {
+.LeftVRule{
   height: 20px;
   width: 1px;
   background-color: var(--color-border);
 }
 .LeftVRule {
   margin: 0 0.25rem 0 0.5rem;
 }
-.RightVRule {
-  margin: 0 0.5rem 0 0.25rem;
-}

packages/react-devtools-shared/src/devtools/views/SearchInput.js

@@ -104,7 +104,6 @@ export default function SearchInput({
           <div className={styles.LeftVRule} />
           <Button
             data-testname={testName ? `${testName}-PreviousButton` : undefined}
-            className={styles.IconButton}
             disabled={!searchText}
             onClick={goToPreviousResult}
             title={
@@ -117,7 +116,6 @@ export default function SearchInput({
           </Button>
           <Button
             data-testname={testName ? `${testName}-NextButton` : undefined}
-            className={styles.IconButton}
             disabled={!searchText}
             onClick={goToNextResult}
             title={
@@ -129,7 +127,6 @@ export default function SearchInput({
           </Button>
           <Button
             data-testname={testName ? `${testName}-ResetButton` : undefined}
-            className={styles.IconButton}
             disabled={!searchText}
             onClick={resetSearch}
             title="Reset search">

packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css

@@ -38,9 +38,6 @@
   height: 0.5rem;
 }
 
-.Select {
-}
-
 .CheckboxOption {
   display: block;
   padding: 0 0 0.5rem;

packages/react-devtools-shared/src/devtools/views/Toggle.css

@@ -46,9 +46,3 @@
   color: var(--color-button-disabled);
   cursor: default;
 }
-
-.Input {
-  width: 0;
-  margin: 0;
-  opacity: 0;
-}

packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.css

@@ -8,10 +8,6 @@
   margin-bottom: 0.5rem;  
 } 
 
-.ReleaseNotesLink { 
-  color: var(--color-button-active);  
-}
-
 .Version {
   color: var(--color-bridge-version-number);
   font-weight: bold;

packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.css

@@ -4,12 +4,6 @@
   align-items: center;  
 } 
 
-.Column { 
-  display: flex;  
-  flex-direction: column; 
-  align-items: center;  
-} 
-
 .Title {  
   font-size: var(--font-size-sans-large); 
   margin-bottom: 0.5rem;  

packages/react-devtools-timeline/src/EventTooltip.css

@@ -75,7 +75,6 @@
   margin-right: 0.25rem;
 }
 
-.InfoText,
 .WarningText {
   color: var(--color-warning-text-color);
 }

packages/react-devtools-timeline/src/Timeline.css

@@ -8,9 +8,6 @@
   justify-content: center;
 }
 
-.Paragraph {
-  text-align: center;
-}
 
 .ErrorMessage {
   margin: 0.5rem 0;
@@ -35,28 +32,3 @@
   font-size: var(--font-size-sans-large);
   margin-bottom: 0.5rem;
 }
-
-.WelcomeInstructionsList {
-}
-
-.WelcomeInstructionsListItem {
-  display: flex;
-  align-items: center;
-  line-height: 1.5rem;
-  counter-increment: li;
-}
-
-.WelcomeInstructionsListItem::before {
-  content: counter(li);
-  margin-right: 0.5rem;
-}
-
-.WelcomeInstructionsListItemLink {
-  color: var(--color-link);
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.ImportButtonLabel {
-  margin-left: 0.25rem;
-}