Bug: # autocompletes to colorpicker when it shouldn't do it

[alopepeo]

Steps:

1. Install this style: "http://userstyles.org/styles/42332/firefox-4-options-in-content-style-vertical" and click on "Add".
2. Go to the Manage window, then click on the style and then on Edit Style Sheet.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@-moz-document url("chrome://browser/content/preferences/preferences.xul"),
url("chrome://browser/content/pageinfo/pageInfo.xul") {

If you create an # in this space, nothing wrong happens.

#BrowserPreferences,
#main-window {

#BrowserPreferences,
#main-window {
  background-color:;
  background-image:;
  background-repeat:;
  min-width:;
  min-height:;
  padding:;
  margin:;
}

But if you create an # between any of the other style spaces, 
it autocompletes to a color and opens the colorpicker.

/* Dutch */
#BrowserPreferences[style="width: 48em; min-height: 37.5em;"] {
  min-height: 42em !important;
}

I don't know if it's an style bug, but anyway USM should recognize it a and avoid it.

[grssam]

Can you place the cursor '|' to the exact position where # results to color picker ?

Usually, # should result to color picker, only inside {} and after :

[alopepeo]

#BrowserPreferences,
#main-window {
  background-color: #ccd9ea !important;
  background-image: -moz-linear-gradient(top, rgb(231,237,246) 3px, rgba(231,237,246,0) 156px),
                    -moz-linear-gradient(rgba(241,245,251,0) 25%, rgba(241,245,251,.75)),
                    -moz-linear-gradient(left, rgba(255,255,255,.3), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,0.3)), 
                    -moz-linear-gradient(30deg, rgba(255,255,255,0), rgba(255,255,255,0) 87%, rgba(255,255,255,.25)),
                    -moz-linear-gradient(-30deg, rgba(255,255,255,.25) 13%, rgba(255,255,255,0), rgba(255,255,255,0)),
                    -moz-repeating-linear-gradient(30deg, rgba(255,255,255,0), rgba(255,255,255,0) 30%, rgba(255,255,255,.05) 30.5%, rgba(255,255,255,.05) 38%, rgba(255,255,255,0) 38.5%),
                    -moz-repeating-linear-gradient(30deg, rgba(255,255,255,0), rgba(255,255,255,0) 27%, rgba(255,255,255,.05) 27.5%, rgba(255,255,255,.05) 35%, rgba(255,255,255,0) 35.5%),
                    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAM0lEQVQI12M4dOGJ1IFzj6T+//8v9ev3fykGEAdFAMQA4S2HrkmBVDOAREEYxDl9860UAAjiLPR0/dzCAAAAAElFTkSuQmCC);
  | Here is the first time that the color picker starts appearing. Starting here, anywere you put the # will autocomplete to the color picker.      
  background-repeat: no-repeat,
                     no-repeat,
                     no-repeat,
                     no-repeat,
                     no-repeat,
                     no-repeat,
                     no-repeat,
                     repeat !important;
  min-width: 53em !important;
  min-height: 40em !important;
  padding: 0 !important;
  margin: 0 !important;
}

[grssam]

Ah, because of the ':' in the data uri of the image.

[alopepeo]

I said that respecting to entire properties, but if you try on the first "-moz-linear-gradient" into the rgb parenthesis, the coloricker also appears.

#BrowserPreferences,
#main-window {
  background-color: #ccd9ea !important;
  background-image: -moz-linear-gradient(top, rgb( | Here the colorpicker also appears 231,237,246) 3px, rgba(231,237,246,0) 156px),

If we find each time that the colorpicker appears, we're going to be crazy!

The problem is that USM should recognize when you're into a new code line (after the ":") and when it's finished (behind the ";"). Otherwise, you'll never finish to find where the colorpicker appears.

[grssam]

color picker should appear at that position, it is intended.

[alopepeo]

Yes, I know that. The problem is that, when you are typing outside any selector or brackets, the color picker also works, at least on this style. That's not intended, I think.

So, I'm thinking that the color picker continues detecting an open bracket when it was previously closed. For example:

#something {
    background: #DDDDDD; | Here the color picker shouldn't appear if # was typed because it's outside the property
}

But when writing # in that space the colorpicker appears.