Last Comment Bug 291002 - Icons for Error Console buttons
: Icons for Error Console buttons
Status: RESOLVED DUPLICATE of bug 345477
: fixed1.8, polish
Product: Toolkit Graveyard
Classification: Graveyard
Component: Error Console (show other bugs)
: Trunk
: x86 Windows XP
-- enhancement with 2 votes (vote)
: ---
Assigned To: Kevin Gerich
:
:
Mentors:
: 266539 (view as bug list)
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2005-04-19 11:02 PDT by u88484
Modified: 2016-06-29 11:02 PDT (History)
19 users (show)
See Also:
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
icons (6.85 KB, image/png)
2005-08-22 09:48 PDT, u88484
no flags Details
console.css (5.36 KB, text/plain)
2005-08-22 09:52 PDT, u88484
no flags Details
screenshot with the changes (35.41 KB, image/png)
2005-08-22 12:03 PDT, u88484
no flags Details
winstripe patch (2.16 KB, patch)
2005-08-22 13:25 PDT, u88484
no flags Details | Diff | Splinter Review
pinstripe patch (2.17 KB, patch)
2005-08-22 13:41 PDT, u88484
no flags Details | Diff | Splinter Review
winstripe patch v1.1 (2.75 KB, patch)
2005-08-23 06:13 PDT, u88484
no flags Details | Diff | Splinter Review
updated screenshot including the background colors (38.55 KB, image/png)
2005-08-23 06:15 PDT, u88484
no flags Details
winstripe patch 1.2 (2.72 KB, patch)
2005-08-23 06:19 PDT, u88484
kevin: review-
Details | Diff | Splinter Review
pinstipe patch v1.1 (2.14 KB, patch)
2005-08-23 06:23 PDT, u88484
kevin: review-
Details | Diff | Splinter Review
new js console styles (4.60 KB, patch)
2005-10-01 11:56 PDT, Kevin Gerich
no flags Details | Diff | Splinter Review
Here's a screenshot of the new graphics (33.47 KB, image/png)
2005-10-01 11:58 PDT, Kevin Gerich
no flags Details
Alternate JS Console design, with color coded rows (31.32 KB, image/png)
2005-10-05 04:42 PDT, Kevin Gerich
no flags Details
Mockup for the 'All' icon (2.23 KB, image/png)
2005-10-05 07:57 PDT, mmc
no flags Details
JS Console styles, second draft (5.48 KB, patch)
2005-10-18 21:02 PDT, Kevin Gerich
mconnor: review+
Details | Diff | Splinter Review
JS Console styles, second draft screenshot (51.28 KB, image/jpeg)
2005-10-18 21:02 PDT, Kevin Gerich
no flags Details
console toolbar and bullet icons (12.10 KB, application/zip)
2005-10-18 21:04 PDT, Kevin Gerich
no flags Details
round 3 of js console changes incorporating feedback (5.43 KB, patch)
2005-10-19 18:46 PDT, Kevin Gerich
mconnor: review+
asa: approval1.8rc1+
Details | Diff | Splinter Review
JS console styles screenshot, round 3 (36.90 KB, image/jpeg)
2005-10-19 18:47 PDT, Kevin Gerich
no flags Details
Screenshot of implementation (25.38 KB, image/gif)
2005-10-26 04:45 PDT, José Jeria
no flags Details

Description User image u88484 2005-04-19 11:02:39 PDT
Could we use the TB icons for the javascript console buttons? They would fit in
with the FF theme and they make the buttons easier to click plus makes the
console not so plain.
Comment 1 User image Brian Polidoro 2005-07-22 14:49:24 PDT
Would it be possible to fix this as a polish bug maybe even after 1.5 beta?  And
maybe get the background color behind each entry (Message/Warning/Error) like on
the Mac.
Comment 2 User image u88484 2005-08-22 09:48:40 PDT
Created attachment 193454 [details]
icons

the icons
Comment 3 User image u88484 2005-08-22 09:52:39 PDT
Created attachment 193457 [details]
console.css

modified console.css

new code for using the icons is att he very bottom, needs clean up a little
since i'm not an css expert. Also I have no clue how to make diff files so if
someone can explain I will be happy to do that and attach a patch.

both of these files need to go in classic.jar in skin/classic/global/console/
Comment 4 User image u88484 2005-08-22 12:03:17 PDT
Created attachment 193471 [details]
screenshot with the changes
Comment 5 User image u88484 2005-08-22 13:25:55 PDT
Created attachment 193481 [details] [diff] [review]
winstripe patch
Comment 6 User image u88484 2005-08-22 13:41:47 PDT
Created attachment 193486 [details] [diff] [review]
pinstripe patch
Comment 7 User image Benjamin Smedberg [:bsmedberg] 2005-08-23 06:06:25 PDT
Comment on attachment 193486 [details] [diff] [review]
pinstripe patch

