UX enhancements for Devtools tabs

Developer Tools
#1

Suggested improvements to the devtools UI:

  1. Make nested tabs sortable.
    It’s currently possible to reorder the tabs that toggle the main devtools panels (Inspector, Console, Style Editor, et al). This functionality should extend to nested tab-groups as well; i.e., the Inspector pane’s right-most window should enable the user to reorder the Layout and Fonts tabs:
    figure-1

  2. Fonts tab:
    These enhancements are trivial, but nonetheless easily-implemented and unintrusive.

    1. Clicking a font’s name should jump to details about its origin.
      The highlights displayed on rollover suggests interactivity:
      figure-2

    2. Font previews should be individually-editable.
      Clicking a font’s preview-text should bring input focus to its contents, à la contenteditable="true". Changes to the master value (i.e., the preview-text field currently in-use) should overwrite any font-specific previews previously entered.

    3. Make font URLs clickable resource links.
      These should have context-menus which include commands similar to those used by other media types:

      • Open in new tab
      • Copy URL
        (This obviates the need for a dedicated “Copy URL” button).
      • Copy font as base64-encoded data: URI
        (Greyed out for URLs that already use the data: scheme)
      • Show resource in Network panel
      • Show ruleset in Style Editor

    4. Make @font-face rollout useful

      When collapsed:
      Display buttons to copy or jump to CSS source of @font-face declaration:

      figure-3

      When expanded:
      List properties on their own lines, similar to how CSS rules are displayed by the Inspector pane. Its context-menu should likewise provide the same functions for copying values/properties, jumping to their definition, etc.

  3. Add a context-menu to tab-groups.
    This should offer commands like:

    Reset tab order
    Analogous to pressing "Reset" on the devtools.toolbox.tabsOrder preference in about:config, but more discoverable by users.
    Zoom in/out and Reset zoom level
    Ctrl/Cmd‑0 and Ctrl/Cmd‑+/- can already be used to magnify the size of the devtools' contents, but exposing this functionality more explicitly may be clearer for users.
    Toggling tab visibility from a submenu
    The submenu would contain an entry for each tab that toggles its visibility in the devtools pane. Tabs are automatically revealed as needed whenever user focus is switched to a particular pane (such as the Debugger tab when a breakpoint is encountered).

(Apologies if this should’ve been split into smaller topics, or if I’ve failed to express my thoughts clearly)

Regards,
— @Alhadis