Datalist option's label not used
https://bugs.webkit.org/show_bug.cgi?id=201768
<rdar://problem/55361186>

Reviewed by Darin Adler.

Source/WebCore:

Refactor DataListSuggestionInformation's suggestions to include label text as well as values, and then adjust
TextFieldInputType::suggestions() to match label text as well as values for ports that are capable of showing
label text in datalist suggestion UI.

Test: fast/forms/datalist/datalist-option-labels.html

* html/DataListSuggestionInformation.h:

Introduce DataListSuggestion, a wrapper around a value and label. Currently, the list of datalist suggestions
is only a `Vector<String>`; change it to be a `Vector<DataListSuggestion>` instead.

(WebCore::DataListSuggestion::encode const):
(WebCore::DataListSuggestion::decode):
(WebCore::DataListSuggestionInformation::encode const):
(WebCore::DataListSuggestionInformation::decode):

Move encoding and decoding for DataListSuggestionInformation out of WebCoreArgumentCoders and into WebCore.

* html/TextFieldInputType.cpp:
(WebCore::TextFieldInputType::listAttributeTargetChanged):
(WebCore::TextFieldInputType::suggestions):

When computing suggestions, match label text in addition to values on ports that display label text in the
chrome; for the time being, this is only the case for macOS, but will be extended to iOS as well in a future
patch. Note that we don't plumb label text if it is already the same as the value, to avoid duplicate strings
from showing up.

(WebCore::TextFieldInputType::didCloseSuggestions):
* html/TextFieldInputType.h:
* loader/EmptyClients.h:
* page/ChromeClient.h:

Add a chrome client hook to return whether or not the client shows label text in its datalist UI.

* platform/DataListSuggestionsClient.h:

Source/WebKit:

Add support on macOS for showing option labels in datalist suggestions.

* Shared/WebCoreArgumentCoders.cpp:
(IPC::ArgumentCoder<DataListSuggestionInformation>::encode): Deleted.
(IPC::ArgumentCoder<DataListSuggestionInformation>::decode): Deleted.
* Shared/WebCoreArgumentCoders.h:

Remove WebCoreArgumentCoders logic for encoding and decoding DataListSuggestionInformation. See
DataListSuggestionInformation.h in WebCore for more detail.

* UIProcess/gtk/WebDataListSuggestionsDropdownGtk.cpp:
(WebKit::WebDataListSuggestionsDropdownGtk::show):

Tweak GTK code to adjust for the change from `String` to `DataListSuggestion`.

* UIProcess/ios/WebDataListSuggestionsDropdownIOS.mm:
(-[WKDataListSuggestionsControl didSelectOptionAtIndex:]):
(-[WKDataListSuggestionsControl textSuggestions]):
(-[WKDataListSuggestionsControl suggestionAtIndex:]):

Adjust some iOS codepaths to use DataListSuggestion::value as the value string to display.

* UIProcess/mac/WebDataListSuggestionsDropdownMac.mm:

Tweak several UI constants. A suggestion cell may now be either 20 or 40pt tall, depending on whether it has
label text to show.

Currently, the maximum combined height of the table view cells is 120 (not including spacing between cells and
vertical padding around the top and bottom of the table view), since the maximum number of cells to show is 6
and each cell is 20pt tall. Maintain this constant by making the maximum cell height 120, which accomodates
either three labeled cells, or 6 unlabeled cells (i.e. to match shipping behavior).

(-[WKDataListSuggestionView initWithFrame:]):
(-[WKDataListSuggestionView layout]):

Maintain two text fields or value and (optionally) label text: `_valueField` and `_labelField`. The value field
fills the bounds of the cell in the case where there is no label text, but fills only the top half of the cell
in the case where there is label text. The label field takes the bottom half of the cell in this case.

Additionally, add a divider view that may appear at the very bottom of each cell. This divider view is present
when one or more suggestions in the datalist are labeled.

(-[WKDataListSuggestionView setValue:label:]):

Renamed from -setText:. Add a label string argument as well.