Please fix the "no newline at end of file"
Comment 8 User image u88484 2005-08-23 06:13:32 PDT
Created attachment 193562 [details] [diff] [review]
winstripe patch v1.1

this patch adds background color behind each entry (Message/Warning/Error) like
on
the Mac.
Comment 9 User image u88484 2005-08-23 06:15:08 PDT
Created attachment 193563 [details]
updated screenshot including the background colors
Comment 10 User image u88484 2005-08-23 06:19:46 PDT
Created attachment 193564 [details] [diff] [review]
winstripe patch 1.2

addresses Benjamin Smedberg's comment
Comment 11 User image u88484 2005-08-23 06:23:17 PDT
Created attachment 193565 [details] [diff] [review]
pinstipe patch v1.1

addresses Benjamin Smedberg's comment

sorry about all these edits...first time submitting patches.
Comment 12 User image Kevin Gerich 2005-08-23 08:40:30 PDT
Comment on attachment 193564 [details] [diff] [review]
winstripe patch 1.2

Kurt,
Thanks for your work on this. I wish I'd seen this bug sooner though. I'm
planning to do a makeover on the Winstripe JS console that hopefully will get
in for 1.5, including icons with the Winstripe style. Can you please reassign
to me? I'll use your winstripe patch as a starting point.
Comment 13 User image u88484 2005-08-23 08:43:32 PDT
reassigned to kevin@kmgerich.com.

