refactor(devtools): rearrange main toolbar menu buttons (#62684)

Place the version in the info menu and move both the info and gear buttons to the right-hand side of the toolbar.

PR Close #62684

devtools/cypress/integration/comment-nodes.e2e.js

@@ -7,7 +7,7 @@
  */
 
 function showComments() {
-  cy.get('#main-toolbar > .tools > button:nth-child(2)').click();
+  cy.get('.main-toolbar > .settings > button:last-child').click();
   cy.get('.cdk-overlay-container mat-slide-toggle + span:contains("Show comment nodes")').click();
 }
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html

@@ -1,14 +1,13 @@
-<section id="main-toolbar">
+<section class="main-toolbar">
   <div class="tools">
-    <button (click)="toggleInspector()" matTooltip="Inspect element" aria-label="Inspect element">
+    <button
+      class="toolbar-btn"
+      (click)="toggleInspector()"
+      matTooltip="Inspect element"
+      aria-label="Inspect element"
+    >
       <mat-icon [class.inspector-active]="inspectorRunning()"> pin_end </mat-icon>
     </button>
-    <button [matMenuTriggerFor]="menu" matTooltip="Open settings" aria-label="Open settings">
-      <mat-icon> settings </mat-icon>
-    </button>
-    <button [matMenuTriggerFor]="info" matTooltip="Info" aria-label="Info">
-      <mat-icon> info </mat-icon>
-    </button>
   </div>
 
   <select
@@ -43,30 +42,20 @@
     }
   </nav>
 
-  @if (angularVersion()) {
-    <div id="app-angular-version">
-      Angular version:
-
-      @if (majorAngularVersion() > 12 || majorAngularVersion() == 0) {
-        <span id="version-number">
-          {{ angularVersion() }}
-        </span>
-      } @else {
-        <span
-          id="version-number"
-          matTooltip="
-            Angular Devtools supports Angular versions 12 and above. Some DevTools features may be available in
-            older versions of Angular, but it is not officially supported.
-          "
-          class="unsupported-version"
-        >
-          {{ angularVersion() }} (unsupported)
-        </span>
-      }
-
-      | DevTools: {{ extensionVersion() }}
-    </div>
-  }
+  <div class="settings">
+    <div class="ver-ruler"></div>
+    <button class="toolbar-btn" [matMenuTriggerFor]="info" matTooltip="Info" aria-label="Info">
+      <mat-icon> info </mat-icon>
+    </button>
+    <button
+      class="toolbar-btn"
+      [matMenuTriggerFor]="menu"
+      matTooltip="Open settings"
+      aria-label="Open settings"
+    >
+      <mat-icon> settings </mat-icon>
+    </button>
+  </div>
 </section>
 
 <mat-tab-nav-panel #tabPanel>
@@ -152,16 +141,32 @@
 </mat-menu>
 
 <mat-menu #info="matMenu">
+  <p mat-menu-item class="version-label">
+    Angular version:
+    @if (majorAngularVersion() > 12 || majorAngularVersion() === 0) {
+      {{ angularVersion() }}
+    } @else {
+      <span
+        matTooltip="
+          Angular Devtools supports Angular versions 12 and above. Some DevTools features may be available in
+          older versions of Angular, but it is not officially supported.
+        "
+      >
+        {{ angularVersion() }} (unsupported)
+      </span>
+    }
+  </p>
+  <p mat-menu-item class="version-label">DevTools version: {{ extensionVersion() }}</p>
   <a mat-menu-item href="https://angular.dev/tools/devtools" target="_blank">
-    <mat-icon>library_books</mat-icon>
+    <mat-icon class="menu-icon">library_books</mat-icon>
     Guide
   </a>
   <a mat-menu-item href="https://github.com/angular/angular" target="_blank">
-    <mat-icon>launch</mat-icon>
+    <mat-icon class="menu-icon">launch</mat-icon>
     GitHub
   </a>
   <a mat-menu-item href="https://github.com/angular/angular/issues" target="_blank">
-    <mat-icon>bug_report</mat-icon>
+    <mat-icon class="menu-icon">bug_report</mat-icon>
     Issues
   </a>
 </mat-menu>

devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss

@@ -1,95 +1,84 @@
 @use '../../styles/typography';
 
+$toolbar-height: 30px;
+
 :host {
   position: relative;
   width: 100%;
   height: 100%;
   display: block;
-}
 
-.tab-content {
-  position: relative;
-  height: calc(100% - 31px);
-}
-
-#main-toolbar {
-  border-bottom: 1px solid var(--color-separator);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-
-  .tools {
+  .main-toolbar {
+    border-bottom: 1px solid var(--color-separator);
     display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding-inline: 0.1rem;
+    box-sizing: border-box;
 
-    button {
+    .toolbar-btn {
       background: none;
       border: none;
-      cursor: pointer;
-      opacity: 0.8;
       color: var(--secondary-contrast);
+      padding-inline: 0.375rem;
+      cursor: pointer;
 
-      &:active {
-        opacity: 1;
+      mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
       }
     }
 
-    .inspector-active {
-      color: var(--blue-02) !important;
+    .tools {
+      display: flex;
+
+      .inspector-active {
+        color: var(--dynamic-blue-02);
+      }
+    }
+
+    .frame-selector {
+      width: 100px;
+      margin: 0 0.5rem;
+    }
+
+    .tab-link {
+      @extend %body-medium-01;
+      min-width: unset;
+      padding: 0 0.625rem;
+      height: $toolbar-height;
+    }
+
+    .settings {
+      flex: 1;
+      display: flex;
+      justify-content: end;
+      align-items: center;
+      height: 22px;
+
+      .ver-ruler {
+        margin-inline: 0.125rem;
+        height: 80%;
+      }
     }
   }
 
-  .tab-link {
-    @extend %body-medium-01;
-    min-width: unset;
-    padding: 0 0.625rem;
-    height: 30px;
+  .tab-content {
+    position: relative;
+    height: calc(100% - #{$toolbar-height + 1px});
   }
 }
 
-#app-angular-version {
-  align-self: center;
-  margin-left: auto;
-  margin-right: 8px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+.menu-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
 }
 
-#version-number {
-  color: var(--blue-02);
-  cursor: text;
-  -moz-user-select: text;
-  -khtml-user-select: text;
-  -webkit-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
-
-  &.unsupported-version {
-    color: var(--red-04);
-  }
-}
-
-mat-icon {
-  font-size: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-@media only screen and (max-width: 700px) {
-  #app-angular-version {
-    max-width: 135px;
-  }
-}
-
-@media only screen and (max-width: 420px) {
-  #app-angular-version {
-    display: none;
-  }
-}
-
-.frame-selector {
-  width: 100px;
-  margin: 0 0.5rem;
+.version-label {
+  cursor: default;
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts

@@ -115,7 +115,7 @@ export class DevToolsTabsComponent {
     return parseInt(version.toString().split('.')[0], 10);
   });
 
-  readonly extensionVersion = signal('Development Build');
+  readonly extensionVersion = signal('dev-build');
 
   public tabUpdate = inject(TabUpdate);
   public themeService = inject(ThemeService);