Should the tabs in sidepanels use the same structure as devtools for cleaner/more reusable styling.
Compare the HelloWorld side panel tabs and the Inspector side panel tabs (rules, computed, fonts ...)

Tabs in the HelloWorld side panel uses hbox/radio
Tabs in the Inspector side panel uses tabs/tab

Thoughts?

See Windows screenshot for reference

Windows

OS-X

See e.g. the propIterator here + discussion: de26e8a

I think we might want to forward every call to some function on reps/grip, possibly even Grip.propIterator itself.

We need support for conditional tracing in Firebug.next

Use case:

var TraceError = Trace.toError();
var Trace = Trace.to("DBG_MYOPTION");

Honza

There should be a button on the main toolbox toolbar that allows to open toolbox options. The button is not visible at the moment (but it's there). See attached screenshot:

Also, the tab panel options menu image (the little black triangle) should not be applied on this button.

Honza

The panel that is selected by default when you open the Toolbox, doesn't have the tab options menu. When you change the selection it works.

Honza

Split the FBTrace project from the Firebug repository, so we are free to adapt it for the firebug.next needs

We should create a new repo:
https://github.com/firebug/tracing-console

There should be no dependence on Firebug extension.

(we can keep the original FBTrace code in https://github.com/firebug/firebug repo for now)

Honza

First run of devtools give this

After the first F12 click you have

Try to go on Dom or Hello panel and close/open devtools (F12)
Result is devtools light theme take place of firebug theme, i am on a fedora machine.

The built-in side panel tabs should be properly styled by Firebug theme.

See this screenshot taken from the Debugger panel

1. There are separators (vertical lines) in between the tabs
2. Selected tab is highlighted/blue

Note that the same problem is in the Inspector panel, but InspectorOverlay removes the "theme-light" (using classList.remove("theme-light"); ) causing the default CSS rule not being applied.

Honza

All UI strings need to be localized and we need to have a locale module with the following methods:

• $STR
• $STRF
• $STRP

$STR - intended for localization of a static string.
$STRF - intended for localization of a string with dynamically inserted values.
$STRP - intended for localization of a string with dynamically plural forms.

Notes:

1. Name with _ in place of spaces is the key in the firebug.properties file.
2. If the specified key isn't localized for particular language, both methods use
   the part after the last dot (in the specified name) as the return value.

Examples:
$STR("Label"); - search for key "Label" within the firebug.properties file
and returns its value. If the key doesn't exist returns "Label".

$STR("Button Label"); - search for key "Button_Label" withing the firebug.properties
file. If the key doesn't exist returns "Button Label".

$STR("net.Response Header"); - search for key "net.Response_Header". If the key doesn't
exist returns "Response Header".

firebug.properties:
net.timing.Request_Time=Request Time: %S [%S]

var param1 = 10;
var param2 = "ms";
$STRF("net.timing.Request Time", param1, param2); -> "Request Time: 10 [ms]"

See also:
https://github.com/firebug/firebug/blob/master/extension/modules/locale.js

Honza

The Rules side panel should look more Firebug-ish.

Looks like:

Should look more like:

Tasks are:

• Change font family of rules
• Change source links font family and color
• Change Inherited from header layout
• Change properties colors
• Use icon for disabling and disabled properties instead of checkbox
• Make disabled property semi-transparent
• Remove or restyle rule separation
• Remove or restyle underlining of property names and values

The last two points should be discussed before we change them.

What should be kept:

• Highlighting of used selector
• element rule
• Inline color preview

Sebastian

As soon as new API for dynamic theme registration is ready we should integrate with it.

See also:
https://bugzilla.mozilla.org/show_bug.cgi?id=1038562

Honza

When the Firebug theme is set as the default one, it should be applied as soon as possible so, the default native tools theme isn't visible (it is visible for a little moment before Firebug theme takes over).

Honza

The tracing console displays stack-frame URL as follows:

main@resource://gre/modules/addons/XPIProvider.jsm -> jar:file:///C:/Users/Honza/AppData/Roaming/Mozilla/Firefox/Profiles/ceg3h0r0.nightlyJSD2001/extensions/[email protected]!/bootstrap.js -> resource://extensions.modules.firebug-next-at-jetpack.commonjs.path/toolkit/loader.js -> resource://firebug-next-at-jetpack/firebug-next/lib/main.js:18:3

It's hard to read and the actual useful information is usually the last part (the URL coming from Firebug).

It would be great help if the stack is parsed and displayed as e.g. an expandable tree in the tracing console UI:

STR:

1. Cause an exception in the code e.g put following in the main() in main.js:

try {
adf.adf = adfa;
}
catch (err) {
Trace.sysout("ERROR " + err, err);
}

2. Launch Firebug (with FBTrace installed and tracing console window opened).
3. Expand the error log and select the Object tab
4. see the stack field -> hardly readable

@simonlindholm: I know you've done some work on FBTrace before, would this be hard to fix? It would be great help.

Honza

The DOM side panel is collapsed and it is not possible to resize it using the mouse.

Most importantly we want to have 1 < 2 < 10.

STR:

1. Open Firebug.next (the toolbox)
2. Load https://getfirebug.com/tests/manual/console/joes-original/test.html
3. Click the log button
4. Click the element in the Console panel
5. See the side panel being open
6. Click the first item in the side panel (text) to expand it
7. FBTrace shows an exception

Console Service ERROR [JavaScript Error: "parent is undefined" {file: "resource://gre/modules/addons/XPIProvider.jsm -> jar:file:///C:/Users/Honza/AppData/Roaming/Mozilla/Firefox/Profiles/ceg3h0r0.nightlyJSD2001/extensions/@actor-repl.xpi!/bootstrap.js -> resource://extensions.modules.-at-actor-repl.commonjs.path/toolkit/loader.js -> resource://firebug-next-at-jetpack/firebug-next/lib/core/domplate.js" line: 482}] [JavaScript Error: "parent is undefined" {file: "resource://gre/modules/addons/XPIProvider.jsm -> jar:file:///C:/Users/Honza/AppData/Roaming/Mozilla/Firefox/Profiles/ceg3h0r0.nightlyJSD2001/extensions/@actor-repl.xpi!/bootstrap.js -> resource://extensions.modules.-at-actor-repl.commonjs.path/toolkit/loader.js -> resource://firebug-next-at-jetpack/firebug-next/lib/core/domplate.js" line: 482}]

@simonlindholm: I can't figure this one, do you have any idea why the exception happens?

Honza

The sidebar tabs should have a proper style. See the Windows screenshot for reference.

Windows

OS-X

Firebug icon menu should be implemented in toolbox.
(not all menu items are probably necessary)

Honza

1. Open the toolbox
2. Select e.g. the Console panel
3. Move mouse cursor over the Debugger tab (the one next to the selected tab)
4. The tab strips moves 1 pixel to the right -> BUG

Honza

The inspector icon in toolbox should use the Firebug inspector icon.

Honza

1. Select the Inspector panel
2. Click an element in the markup view to select it
3. Element name disappears (color == white?)

Honza

1. Launch Firebug.next
2. Dock it to the right side of the browser
3. The window buttons (like close e.g.) and search box get hidden. (You don't see the issue if you make the Firebug window wider)

Farshid

Looks like:

Should look like:

Notes:
The hint "Use Arrow keys, Tab or Enter" at the top should not be added.
The prefix (document. in the screenshot) should not be displayed.

Sebastian

The filter field within the Console panel doesn't fit to the Firebug UI yet.
Looks like:

Should look like:

Sebastian

There should be an element picker button to the left in the tabbar
The button is there but the icon is not displayed. See Windows screenshot for reference.

Windows

OS-X

The ancestor path within the Inspector panel doesn't have a hover effect at the moment.

Looks like:

Should look like:

Sebastian

One of the features we want to support is server side logging. Firebug should be able to display logs coming from the server side in the Console panel.

• the server side implementation should be simple
• it should be possible to support various server side languages

(we might want to turn this report into a meta-issue)

Honza

This script will launch Firefox + Firebug automatically.
It will make some assumptions by default:

1. The addon-sdk must exist, either in the parent folder of the firebug.next directory, otherwise it should be specified in the .launchenv file
2. The tracing-console can exist. If it does, it would be in the parent folder of the firebug.next directory, otherwise it should be specified in the .launchenv file
3. A .launchenv file can exist to override default options, but should be ignored for commits.

Florent

I opened this issue to begin a discussion about how to use the new issue tracker. We have also experienced the other one(Google code) and would be worthy to think how use it in compared with that.

1. Something in Github Issues differ from one hosted on Google code(like everything is handled using labels and of course, fields like |Status| should be handled using those if we don't want just use the built-in status, since there is only two of them, Open and Close)
2. As I could see Honza has started posting issues (Interesting!), there should be some labels to start with.
3. Absence of defining a template for different issues
4. How to use Milestones
5. Any missing?

I think the first and third could be solved by the idea which @cadorn has to integrate the Issues some where. Using this idea, we could use labels in the way we interested in.

Note: I follow the style of built-in labels name(like no hyphen(-) as a separator in labels name and start in lower case) for the the list below. I think underscore is a better case, as some words have hyphen grammatically(like auto-completion e.g.), your thought?

List of labels look necessary(Imported from the Google code):
debugger, ui, command line, script, css, html, shortcuts, editors, profiler, quick info,search, watch, breakpoint, console, cookie, doc, computed, events, layout, dom, inspector, auto-completion test case needed, test case available, unit test wanted, unit test available, localization, platform.

Note: There is some labels above that wasn't in the Google code like unit test available, unit test wanted, as I think we are going to use the the framework provided by the SDK instead of FBTest.
Also the names keys, inspect, locale are changed to shortcuts, inspector, localization.
What do you think?

Some suggestion to create some ones which would be helpful like:
needs discussion search to select issues need to be discussed on the weekly meeting. We also should question label (a predefined label) for the issue needs discussion on the page(no need to be discussed in the meeting and could be solved by discussing on the issue page)
docs needed
wiki needed OR wiki update needed should be stated in wiki or affect any existence wiki . Would be also helpful when needing to update wikis for a new release.
api relevance => when an api is changed or deprecated.
performance => Issue affect performance.
causes bug => a patch for this issue causes another bug addressed by another issue.
bug source => mark an issue with this label, if there is another issue caused this bug.
Your thought?

Github Issues has a feature called Milestones that is to make sure everyone/everything is working towards a goal and could start grouping issues that needs to be done to get the goal. What do you think about using it with Firebug.next, as we don't used to use something like this? Use this just when an issue blocks the next release?

Farshid

The selected tab should be highlighted. See Windows screenshot for reference.

Windows

OS-X

It would be great if error tracing can be done using following API.

try {
}
catch (err) {
TraceError.sysoutError(err);
}

no need to specify the "EXCEPTION" keyword, the log should be red in the tracing console automatically.

Currently we have to:
TraceError.sysout("Grip.getProps; EXCEPTION " + err, err);

@fflorent: since you are working on issue #1, perhaps you could do this one too?

Honza

Edit: Good first bug. Basically, the idea is to test if:

1. The method was called using TraceError.sysout()
2. the first argument is an exception.

If it is the case (let err be the exception argument):

1. Get the name of the calling method using err.stack (or maybe Components.stack if it doesn't provide the name)
2. Print the equivalent of: TraceError.sysout("<name of the calling method>; EXCEPTION " + err, err);

TraceError is initialised in lib/core/trace.js

Florent

Buttons (available in the main toolbar) for docking, detaching and closing the toolbox should use Firebug style. See the attached image.

Honza

Right now there is a line dividing the selected tool and it's toolbar. The selected toolbox tab should blend with the toolbar.

FB 2.x screenshot for reference,

We should adapt the Options tab in the tracing console, so it's easier to set/unset existing options.

We might want to use a tree with check boxes where checking a branch automatically checks all child options. Tree is automatically constructed from options that use "/" characters to denote a path.

Existing options like DBG_ERROR or DBG_CONSOLE should still be supported (they won't have any child options, since there are no "/" characters).

Honza

The toolbox button hover state should look more like the devtools theme/s

• Show a background color on hover for "Element picker" and "Options". These buttons shows a background color today, but we should remove the 3d border.
• Do not show a background color for the "Dock window to the side", "Show in separate window" and "Close toolbox" buttons

See FB2 screenshot for reference.

FB2

.next

The Inspector panel toolbar needs to support Firebug theme. There are already couple of stylesheets toolbar.css and toolbox.css that should be used to style common toolbox UI (and toolbars). See: chrome/skin/classic/shared directory

There is also inspector.css that should be used for specific styles related to the Inspector panel.

All these stylesheets are loaded in InspectorOverlay.onReady() method.
https://github.com/firebug/firebug.next/blob/master/lib/inspector/inspectorOverlay.js#L45

Honza

Mouse over the options button moves the search box 1px to the left.

One of the first steps is implementation of new Firebug theme for native tools. There should also be a new option that allows activation/deactivation of the theme. See the screenshot.

Note that the active theme appends a new class on document-element in the Toolbox. For now this is hardcoded inside chrome.js file, see loadFirebugTheme() method.

doc.documentElement.classList.add("theme-firebug");

The code that appends the new option into Toolbox options dialog might be in chrome.js module or perhaps new module can be created (and used from chrome.js).

Honza

Firebug influences the display of the default themes of the DevTools. When it's installed the Console panel looks like this when the light theme is selected:

while it should look like this:

Some seen issues:

• Panel buttons width is smaller
• Search field is displayed
• DOM side panel is always shown
• The command line icon is different

Sebastian

Looks like this:

Should look like this:

Sebastian

We should remove all obsolete API in
https://github.com/firebug/firebug.next/blob/master/lib/core/css.js

... and describe way how to use native API instead.

Honza

See windows screenshot for reference.

Windows

OS-X

According to the project's readme file, firebug.next should use the same code styles as Add-on SDK.

• Indent all CSS code so it uses 2-column indentation

Telemetry now enabled by default in the beta channel of Firefox and we should start using it for measurements or experiments that would help us make better decisions about upcoming features.

The first step could be measuring activation/deactivation of the Firebug theme.

Honza

STR:

1. Load any page e.g. https://getfirebug.com/tests/manual/console/joes-original/test.html
2. Open the toolbox and select the DOM panel
3. Click to expand a tree item (e.g. frame), it isn't expanded -> BUG

This is because repObject property is not set to the target row.
Here is where Domplate generates string for eval
https://github.com/firebug/firebug.next/blob/master/lib/core/domplate.js#L526

Here is where it's not set:
https://github.com/firebug/firebug.next/blob/master/lib/dom/domTree.js#L140

@simonlindholm: this might be related to global scope/eval/wrappers, do you have any tips? Also sounds like related to issue #14

Honza

Main panel-tabs should not use bottom line to separate itself from the inner panel toolbar. The line should be removed. See the screenshot.

Honza

See Windows screenshot for reference

Windows

OS-X

Side panel tabs take too much horizontal space. It would be great if we could somehow remove the flex behavior.

See the attached screenshot to compare FB2 and FB3

Honza