I agree that the new design lacks the functionality of the previous version.

Please see this video I've created that outlines some of the flaws: https://www.youtube.com/watch?v=oWZ5JvDFIp8 https://www.youtube.com/watch?v=oWZ5JvDFIp8

Let me know what you think, and if any Mozilla devs are here reading this can we please bring the old version back?

At least allow for the ability to enable it if we choose.

Thank you

It is gone for good in 58+.

• bug 1305777 - Remove old RDM [58]

(please do not comment in bug reports
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html)

cor-el said

It is gone for good in 58+.

• bug 1305777 - Remove old RDM [58]

(please do not comment in bug reports
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html)

Guess it's time for us to move on to Chrome then...

It's been a fun 10 years Firefox. Sad to say goodbye because of these poor UI decisions.

The function is such bad judgement on whoever endorsed this new design.

I wish those involved could make a case for the benefits of this new design?

This is a great video: https://www.youtube.com/watch?v=oWZ5JvDFIp8

Some of these issues could be filed as bugs, such as losing changes on reload. Some of the others can be hacked with custom style rules in a userContent.css file, such as:

• background color
• not centering the contents
• enlarging text and buttons
• positioning the orientation button left instead of right so it doesn't move

(Example screenshot attached.)

These were the rules I came up with, but if you search around, it wouldn't surprise me if there are other examples on the web:

@-moz-document url-prefix(chrome://devtools/content/responsive.html){
  div#root {
    background-color: #444 !important;
  }
  div#app {
    align-items: left !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  header#global-toolbar *, 
  div.viewport-dimension *,
  div.viewport-toolbar * {
    font-size: 16px !important;
    line-height: 22.4px !important;
  }
  select#global-network-throttling-selector {
    height: 22px !important;
    width: 125px !important;
  }
  label#global-dpr-selector  {
    height: 22px !important;
  }
  #global-toolbar > .toolbar-button::before {
    width: 16px !important;
    height: 16px !important;
  }
  div.viewport-toolbar {
    height: auto !important;
  }
  button.viewport-rotate-button {
    width: 28px !important;
    height: 28px !important;
    padding-top: 4px !important;
    left: 0 !important;
  }
  button.viewport-rotate-button::before {
    width: 22px !important;
    height: 22px !important;
  }
}

When creating your userContent.css file, do not use the HTML namespace, since this is a XUL document. You can just omit the namespace line.

In general, a better forum to pitch changes to dev tools would be: https://discourse.mozilla.org/c/devtools

In another thread, there is a link to a more comprehensive userContent.css file:

https://support.mozilla.org/questions/1197929#answer-1067233

Thanks jscher2000,

Yes I've been active in that thread as well. Getting some help from mtness to update the userContent.css file