(-[WKDataListSuggestionView setShouldShowBottomDivider:]):

Add getters and setters for the -shouldShowBottomDivider property, which can be used to make the divider view
visible or hidden.

(-[WKDataListSuggestionView shouldShowBottomDivider]):
(-[WKDataListSuggestionView setBackgroundStyle:]):

Use -[NSColor secondaryLabelColor] for the label text field.

(shouldShowDividersBetweenCells):

Add a helper method to determine whether the table view should be showing clear dividers between each item.
We only do so if there are one or more labels to be shown.

(-[WKDataListSuggestionsController initWithInformation:inView:]):
(-[WKDataListSuggestionsController currentSelectedString]):
(-[WKDataListSuggestionsController updateWithInformation:]):
(-[WKDataListSuggestionsController moveSelectionByDirection:]):

Drive-by fix: scroll to reveal each selected row when using the arrow keys to navigate between items.

(-[WKDataListSuggestionsController dropdownRectForElementRect:]):
(-[WKDataListSuggestionsController tableView:heightOfRow:]):

Return either `dropdownRowHeightWithoutLabel` or `dropdownRowHeightWithLabel`, depending on whether there is
label text to be shown in that suggestion cell.

(-[WKDataListSuggestionsController tableView:viewForTableColumn:row:]):
(-[WKDataListSuggestionView setText:]): Deleted.
* WebProcess/WebCoreSupport/WebChromeClient.cpp:
(WebKit::WebChromeClient::canShowDataListSuggestionLabels const):
* WebProcess/WebCoreSupport/WebChromeClient.h:

Source/WebKitLegacy/mac:

See WebCore/ChangeLog and WebKit/ChangeLog for more details.

* WebCoreSupport/WebChromeClient.h:

LayoutTests:

Add a test to verify that when datalist suggestions incorporate option labels into the displayed text
suggestions, they are matched against when changing the value of the input field, and can be selected. This is
expected to be the case on macOS, but not on other platforms (for the time being).

* fast/forms/datalist/datalist-option-labels-expected.txt: Added.
* fast/forms/datalist/datalist-option-labels.html: Added.
* platform/gtk/fast/forms/datalist/datalist-option-labels-expected.txt: Added.
* platform/ios/fast/forms/datalist/datalist-option-labels-expected.txt: Added.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@259330 268f45cc-cd09-0410-ab3c-d52691b4dbfc
22 files changed
tree: 07e2b2c77a695cf1d333fca2d2dba47556a5334f
  1. JSTests/
  2. LayoutTests/
  3. ManualTests/
  4. PerformanceTests/
  5. Source/
  6. Tools/
  7. WebDriverTests/
  8. WebKit.xcworkspace/
  9. WebKitLibraries/
  10. Websites/
  11. .clang-format
  12. .dir-locals.el
  13. .gitattributes
  14. .gitignore
  15. ChangeLog
  16. ChangeLog-2012-05-22
  17. ChangeLog-2018-01-01
  18. CMakeLists.txt
  19. Makefile
  20. Makefile.shared
  21. ReadMe.md
ReadMe.md

WebKit

WebKit is a cross-platform web browser engine. On iOS and macOS, it powers Safari, Mail, iBooks, and many other applications.

Feature Status

Visit WebKit Feature Status page to see which Web API has been implemented, in development, or under consideration.

Trying the Latest

On macOS, download Safari Technology Preview to test the latest version of WebKit. On Linux, download Epiphany Technology Preview. On Windows, you'll have to build it yourself.

Reporting Bugs

  1. Search WebKit Bugzilla to see if there is an existing report for the bug you've encountered.
  2. Create a Bugzilla account to to report bugs (and to comment on them) if you haven't done so already.
  3. File a bug in accordance with our guidelines.

Once your bug is filed, you will receive email when it is updated at each stage in the bug life cycle. After the bug is considered fixed, you may be asked to download the latest nightly and confirm that the fix works for you.

Getting the Code

On Windows, follow the instructions on our website.

Cloning the Git SVN Repository

Run the following command to clone WebKit's Git SVN repository:

