fluid-work IRC Logs-2011-01-27

fluid-work IRC Logs-2011-01-27

[09:30:13 CST(-0600)] <colinclark> heidi_: I have a quick question about your patch for cleaning up the HTML and CSS in Uploader if you have a sec
[09:30:22 CST(-0600)] <heidi_> colinclark yep
[09:30:24 CST(-0600)] <heidi_> what's up?
[09:31:49 CST(-0600)] <colinclark> It looks like we lost a style related to progressive enhancement
[09:31:56 CST(-0600)] <colinclark> or rather, a class name on the Uploader
[09:32:05 CST(-0600)] <colinclark> Not sure if that was an oversight or intentional
[09:32:23 CST(-0600)] <colinclark> So, if I turn off JavaScript, both the simple Uploader and the full one are visible on the page
[09:32:51 CST(-0600)] <colinclark> The Progressive Enhancement classes work with a bit of JavaScript to automatically do some hiding and showing on page load when JavaScript is available
[09:33:07 CST(-0600)] <colinclark> So, by default, the basic version should be visible and the fancy Uploader markup should be hidden
[09:33:25 CST(-0600)] <colinclark> and then the ProgressiveEnhancement.js file, when loaded into a browser with JS turned on, will flip that around
[09:34:14 CST(-0600)] <mlam> colinclark: There's a JIRA for this uploader issue. http://issues.fluidproject.org/browse/FLUID-3992
[09:34:24 CST(-0600)] <colinclark> Seems to me it's as easy as putting fl-progEnhance-enhanced back on the Uploader's form, no?
[09:34:28 CST(-0600)] <colinclark> thanks mlam
[09:34:45 CST(-0600)] <mlam> If it's a simple fix, hopefully we can knock off another JIRA with this scroller change
[09:34:45 CST(-0600)] <colinclark> Looks like it was a regression in 1.3
[09:34:52 CST(-0600)] <colinclark> yeah
[09:35:17 CST(-0600)] <heidi_> colinclark it was an unsed deprecated style
[09:35:28 CST(-0600)] <heidi_> the style that gets used for prog enhancement is still there
[09:35:47 CST(-0600)] <colinclark> heidi_: My other question, which is just motivated by curiosity, is how come we override fl-progEnhance-basic with a different style?
[09:36:12 CST(-0600)] <heidi_> colinclark did removing that style break things?
[09:36:17 CST(-0600)] <colinclark> heidi_: Nope
[09:36:18 CST(-0600)] <heidi_> i'm not sure why we o
[09:36:19 CST(-0600)] <colinclark> You're cool there
[09:36:23 CST(-0600)] <colinclark> looks like that happened back in 1.3
[09:36:23 CST(-0600)] <heidi_> *do
[09:36:44 CST(-0600)] <heidi_> yeah i think it was just fl-progressive replace fl-Progressive or whatever the name is
[09:36:45 CST(-0600)] <colinclark> heidi_: Can you take a look for me, and see if there's any reason to?
[09:36:47 CST(-0600)] <heidi_> the change in naming
[09:37:08 CST(-0600)] <colinclark> One of my goals for cleaning up the markup and CSS for Uploader was to understand all the motivations for why we are doing things
[09:37:14 CST(-0600)] <colinclark> and if we can't figure out the motivations, get rid of stuff
[09:37:30 CST(-0600)] <heidi_> let me take a look
[09:37:36 CST(-0600)] <colinclark> So removing the old styles for fl-ProgEnhance-xyz makes perfect sense
[09:37:57 CST(-0600)] <colinclark> And it looks like the fl-progEnhance-enhanced style got shaved off well before you first started streamlining the file
[09:38:14 CST(-0600)] <colinclark> But I think it'd be awesome if we went really thoroughly through the styles of the component
[09:38:23 CST(-0600)] <colinclark> "Own them," heidi_
[09:38:25 CST(-0600)] <colinclark> It'll be awesome
[09:38:41 CST(-0600)] <heidi_> yeah there are so many
[09:39:17 CST(-0600)]

<heidi_> okay so in fss-layout, fl-progEnhance-basic styles are {} nothing. and in uploader they are

Unknown macro: {display}


