1498487 - Align the flex item outline with the latest mockups

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P2)

Description

[Patrick Brosset <:pbro>]

Attachment: The before/after mockup

From Victoria:
the situation where an items attempts to grow but is clamped starts to look a bit confusing with the current styling.
I would propose bolder styling for the final bounding box to make it clear that it's the most important part as it's the end result.
I would also suggest softer styling for the grow.
Also, if it would fit, a 'grow' label could be really helpful.

Comment 1

[Patrick Brosset <:pbro>]

Attachment: Bug 1498487 - Flex item outline design changes; r?gl!

- Made the border for the final size thicker
- Made the delta area more transparent
- Removed the arrow-head pattern for the delta area
- Added a thin horizontal arrow instead
- Removed the background circle around the lock icon
- Added a non-blurry shadow area around it instead

The mockup also called for adding a new label for "grow".
I did not implement this yet, because this will require more
work that can be done in a separate bug. We also need to
decide what happens if there isn't enough room to display
it.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5b5ed02f86c7
Flex item outline design changes; r=gl

Comment 3

[Bogdan Tara[:bogdan_tara | bogdant]]

Backed out changeset 5b5ed02f86c7 (Bug 1498487) for browser_all_files_referenced.js failures.

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&selectedJob=205089052&revision=5b5ed02f86c785f0b78999f8ca94baf057eaf799

Backout link: https://hg.mozilla.org/integration/autoland/rev/88e822bc1ea5802357ddb7b68b3d1f2254ebfa67

Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=205089052&repo=autoland&lineNumber=2482

[task 2018-10-12T15:06:41.678Z] 15:06:41     INFO - unreferenced devtools resource file: resource://devtools/shared/jsbeautify/src/beautify-js.js
[task 2018-10-12T15:06:41.679Z] 15:06:41     INFO - unreferenced devtools resource file: resource://devtools/shared/jsbeautify/src/beautify-tests.js
[task 2018-10-12T15:06:41.681Z] 15:06:41     INFO - unreferenced devtools resource file: resource://devtools/shared/platform/cache-entry.js
[task 2018-10-12T15:06:41.683Z] 15:06:41     INFO - unreferenced devtools resource file: resource://devtools/shared/platform/clipboard.js
[task 2018-10-12T15:06:41.683Z] 15:06:41     INFO - unreferenced devtools resource file: resource://devtools/shared/platform/stack.js
[task 2018-10-12T15:06:41.686Z] 15:06:41     INFO - Buffered messages finished
[task 2018-10-12T15:06:41.690Z] 15:06:41     INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_all_files_referenced.js | there should be no unreferenced files - Got 1, expected 0
[task 2018-10-12T15:06:41.691Z] 15:06:41     INFO - Stack trace:
[task 2018-10-12T15:06:41.692Z] 15:06:41     INFO - chrome://mochikit/content/browser-test.js:test_is:1295
[task 2018-10-12T15:06:41.692Z] 15:06:41     INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_all_files_referenced.js:checkAllTheFiles:771
[task 2018-10-12T15:06:41.693Z] 15:06:41     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1093
[task 2018-10-12T15:06:41.695Z] 15:06:41     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1084
[task 2018-10-12T15:06:41.697Z] 15:06:41     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:986
[task 2018-10-12T15:06:41.698Z] 15:06:41     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:795
[task 2018-10-12T15:06:41.703Z] 15:06:41     INFO - Not taking screenshot here: see the one that was previously logged
[task 2018-10-12T15:06:41.704Z] 15:06:41     INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_all_files_referenced.js | unreferenced file: chrome://devtools/skin/images/arrowhead-right.svg - 
[task 2018-10-12T15:06:41.705Z] 15:06:41     INFO - Stack trace:
[task 2018-10-12T15:06:41.706Z] 15:06:41     INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_all_files_referenced.js:checkAllTheFiles:775
[task 2018-10-12T15:06:41.710Z] 15:06:41     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1093
[task 2018-10-12T15:06:41.710Z] 15:06:41     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1084
[task 2018-10-12T15:06:41.711Z] 15:06:41     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:986
[task 2018-10-12T15:06:41.712Z] 15:06:41     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:795
[task 2018-10-12T15:06:41.713Z] 15:06:41     INFO - ignored unused whitelist entry: resource://app/blocklist.xml
[task 2018-10-12T15:06:41.714Z] 15:06:41     INFO - ignored unused whitelist entry: resource://gre/gmp-clearkey/0.1/manifest.json
[task 2018-10-12T15:06:41.715Z] 15:06:41     INFO - ignored unused whitelist entry: resource://gre/res/test.properties
[task 2018-10-12T15:06:41.721Z] 15:06:41     INFO - missing file: resource://devtools/client/debugger/new/src/workers/parser/getScopes/visitor.js referenced from resource://devtools/client/debugger/new/src/workers/parser/getScopes/index.js
[task 2018-10-12T15:06:41.722Z] 15:06:41     INFO - missing file: resource://devtools/application.ftl.js referenced from resource://devtools/client/application/initializer.js
[task 2018-10-12T15:06:41.723Z] 15:06:41     INFO - missing file: resource://devtools/shared/platform/chrome/clipboard.js referenced from resource://devtools/client/inspector/inspector.js,resource://devtools/client/netmonitor/src/widgets/RequestListContextMenu.js,resource://devtools/client/inspector/fonts/components/FontOrigin.js,resource://devtools/client/inspector/shared/style-inspector-menu.js,resource://devtools/client/inspector/rules/rules.js,resource://devtools/client/inspector/markup/views/element-container.js,resource://devtools/client/netmonitor/src/har/har-exporter.js,resource://devtools/client/inspector/computed/computed.js,resource://devtools/client/webconsole/utils/context-menu.js
[task 2018-10-12T15:06:41.724Z] 15:06:41     INFO - missing file: resource://devtools-client-shared/vendor/lib/ReactPropTypesSecret.js referenced from resource://devtools-client-shared/vendor/react-prop-types.js
[task 2018-10-12T15:06:41.726Z] 15:06:41     INFO - missing file: resource://devtools-client-shared/vendor/checkPropTypes.js referenced from resource://devtools-client-shared/vendor/react-prop-types.js
[task 2018-10-12T15:06:41.727Z] 15:06:41     INFO - missing file: resource://devtools-client-shared/vendor/factoryWithTypeCheckers.js referenced from resource://devtools-client-shared/vendor/react-prop-types.js
[task 2018-10-12T15:06:41.728Z] 15:06:41     INFO - missing file: resource://devtools-client-shared/vendor/factoryWithThrowingShims.js referenced from resource://devtools-client-shared/vendor/react-prop-types.js
[task 2018-10-12T15:06:41.729Z] 15:06:41     INFO - missing file: resource://devtools-client-shared/vendor/emptyFunction.js referenced from resource://devtool

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/202887e7c361
Flex item outline design changes; r=gl

Comment 5

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/202887e7c361