959843 - Allow about:config to select by / display list of preferences that have been modified

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: General, defect)

Description

[Mark Capella [:capella]]

Attachment: configModified.diff

I find this a useful tweak ... considerable CSS cleanup as a direct result

Example on smartphone / GS3:
   https://www.dropbox.com/s/zu5ze59iv2fkjhl/Screenshot_2014-01-14-17-44-56.png

Example on table N7:
   https://www.dropbox.com/s/6tlbdohb4usw0y7/Screenshot_2014-01-14-17-45-32.png

The javascript / coding changes for this are fairly simple.

For the associated UI / HTML changes, I re-write the "toolbar" object.

I also used the opportunity to re-write the .CSS for the "toolbar".

Comment 1

[Wesley Johnston (:wesj)]

Comment on attachment 8360066 [details] [diff] [review]
configModified.diff

Review of attachment 8360066 [details] [diff] [review]:
-----------------------------------------------------------------

I think you're right that we can clean up this CSS a lot. My opinion is that we could throw this type of Checkbox in a little "menu", with a menu button to the right hand side. I didn't dig into the CSS too hard, but from the screenshots, it looks like we can do a little better :( i.e. We landed this a bit rough, I'd love to clean up the appearance a bit before we start adding more.

::: mobile/android/chrome/content/config.js
@@ +296,5 @@
> +
> +      return (!liNode.li && // Not drawn from the main pool yet, and
> +               liNode.test(aFilterExp) && // matches any User Filter String, and
> +              (!AboutConfig._filterModified || // Either not filtering by modified, or
> +               !liNode.default)); // we are indeed modifed (not default)

I probably try to avoid the comments here. I think something like:

(!node.li && node.test(aFilterExp)) ||
(AboutConfig._filterModified && !node.default)

is pretty readable on its own.

@@ +306,5 @@
>  
>      // Get a new block for the display list
>      let prefsBuffer = [];
>      for (let i = 0; i < this._list.length && prefsBuffer.length < PREFS_BUFFER_MAX; i++) {
> +      if (matchesFilters(i, filterExp)) {

We could just call this shouldShow()

::: mobile/android/chrome/content/config.xhtml
@@ +31,5 @@
> +
> +        <div id="search-options-container">
> +            <div id="modifiedLabel">&toolbar.modifiedLabel;</div>
> +            <input id="modifiedCheckbox" type="checkbox"
> +                onclick="AboutConfig.bufferFilterInput();"/>

I think I'd rather we added a little menu on the right with options if we want to do this. What do you think of that?

::: mobile/android/themes/core/config.css
@@ +20,3 @@
>      top: 0;
>      left: 0;
> +    min-height: 40px;

This will make the toolbar wrap in some cases.

@@ -34,3 @@
>  }
>  
> -#filter-container {

I intentionally did this originally because it seemed weird to have these so spread out from the content.

@@ +73,5 @@
> +    height: 32px;
> +    width: 32px;
> +
> +    /* Magnifying Glass  */
> +    background-size: 32px 32px;

We should try to unify these "button" styles in classes if we can and only have minimum differences for different buttons.

Comment 2

[Mark Capella [:capella]]

Thanks for taking a look here! I'd like to do all you suggest above. The current plan is to alternate time between:

   1) Initial port of Mobile about:config -> Metro, and...
   2) Enhance Mobile about:config ...
      a: extra "modified" filter option -> "new menu"
   3) Any further .css cleanup

   and then:
   4a) Port Mobile "new menu" -> Metro
   4b) Port any new Mobile .css cleanup -> Metro

fyi, re:|This will make the toolbar wrap in some cases|
   My personal take-away here is to improve my .css and element design skills. For this, I worked with Web Developer / Inspector for modelling and shrinking / growing screen sizes to view object behaviour in min / max conditions.

   I assumed we'd plan for a worst case element minimum size for flexibility, and I let this object wrap down to a small block in a what I though was a logical fashion.

   This might be overkill on my part, if we (as Mobile) have some sort of minimum screen width / unit of measurement that I can allow for.


I think this is a quiet area to work in, but do let me know if my plans run up against any higher-priority projects I may not be aware of.

:-D

Comment 3

[Wesley Johnston (:wesj)]

That sounds great mark! No plans, but I feel like we've been pointing people at about:config more lately, so if we can make it better, I'd be happy to see it :)

At one point I stubbed out some of the XPCOM Api's for this so that I could work on it in Firefox: http://dl.dropboxusercontent.com/u/72157/Apps/Prefs/aboutConfig.html

May or may not be useful to you if you want to grab some of those JS Objects and dump them in.

Comment 4

[Mark Capella [:capella]]

Attachment: bug959843.diff

I've addressed the couple js tweaks you pointed out, and bumped up the checkbox size a little. I used the "scale" option is .css, as just overriding height/width didn't seem to have an effect.

fyi, using |-moz-appearance: none;| permits me to use height/width to make the checkbox larger on desktop, but fails me on mobile.


I wonder if doing the menu as a follow-on patch might be ok with you? I'm having a hard time seeing it right now... the toolbar is very simple as-is, and I'm not sure what the menu might add (unless you have another option in mind that would overflow the toolbar?).

Comment 5

[Mark Capella [:capella]]

Comment on attachment 8365822 [details] [diff] [review]
bug959843.diff

Let's sit on this for a bit :) It's bitrotted atm ...

Comment 6

[jwms]

I'd love to have a way to view all custom or modified about:config entries.

Comment 7

[jwms]

Should this be limited just to the mobile version of Firefox?  I'd like it on the desktop browser as well :/

Comment 8

[jwms]

seems like these are duplicate bug/feat requests

https://bugzilla.mozilla.org/show_bug.cgi?id=959843
https://bugzilla.mozilla.org/show_bug.cgi?id=1502867

Comment 9

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.