no problem 
Comment 14 User image u88484 2005-09-29 13:38:45 PDT
Kevin how is this looking for 1.5? If looks like it won't make 1.5, can we at
least use my patches to make the console at least a little better looking and
easier to view because of the background colors for different errors. No risk
patch and no l10n affect so can be landed after 1.8b5.
Comment 15 User image Kevin Gerich 2005-10-01 11:56:48 PDT
Created attachment 198152 [details] [diff] [review]
new js console styles
Comment 16 User image Kevin Gerich 2005-10-01 11:58:15 PDT
Created attachment 198153 [details]
Here's a screenshot of the new graphics
Comment 17 User image José Jeria 2005-10-04 23:45:48 PDT
(In reply to comment #16)
> Created an attachment (id=198153) [edit]
> Here's a screenshot of the new graphics

How come the small icons are missing the sign within?
Comment 18 User image Kevin Gerich 2005-10-05 04:13:24 PDT
(In reply to comment #17)
> How come the small icons are missing the sign within?

To reduce the visual weight of the bullet icons while stil providing a clue
about the nature of the error. Also I didn't want to use the same icons in the
toolbar and on the side because you don't interact with them the same way.
Comment 19 User image Kevin Gerich 2005-10-05 04:42:36 PDT
Created attachment 198565 [details]
Alternate JS Console design, with color coded rows

We could do something like this, which eliminates the row icon altogether. The
downside is to get the color coded backgrounds we would have to hardcode both
background and foreground colors.
Comment 20 User image u88484 2005-10-05 04:51:24 PDT
Kevin, I think those icons plus the background colors would look great
together...with just icons or just background color, the window seems like it's
missing something. But with both, looks pretty darn good.
Comment 21 User image José Jeria 2005-10-05 05:18:02 PDT
My 2 cents: I prefer the first screenshot presented by Kevin. Different
background colors (rainbow) make it more difficult to get a good overview. 
Comment 22 User image Kai de Leeuw 2005-10-05 05:31:07 PDT
Colors are bad, just look at any remotely similar program, like the event viewer
in Windows and imagine it with color marked lines and not just icons.

Another question, what is the all button supposed to symbolize?
I have tried to figure this one out, but nothing makes sense.
Comment 23 User image mmc 2005-10-05 07:57:04 PDT
Created attachment 198580 [details]
Mockup for the 'All' icon

Just an idea of what the All icon could look like...
Comment 24 User image Kevin Gerich 2005-10-18 21:02:03 PDT
Created attachment 200040 [details] [diff] [review]
JS Console styles, second draft

OK, here is the patch, without the color coded rows and with horizontal icons
Comment 25 User image Kevin Gerich 2005-10-18 21:02:51 PDT
Created attachment 200041 [details]
JS Console styles, second draft screenshot
Comment 26 User image Kevin Gerich 2005-10-18 21:04:47 PDT
Created attachment 200042 [details]
console toolbar and bullet icons
Comment 27 User image Mike Connor [:mconnor] 2005-10-18 21:59:17 PDT
Comment on attachment 200040 [details] [diff] [review]
JS Console styles, second draft

Beltzner has some suggested tweaks if you have more cycles, but this is good to
go.
Comment 28 User image Mike Beltzner [:beltzner, not reading bugmail] 2005-10-18 22:05:10 PDT
*** Bug 266539 has been marked as a duplicate of this bug. ***
Comment 29 User image Mike Beltzner [:beltzner, not reading bugmail] 2005-10-19 07:15:57 PDT
(In reply to comment #27)
> (From update of attachment 200040 [details] [diff] [review] [edit])
> Beltzner has some suggested tweaks if you have more cycles, but this is good to
> go.
> 

I've opened bug 312962 to track those suggestions since we're coming up fast on
code freeze. Some of the issues identified in that bug might be able to be done
here, though:

  - right align the source file and line number:
  - remove labels "Error", "Warning", "Message", "Souce File"

............................................................................
  ***  foo is not defined
 ***** 
  ***                               _javascript: document.all_    Line    1    
                        
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

I also suggest making the icons in the content area smaller versions of the ones
that appear in the toolbar, but that requires new graphics so might not be
do-able for 1.5.
Comment 30 User image Brian Polidoro 2005-10-19 09:43:33 PDT
Is right aligning the source really a good idea?  The case that I think  could
be a problem is when you get a very long source URL.  Then other shorter source
URLs could end up not being seen because you have to scroll horizontaly for them
to be visible.  

From my JS console (mangled a bit)
http://us.f519.mail.yahoo.com/ym/ShowLetter?MsgId=----_5579687_54466_1534_624_0_8962_1200_1288318393&Idx=0&YY=56931&inc=25&order=down&sort=date&pos=0&view=&head=&box=Inbox
vs
example given
Javascript:document.all

So perhaps any extra changes besides removing the labels should wait.  
Comment 31 User image Mike Beltzner [:beltzner, not reading bugmail] 2005-10-19 16:46:11 PDT
Hm. I'd originally been thinking that we'd use a right-align for the file name,
then some padding and then a left-align for the number, so:

[..........................................file.name]  Line: [number]

But to support that I guess we'd need code that truncates long labels (like in
Windows Explorer or OS X Finder, so you'd get "reallyLongF...ame" and have a
hover-help tip that contains the full filename) which would be more work than we
have time for. Unless anyone can think of a way around this, then yeah, let's
just strip the labels and keep current alignment for now.

I'll be pouting in this corner over here ;)
Comment 32 User image Kevin Gerich 2005-10-19 18:46:49 PDT
Created attachment 200160 [details] [diff] [review]
round 3 of js console changes incorporating feedback

final changes probably
Comment 33 User image Kevin Gerich 2005-10-19 18:47:49 PDT
Created attachment 200161 [details]
JS console styles screenshot, round 3
Comment 34 User image Kevin Gerich 2005-10-22 10:09:16 PDT
Comment on attachment 200160 [details] [diff] [review]
round 3 of js console changes incorporating feedback

low risk. good polish. requesting approval to land
Comment 35 User image Asa Dotzler [:asa] 2005-10-23 11:36:00 PDT
Comment on attachment 200160 [details] [diff] [review]
round 3 of js console changes incorporating feedback

Kevin, we won't have an opportunity to respin if this breaks anything. I'm approving so if you're confident in this, go ahead and land.
Comment 36 User image Kevin Gerich 2005-10-23 18:35:16 PDT
Checked in to 1.8 branch. Thanks for the input everyone
Comment 37 User image José Jeria 2005-10-26 04:45:54 PDT
Created attachment 200857 [details]
Screenshot of implementation

The "Line x" text is not equally aligned for all rows.

Also, the errors are not easy to read as before because of the bold text (my 2 cents)
Comment 38 User image Daniel Cater 2006-01-01 09:14:26 PST
This doesn't appear to be in trunk builds; is it going to be checked in?
Comment 39 User image Worcester12345 2006-07-14 16:16:48 PDT
(In reply to comment #38)
> This doesn't appear to be in trunk builds; is it going to be checked in?

bump
Comment 40 User image :Gavin Sharp [email: gavin@gavinsharp.com] 2006-07-19 14:17:45 PDT
Kevin, can you check in whatever is needed on the trunk?
Comment 41 User image Brian Polidoro 2006-07-21 10:29:17 PDT
Gavin is there anything needed from this bug on the trunk that won't be covered by bug 345477?  That bug seems to take over the purpose of this bug.  I think the changes checked in from this bug were just to get something done for 1.5 with the hope that something better would be done in the future.  The something better in terms of usability would be covered by Bug 312962.
Comment 42 User image :Gavin Sharp [email: gavin@gavinsharp.com] 2006-07-21 10:37:52 PDT
(In reply to comment #41)
> Gavin is there anything needed from this bug on the trunk that won't be covered
> by bug 345477?

I don't know what is going to be changed in bug 345477, so I can't really say.
Comment 43 User image Ryan VanderMeulen [:RyanVM] 2006-12-20 20:07:16 PST
Dupe of bug 345477 at this point?
Comment 44 User image :Gavin Sharp [email: gavin@gavinsharp.com] 2006-12-21 03:53:25 PST
Sure.

*** This bug has been marked as a duplicate of 345477 ***

Note You need to log in before you can comment on or make changes to this bug.