[09:40:04 CST(-0600)] <heidi_> i don't really understand the motivation behind these styles... -basic vs -enhanced. like how they are used together.
[09:40:25 CST(-0600)] <heidi_> i'm guessing if you have an -enhanced , it's up to you to hide the -basic
[09:40:33 CST(-0600)] <heidi_> which is why it exists in Uploader.css
[09:41:01 CST(-0600)] <heidi_> i don't know why -enhanced's default is display:none in fss, and -basic is nothing. feels like it should be the other way around?
[09:41:06 CST(-0600)] <colinclark> Nope, that's what I was saying earlier
[09:41:10 CST(-0600)] <colinclark> I'll try to explain again
[09:41:27 CST(-0600)] <colinclark> So, with progressive enhancement, what we want to be able to do is show a simplified version when JavaScript is turned off
[09:41:27 CST(-0600)] <heidi_> ill re-read, sorry
[09:41:46 CST(-0600)] <colinclark> That means we can't do anything at all to set up the page with JavaScript
[09:41:51 CST(-0600)] <colinclark> We have to do things sort of "backwards"
[09:42:09 CST(-0600)] <colinclark> Meaning, make sure the basic stuff is styled by default to be visible
[09:42:16 CST(-0600)] <colinclark> and the fancy stuff should be styled by default to be invisible
[09:42:25 CST(-0600)] <colinclark> and then the framework has this file called ProgressiveEnhancement.js
[09:42:28 CST(-0600)] <colinclark> Take a look at what it does
[09:42:30 CST(-0600)] <heidi_> okay, so then we're good as it is
[09:42:50 CST(-0600)] <colinclark> If you scroll down to the bottom of the file, you'll see a big comment saying "This code runs immediately..."
[09:43:00 CST(-0600)] <colinclark> And we do this with JavaScript:
[09:43:02 CST(-0600)]

