ค้นหาฝ่ายสนับสนุน

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

เรียนรู้เพิ่มเติม

Restore Legacy Responsive Design Mode (58.0)

  • 6 การตอบกลับ
  • 3 คนมีปัญหานี้
  • 1 ครั้งที่ดู
  • ตอบกลับล่าสุดโดย joshfromlondon

more options

Hey everyone,

Just got the version 58 update.

Myself and many others are very dissatisfied with the new responsive design mode (pretty much google chrome)

In the last version we could go to > about:config > devtools.responsive.html.enabled > false

Unfortunately, this no longer works. Is there any way to restore the legacy responsive design mode?

This new RDM is not intuitive and in fact slows down productivity and lacks customization.

Previous version was great, why break it?

Hey everyone, Just got the version 58 update. Myself and many others are very dissatisfied with the new responsive design mode (pretty much google chrome) In the last version we could go to > about:config > devtools.responsive.html.enabled > false Unfortunately, this no longer works. Is there any way to restore the legacy responsive design mode? This new RDM is not intuitive and in fact slows down productivity and lacks customization. Previous version was great, why break it?
ภาพหน้าจอที่แนบมา

เปลี่ยนแปลงโดย greyhood เมื่อ

การตอบกลับทั้งหมด (6)

more options

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

more options

It is gone for good in 58+.

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

more options

cor-el said

It is gone for good in 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?

more options

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

more options

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

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

more options

Thanks jscher2000,

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