git clone git://git.webkit.org/WebKit.git WebKit

or

git clone https://git.webkit.org/git/WebKit.git WebKit

If you want to be able to commit changes to the repository, or just want to check out branches that aren’t contained in WebKit.git, you will need track WebKit's Subversion repository. You can run the following command to configure this and other options of the new Git clone for WebKit development.

Tools/Scripts/webkit-patch setup-git-clone

For information about this, and other aspects of using Git with WebKit, read the wiki page.

Checking out the Subversion Repository

If you don‘t want to use Git, run the following command to check out WebKit’s Subversion repository:

svn checkout https://svn.webkit.org/repository/webkit/trunk WebKit

Building WebKit

Building macOS Port

Install Xcode and its command line tools if you haven't done so already:

  1. Install Xcode Get Xcode from https://developer.apple.com/downloads. To build WebKit for OS X, Xcode 5.1.1 or later is required. To build WebKit for iOS Simulator, Xcode 7 or later is required.
  2. Install the Xcode Command Line Tools In Terminal, run the command: xcode-select --install

Run the following command to build a debug build with debugging symbols and assertions:

Tools/Scripts/build-webkit --debug

For performance testing, and other purposes, use --release instead.

Using Xcode

You can open WebKit.xcworkspace to build and debug WebKit within Xcode.

If you don't use a custom build location in Xcode preferences, you have to update the workspace settings to use WebKitBuild directory. In menu bar, choose File > Workspace Settings, then click the Advanced button, select “Custom”, “Relative to Workspace”, and enter WebKitBuild for both Products and Intermediates.

Building iOS Port

The first time after you install a new Xcode, you will need to run the following command to enable Xcode to build command line tools for iOS Simulator:

sudo Tools/Scripts/configure-xcode-for-ios-development

Without this step, you will see the error message: “target specifies product type ‘com.apple.product-type.tool’, but there’s no such product type for the ‘iphonesimulator’ platform.” when building target JSCLLIntOffsetsExtractor of project JavaScriptCore.

Run the following command to build a debug build with debugging symbols and assertions for iOS:

Tools/Scripts/build-webkit --debug --ios-simulator

Building the GTK+ Port

For production builds:

cmake -DPORT=GTK -DCMAKE_BUILD_TYPE=RelWithDebInfo -GNinja
ninja
sudo ninja install

For development builds:

Tools/gtk/install-dependencies
Tools/Scripts/update-webkitgtk-libs
Tools/Scripts/build-webkit --gtk --debug

For more information on building WebKitGTK+, see the wiki page.

Building the WPE Port

For production builds:

cmake -DPORT=WPE -DCMAKE_BUILD_TYPE=RelWithDebInfo -GNinja
ninja
sudo ninja install

For development builds:

Tools/wpe/install-dependencies
Tools/Scripts/update-webkitwpe-libs
Tools/Scripts/build-webkit --wpe --debug

Building Windows Port

For building WebKit on Windows, see the wiki page.

Running WebKit

With Safari and Other macOS Applications

Run the following command to launch Safari with your local build of WebKit:

Tools/Scripts/run-safari --debug

The run-safari script sets the DYLD_FRAMEWORK_PATH environment variable to point to your build products, and then launches /Applications/Safari.app. DYLD_FRAMEWORK_PATH tells the system loader to prefer your build products over the frameworks installed in /System/Library/Frameworks.

To run other applications with your local build of WebKit, run the following command:

Tools/Scripts/run-webkit-app <application-path>

iOS Simulator

Run the following command to launch iOS simulator with your local build of WebKit:

run-safari --debug --ios-simulator

In both cases, if you have built release builds instead, use --release instead of --debug.

Linux Ports

If you have a development build, you can use the run-minibrowser script, e.g.:

run-minibrowser --debug --wpe

Pass one of --gtk, --jsc-only, or --wpe to indicate the port to use.

Contribute

Congratulations! You’re up and running. Now you can begin coding in WebKit and contribute your fixes and new features to the project. For details on submitting your code to the project, read Contributing Code.