Web Inspector: provide a button to expand inspector toolbar when not all panel buttons fit

[Andrey Kosyakov]

When window is not wide enough for toolbar to accommodate everything, search control is retained, right-most icons are hidden and a button is displayed to open a drop down with the rest of the icons.

[Andrey Kosyakov]

Created attachment 82826 [details]
screenshot

[Andrey Kosyakov]

Created attachment 82829 [details]
patch

[WebKit Review Bot]

Attachment 82829 [details] did not pass style-queue:

Failed to run "['Tools/Scripts/check-webkit-style', '--diff-files', u'Source/WebCore/ChangeLog', u'Source/WebCor..." exit_code: 1

Source/WebCore/inspector/front-end/ToolbarDropdown.js:1:  One or more unexpected \r (^M) found; better to use only a \n  [whitespace/carriage_return] [1]
Suppressing further [whitespace/carriage_return] reports for this file.
Total errors found: 125 in 8 files


If any of these errors are false positives, please file a bug against check-webkit-style.

[Pavel Feldman]

Comment on attachment 82829 [details]
patch

View in context: https://bugs.webkit.org/attachment.cgi?id=82829&action=review

> Source/WebCore/inspector/front-end/ToolbarDropdown.js:37
> +    var toolbarStyle = getComputedStyle(this._toolbar);

You should make original style applicable to the new elements. Also won't work for the Mac port.

> Source/WebCore/inspector/front-end/ToolbarDropdown.js:99
> +    if (!WebInspector.toolbarDropdown) {

Could you keep it as a local state?

> Source/WebCore/inspector/front-end/inspector.css:184
> +    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(251, 251, 251, 0.9)), to(rgba(231, 231, 231, 0.9)));

Should it be themed? toolbar-label ?

[Andrey Kosyakov]

Created attachment 82948 [details]
patch

[Pavel Feldman]

Comment on attachment 82948 [details]
patch

View in context: https://bugs.webkit.org/attachment.cgi?id=82948&action=review

> Source/WebCore/inspector/front-end/ToolbarDropdown.js:31
> +WebInspector.ToolbarDropdown = function()

I think you should extract toobar component from inspector.js, not make it involved with dropdown in addition to the toolbar internals.

> Source/WebCore/inspector/front-end/ToolbarDropdown.js:77
> +                var clone = toolbarElement.cloneNode(true);

I don't think you should clone node here, it would be more intuitive to simply reuse toolbar button creation code.

[Andrey Kosyakov]

Created attachment 83170 [details]
patch

[Pavel Feldman]

Comment on attachment 83170 [details]
patch

Could you split this into a number of changes that we could review?

[Andrey Kosyakov]

Created attachment 83183 [details]
patch

[Andrey Kosyakov]

Created attachment 83184 [details]
patch (added missing file)

[WebKit Review Bot]

Attachment 83183 [details] did not build on chromium:
Build output: http://queues.webkit.org/results/7939811

[Pavel Feldman]

Comment on attachment 83184 [details]
patch (added missing file)

View in context: https://bugs.webkit.org/attachment.cgi?id=83184&action=review

> Source/WebCore/inspector/front-end/Toolbar.js:110
> +    {

Nuke this?

[Andrey Kosyakov]

Created attachment 83297 [details]
patch to land

- Fixed toolbar dragging
- Nuked _toolbarItemClicked

[Andrey Kosyakov]

Manually committed r79313: http://trac.webkit.org/changeset/79313