<colinclark> $("head").append("<style type='text/css'>.fl-progEnhance-basic, .fl-ProgEnhance-basic

Unknown macro: { display}

</style>");


[09:43:27 CST(-0600)] <colinclark> So we write a style, right at the top of the page, as early as possible, which "flips things around"
[09:43:31 CST(-0600)] <colinclark> making the basic version invisible
[09:44:03 CST(-0600)] <colinclark> So, all of this is at the framework level
[09:44:24 CST(-0600)] <colinclark> Meaning a combination of including fss-layout.css and ProgressiveEnhancement.js should make it all happen for free
[09:44:52 CST(-0600)] <colinclark> Ordinarily, I can't see any reason why someone would override those styles, unless they're doing something very fancy
[09:44:53 CST(-0600)] <heidi_> okay, so that display none on -basic should be happening by the js, not in Uploader.css
[09:45:22 CST(-0600)] <colinclark> For fl-progEnhance-basic, yep
[09:45:32 CST(-0600)] <heidi_> so yeah we can prob remove it
[09:46:26 CST(-0600)] <heidi_> and it looks like we just have a style that tweaks the look of the inputs in the -basic version
[09:46:49 CST(-0600)] <colinclark> I wonder why it does that
[09:46:54 CST(-0600)] <colinclark> Any guesses?
[09:47:45 CST(-0600)] <heidi_> it's putting a bit of space above the 'save' button
[09:48:00 CST(-0600)] <colinclark> I wonder if there's a better way to do this
[09:48:02 CST(-0600)] <colinclark> I'm not averse to it
[09:48:10 CST(-0600)] <colinclark> it's just that we're sort of piggybacking on existing styles
[09:48:11 CST(-0600)] <heidi_> so is there something wrong with ProgressiveEnhancement.js that it's not hiding -enhance?
[09:48:44 CST(-0600)] <heidi_> or is it that i mucked up that style
[09:48:45 CST(-0600)] <colinclark> I don't think so, since if you look at fss-layout.css, fl-progEnhance-enhanced should be set to display: none by default
[09:48:52 CST(-0600)] <colinclark> By nature, it has to be, right?
[09:49:04 CST(-0600)] <colinclark> We can't hide the fancy stuff with JavaScript if JavaScript is turned off
[09:49:06 CST(-0600)] <colinclark>
[09:49:11 CST(-0600)] <heidi_> ha right
[09:49:21 CST(-0600)] <heidi_> so i need to add -enhanced on the uploader.html
[09:50:11 CST(-0600)] <colinclark> Yeah, I was just trying to do that on the flc-uploader <form> element, but so far no luck
[09:50:13 CST(-0600)] <heidi_> fl-progEnhance-enhanced should be on the second form
[09:50:16 CST(-0600)] <colinclark> yep
[09:50:18 CST(-0600)] <colinclark> That's the idea
[09:50:21 CST(-0600)] <colinclark> try it and see what you find
[09:50:31 CST(-0600)] <colinclark> This CSS and markup still really perplexes me
[09:50:53 CST(-0600)] <colinclark> Like, why does the fl-progEnhance-basic <form> have an .fl-uploader class on it?
[09:51:01 CST(-0600)] <colinclark> Doesn't seem to make much sense to me
[09:51:14 CST(-0600)] <heidi_> it doesn't seem to do anything
[09:51:18 CST(-0600)] <colinclark> yeah
[09:51:22 CST(-0600)] <heidi_> adding -enhanced
[09:51:31 CST(-0600)] <colinclark> Can you look a bit more into why?
[09:51:39 CST(-0600)] <colinclark> You've got the Web developer toolbar installed, right?
[09:51:43 CST(-0600)] <colinclark> So it's super easy to enable/disable JS
[09:52:08 CST(-0600)] <colinclark> I think we really should go through this markup and stylesheet top to bottom and really understand it and make it wicked
[09:52:18 CST(-0600)] <colinclark> Once we iron out a few of these issues, I'll commit your patch
[09:52:30 CST(-0600)] <colinclark> you can finish up the next item you have on your to do list for the release for 1.3.1
[09:52:38 CST(-0600)] <colinclark> and then I think we should cycle back and own this markup and styling
[09:52:42 CST(-0600)] <heidi_> it is because fl-uploader is over-riding the display none with block
[09:53:39 CST(-0600)] <heidi_> yeah... big job. it's such twisty css. but yeah, removing display:block from fl-uploader fixes it
[09:54:01 CST(-0600)] <colinclark> Why does fl-uploader display:block in the first place, do you know?
[09:54:14 CST(-0600)] <heidi_> i don't know
[09:54:30 CST(-0600)] <heidi_> i don't see why it's needed
[09:54:43 CST(-0600)] <colinclark> very strange
[09:55:03 CST(-0600)] <colinclark> Do you feel up for the task of De-Twistifying this CSS over the next little while, heidi_?
[09:55:12 CST(-0600)] <colinclark> It seems like it could be fun
[09:55:45 CST(-0600)] <heidi_> colinclark mmmm okay
[09:55:52 CST(-0600)] <colinclark> cool
[09:56:08 CST(-0600)] <colinclark> As I say, finish up the Inline Edit stuff or whatever you are currently in the midst of
[09:56:21 CST(-0600)] <heidi_> i'm putting up patches for the fss-scroller demo, and rich inline this morning, and then i'll get to it
[09:56:23 CST(-0600)] <colinclark> and I'll get this patch in as a solid first step
[09:56:24 CST(-0600)] <colinclark> cool
[09:56:25 CST(-0600)] <colinclark> great
[09:59:54 CST(-0600)] <colinclark> heidi_: One other thing I'd like to get your advice on
[10:00:06 CST(-0600)] <heidi_> shoot
[10:01:12 CST(-0600)] <colinclark> So, I now get everything that happened to cause this progress enhancement stuff to break in the Uploader
[10:01:31 CST(-0600)] <colinclark> And it makes me think that I never quite got it right...
[10:01:50 CST(-0600)] <colinclark> Previous to 1.3, there was this fluid.progressivelyEnhanceableUploader() function
[10:02:06 CST(-0600)] <colinclark> which was responsible for doing some hiding and showing of the Uploader depending on the circumstances
[10:02:33 CST(-0600)] <colinclark> as a sort of side effect, it was the code that would restyle fl-progEnhance-enhanced to be visible
[10:02:47 CST(-0600)] <colinclark> Because again, by default, our styles have to show -basic and hide -enhanced
[10:02:54 CST(-0600)] <colinclark> and if JavaScript is present, it should flip them around
[10:03:12 CST(-0600)] <colinclark> but of course, I pasted you the implementation in ProgressiveEnhancement.js and something struck me
[10:03:22 CST(-0600)] <heidi_> what's that?
[10:03:26 CST(-0600)] <colinclark> We were only flipping -basic, leaving -enhanced untouched
[10:03:37 CST(-0600)]