GNOME Bugzilla – Bug 562446
Web developer features in Epiphany
Last modified: 2009-09-11 19:54:43 UTC
Recently the Web Inspector was included/enabled in WebKitGtk (webkit >= 1.0.3). See https://bugs.webkit.org/show_bug.cgi?id=19392 This will allow Epiphany to become and useful tool for web developers. The basic addition could be provide an "Inspect Element" context menu entry to launch the Web Inpector. This is a 0-cost feature for Epiphany, maybe less the 50 lines of code (see this[1] patch against GtkLauncher) to open the inspector. This menu entry is currently provided by Google Chrome too, while the inspector don't actually works ;) A different and more complete approach could be provide a "Web Development" extension adding to Epiphany a "Develop" menu in menu bar like Safari. You can read about thi Safari feature here[2]; in short the menu entries allow you to "change" browser (launch another installed on system or change user agent), launch specific section of the inspector (I don't know if WebKitGtk allow this), and disable some Safari features (cache, images, css, js...) [1] https://bugs.webkit.org/attachment.cgi?id=22365 [2] http://mac.elated.com/2008/05/22/web-developer-features-in-safari/
A bit more info about Safari Develop menu not exposed in linked article. - User Agent submenu This submenu provides the following menu entries: (*) Default -------------- ( ) Safari 3.1 - Mac ( ) Safari 3.1 - Windows ( ) Safari 2.0.4 ( ) Safari 1.3.2 ( ) Safari 1.2.4 -------------- ( ) Mobile Safari 1.1.3 - iPhone ( ) Mobile Safari 1.1.3 - iPod Touch -------------- ( ) Internet Explorer 7.0 ( ) Internet Explorer 6.0 ( ) Internet Explorer 5.5 ( ) Internet Explorer 5.2.3 Mac -------------- ( ) Firefox 2.0.0.12 - Mac ( ) Firefox 2.0.0.12 - Windows ( ) Firefox 1.5.0.12 - Mac ( ) Firefox 1.5.0.12 - Windows -------------- ( ) Opera 9.25 - Mac ( ) Opera 9.25 - Windows -------------- Other... Of course it's strongly mac-oriented ;) The "Other..." menu entry simpli open a dialog allowing you to enter a custom user agent, this new agent is added between the "Other..." menu entry and the previous separator. You can have only one custom user agent at time, and it's discarded when you jump back to default or to any other preloaded agent. - Snipped Editor I'll attach a screenshot. Not sure if the rendered html will use syles from current page...
Created attachment 123551 [details] screenshot for Safari Snippet Editor
Created attachment 124019 [details] [review] [PATCH] Enable the web inspector Wire the "Inspect element" feature in the popup menus, now that webkit gtk+ got inspector support. This enables an ultra cool and powerful web developer tool, like webdeveloper from firefox, but the right way™. --- embed/webkit/webkit-embed-prefs.c | 2 + embed/webkit/webkit-embed.c | 91 ++++++++++++++++++++++++++++++++++--- 2 files changed, 86 insertions(+), 7 deletions(-)
(In reply to comment #3) > Created an attachment (id=124019) [edit] > [PATCH] Enable the web inspector > Just a stupid note: maybe 650x450 is a better intial size :)
Diego, is it allowed to open Inspector on a specific section? Resources section could be used to show the page source (plus all related documents like css and js, this is a gread advantage over single file opening in gedit), closing bug #503968. Of course a reduced Inpector, with no "toolbar" and listing only textual resources, could be even better...
I don't understand, you can right click elements and inspect them and the inspector does the right thing. Otherwise I don't know what you mean.
Created attachment 124023 [details] Ideal result for View->Page Source action Diego, I mean for example go to www.gnome.org, select View -> Page Soure and make the inspector *directly* open like in this screenshot.
see comment #7, Kov? (cc)
Created attachment 124030 [details] [review] Web Inspector OK, fixed a bunch of things in the patch: - Indentation - Use g_object_connect when appropriate - Use gtk_widget_hide_on_delete instead of rolling our own - Actually hide the inspector window in the close-window callback - Do a proper epiphany preference for the web inspector stuff. The UI in the preferences dialog still missing, but I have to go to bed now :)
Created attachment 124034 [details] [review] Web Inspector So much for bed. I've added the UI now.
About the UI, maybe we should put the preference in a new tab "Web Development", not really sure...
Looks good to me, now we have to stick it to view-source (control+u). Kov should know how to open a window without actually inspecting anything.
Oh right, we also have to implement attach/dettach from main window, btw, do we want that?
It seems Inspector is "dockable" in the main window, clicking the button on its bottom left corner. Can you implement this too? :)
[GTK] API to start inspector for a WebView https://bugs.webkit.org/show_bug.cgi?id=22551 Could be interesting wait (and lobby) for this :) I've added a comment asking to open a specific Inspect section.
The basic stuff is in trunk now, with the inspector set to off by default and a small padding change in the preference UI.
I get the following on the console when opening the preferences menu. Activating the checkbox does not "stick" over sessions: $ epiphany sys:1: Warning: invalid cast from `GtkHBox' to `GtkToggleButton' sys:1: GtkWarning: gtk_toggle_button_get_active: assertion `GTK_IS_TOGGLE_BUTTON (toggle_button)' failed sys:1: Warning: gsignal.c:2267: signal `toggled' is invalid for instance `0xa0b0058' sys:1: Warning: gsignal.c:2267: signal `clicked' is invalid for instance `0xa092eb8' sys:1: Warning: gsignal.c:2267: signal `clicked' is invalid for instance `0xa0af8d8' sys:1: Warning: invalid cast from `GtkButton' to `GtkComboBox' sys:1: GtkWarning: gtk_combo_box_set_model: assertion `GTK_IS_COMBO_BOX (combo_box)' failed sys:1: GtkWarning: gtk_combo_box_set_row_separator_func: assertion `GTK_IS_COMBO_BOX (combo_box)' failed sys:1: Warning: invalid cast from `GtkButton' to `GtkCellLayout' sys:1: GtkWarning: gtk_cell_layout_pack_start: assertion `GTK_IS_CELL_LAYOUT (cell_layout)' failed sys:1: GtkWarning: gtk_cell_layout_set_attributes: assertion `GTK_IS_CELL_LAYOUT (cell_layout)' failed sys:1: Warning: gsignal.c:2267: signal `clicked' is invalid for instance `0xa0c1038' sys:1: Warning: invalid cast from `GtkButton' to `GtkTreeView' sys:1: GtkWarning: gtk_tree_view_set_reorderable: assertion `GTK_IS_TREE_VIEW (tree_view)' failed sys:1: GtkWarning: gtk_tree_view_set_model: assertion `GTK_IS_TREE_VIEW (tree_view)' failed sys:1: GtkWarning: gtk_tree_view_set_headers_visible: assertion `GTK_IS_TREE_VIEW (tree_view)' failed sys:1: GtkWarning: gtk_tree_view_insert_column_with_attributes: assertion `GTK_IS_TREE_VIEW (tree_view)' failed sys:1: GtkWarning: gtk_tree_view_get_column: assertion `GTK_IS_TREE_VIEW (tree_view)' failed sys:1: GtkWarning: gtk_tree_view_column_set_resizable: assertion `GTK_IS_TREE_VIEW_COLUMN (tree_column)' failed sys:1: GtkWarning: gtk_tree_view_column_set_sort_column_id: assertion `GTK_IS_TREE_VIEW_COLUMN (tree_column)' failed sys:1: GtkWarning: gtk_tree_view_get_selection: assertion `GTK_IS_TREE_VIEW (tree_view)' failed sys:1: GtkWarning: gtk_tree_selection_set_mode: assertion `GTK_IS_TREE_SELECTION (selection)' failed sys:1: Warning: invalid (NULL) pointer instance sys:1: Warning: g_signal_connect_data: assertion `G_TYPE_CHECK_INSTANCE (instance)' failed sys:1: GtkWarning: gtk_tree_selection_get_selected: assertion `GTK_IS_TREE_SELECTION (selection)' failed ** (epiphany:10520): CRITICAL **: load_info: assertion `info->widget != NULL' failed sys:1: Warning: g_value_get_int: assertion `G_VALUE_HOLDS_INT (value)' failed ** (epiphany:10520): WARNING **: Unsupported data type for combo box default_encoding_combo ** (epiphany:10520): CRITICAL **: connect_signals: assertion `info->widget != NULL' failed
*** Bug 564972 has been marked as a duplicate of this bug. ***
(In reply to comment #17) > I get the following on the console when opening the preferences menu. > Activating the checkbox does not "stick" over sessions: I reported this as a separate bug (http://bugzilla.gnome.org/show_bug.cgi?id=565485), and provided a patch.
Created attachment 125212 [details] [review] fix for the current web inspector preference The current web inspector preference is broken. This patch is needed for it to work.
The context menu with inspector looks a bit weird (separator should be removed) when right clicking on buttons/checkboxes/listboxes.
So... not sure why is this open still, closing as FIXED.
we miss the docking of the inspector in the main window.